Hacker News Reader

Comment by Axsuul | Hacker News Reader

Wow I needed this library about 3 weeks ago! Anyone know else know of any alternatives?

I may be missing something but it seems to be going for the same space as the popular D3.js library: http://d3js.org

d3.js doesn't target <canvas> (it renders to <svg>) so graph drawing can be pretty slow. Some more alternatives for this scenario (both of which handle fast drawing to <canvas>:

http://trifacta.github.io/vega/ http://sigmajs.org/

To add to the list - I recently used http://kineticjs.com for a data vis project involving some massive amounts of data in the browser and was very impressed at its performance and ease of use.

I can't seem to be able to find good examples of kinectJS in action. Could you please point me to some solid examples or in-depth tutorials?

Try the "Labs" link on the front page. There are multiple pages — that's a bit hard to see.

http://www.html5canvastutorials.com/category/labs/

Unless that's specifically what you're dissatisfied with.

I think what's confusing me the most is I'm not quite sure how or what "html5canvastutorials" has to do with KinectJS.

But thanks for the link, I'll go about giving it another try :)

Sorry for not getting back to you sooner, but that's the link I'd suggest too. The "html5canvastutorials" site is made by the same guy who made Kinetic so I think he was just trying to fill it out with some more content :)

PS: It's Kinetic, not Kinect, that might be screwing up your googling!

I didn't think d3 targets anything in particular (from memory the tutorial uses divs to draw a histogram), a google search turns up a number of d3 canvas examples.

This is definitely incorrect. You can use d3.js to target svg, canvas, html, or any other data format that you want. Check out http://bl.ocks.org/mbostock/2647922 for a canvas based example.

I've actually built very similar graphs to the examples shown in vis.js with d3.js. I was a bit surprised that it wasn't just a wrapper library on top of d3.js (plenty of those exist to make working with d3 a little easier).

You can target canvas with d3, but you loose much of the abstraction that makes d3 powerful. For example, look at all of the low-level canvas rendering code that is used. Not as powerful as visualizations driven by chaining .data().enter().append().attr() which can easily be re-shaped by swapping html tags and CSS attributes.

d3 really is a three-legged stool of HTML, JS and CSS. When targeting <canvas>, you loose both HTML and CSS and thus much of the power.

EDIT: I should clarify that I'm thinking of HTML in an abstract sense that also includes SVG. By hooking into the DOM, d3 gets a free scenegraph that makes it easy to modify the components of the visualization without writing low-level code.

I'd argue that much of D3's power comes not from the update pattern for DOM elements, but the reusable components pattern.

http://bost.ocks.org/mike/chart/

Examples in the core library, all compatible with Canvas, include scales, layouts, geographic projections, time/color utilities, CSV/TSV loading, and behaviors (drag/zoom/etc). There's some built-in canvas rendering like d3.geo.path which can be provided a canvas context.

The only things you lose are selections and the convenient transitions that go along with selections. But you can use these to modify and transition the canvas elements themselves!

In most cases you also loose the ability to specify graphic components declaratively through .append() and .attr(). Instead, you must imperatively specify how to produce the drawing from the data by manipulating the canvas context.

I have use d3 to create composite graphics that included elements rendered to canvas and it certainly is powerful. But, I still believe that the sweet spot of the library requires being able to work with the DOM and CSS.

Reply on news.ycombinator.com