xCharts - A D3-Based Library For Building Custom Charts and Graphs | Hacker News Reader

xCharts - A D3-Based Library For Building Custom Charts and Graphs

tenxer.github.com

124 pointsHirvesh35 comments

These libraries all look so very pretty, but with the exception of dygraphs, explode horribly given anything but the most superficial of data sets.

Speedy fetching/rendering/interaction of 10,000 samples for a handful of variables is always going to suck when every sample of every variable requires its own object with a handful of properties.

As for the usefulness of charts displaying only 4 or 5 data points.. well, you're really not gaining much from visual representation of such a tiny set, other than 'oooh that's pretty' feel-good factor.

Well isn't that a very positive comment. At which point do you see a link to a library that someone took time to code and polish and decide "now would be a good moment to shit all over it"??

In order to draw some boxes it (and many like it) require upwards of 10 heap allocations along with gobs of animation and sugar per 4 straight lines rendered on a 2D canvas, the result being they're useless for rendering actually large data sets – the very kind that benefit most from summary visual representation.

I just completed a charting update to an application. I ended up using HighChart because of backward compatibility with IE8, which is still in major use in corporations.

xCharts doesn't offer anything over highcharts that I can see. SVG Support coming to IE9 was great but it will be a few years yet before we can depend on SVG.

xCharts is offering itself free even for commercial use unlike HighCharts

Market share for IE8 and older is dropping pretty fast so I don't think a few years is fair. However you can get D3 working with older IE browsers there is a discussion on it here:

https://github.com/mbostock/d3/issues/619

It looks nice, but perhaps not as comprehensive as Rickshaw http://code.shutterstock.com/rickshaw/ - also based on d3. Of course there are so many different charting libraries, it's really hard to choose, but I guess it depends on your needs.

I just checked Rickshaw, their main page throws a lot of js errors in Google Chrome 24 in the console, making the examples unusable. Can anyone recommmend a more stable, D3-based charting library ?

The Rickshaw page is working fine for me in Chrome Canary (currently at Chrome 25) and Chrome 23, there's a single JS error but it's not preventing the examples from loading. Are you sure something else isn't the problem?

Have you checked the JavaScript console?

yup, that's where I saw the single error.

I checked Canary - the charts look fine, there is only a single js error in console. In Beta though, there is a lot of errors in d3.v2.js and rickshaw.min.js + that one that is reported in Canary (absinthe.min.js)

Check your extensions. Are they blocking any of the scripts? Try it without any extensions loaded.

Or you could look at NVD3 (https://github.com/novus/nvd3) which had 1.2k followers before the repo was taken down and put back up.

Could someone explain the title's summary? Surely D3 is the D3-based library for building custom charts and graphs?

In a sense, yes. D3 is at a lower level - basically taking any DOM element and mapping it to data. It doesn't have to be a chart or a graph. It could be a list of items or a table.

The library provided is more or less give some data and you get a chart.

I looked into using D3 for making typical x-y line and bar charts and found that it required significantly more custom work than HighCharts. My take-away from the experience was that D3 is great for very custom visualizations, but if you want to do something simpler, it is worth looking for libraries that do only that simpler thing well.

Using D3 for simple straightforward graphs (ie. where you just wanna throw some data in and get a generic graph out) is like using Rails for a simple 1 page static html site.

I'm currently implementing charts using Flot with AngularJS data-binding and directives.

I had to find a workaround to the fact that Flot requires fixed width. xCharts does not suffers this limitation but I will have to evaluate d3.js first.

D3.js as an Angular directive is a thing of beauty, once you get your D3.js graphics updating live from your Angular data you can do some very nice dynamic graphics with very little code, whether it be graphs or otherwise.

Brian Ford gives a nice example in his blog and on GitHub: http://briantford.com/blog/angular-d3.html https://github.com/btford/angular-d3-demo

Thanks for the feedback and links, will look into it now.

Why would having a fix width be a problem? In my mind the alternative is the canvas automatically expanding to the right and thereby requiring horizontal scrolling through the browser. Flot.js supports panning if you need to stretch out your xaxis which seems cleaner to me than horizontal scrolling in the browser.

I have a fluid layout (with Bootstrap grid) with the screen divided in two panes, and I'd like the chart to take all the width of the pane is in.

Hope that makes sense.

via Functionn - Open Source Resources For Web Developers & Designers: http://functionn.blogspot.com/2012/12/xcharts-d3-based-libra...

P.S. Functionn contains a whole lot more of awesome resources like xCharts. There only a fraction of them I can post here at a time. Take a look if you're interested, and subscribe:

http://functionn.blogspot.com

daeken mentioned this yesterday, but you're still spamming the same exact text with only the name of the library changed.

will take care not to do so from now on :)

D3 seems to be gaining strength here. Sure, it doesn't work perfectly in all browsers and requires a bit of customization effort to make the charts look really good. But for me, it is a joy to interact with a chart and show different views without fetching server data each time. Data lives in the DOM -- this is a powerful thing.

I don't like that all the examples (in the examples page) are animated. Loads of graphing libraries do that in their examples, and it's massively off-putting. My view is that charts shouldn't be animated unless the animation reveals something that a static chart couldn't.

Interesting library, however I can see a lot of js and svg parsing errors in IE9 console. Some examples from http://tenxer.github.com/xcharts/examples/ don't show on IE9 at all.

I was hoping this would also include a simple CSV or other delimited text import method, but I guess you have to construct the JSON yourself? Is it omitted because D3 already takes care of this in some other way?

D3 is a client-side js library - you'd have to write your own backend to upload and process csv's

I have to assume so, as D3 does have things like CSV import:

https://github.com/mbostock/d3/wiki/CSV

And I assume that it xCharts omits it because of the wide variety of ways you may get your data. (XHR CSV, JSON, WebSockets, etc)

Someone already mentioned Rickshaw, but I also know of one other library that looks similar to this: dc.js (http://nickqizhu.github.com/dc.js/)

Awesome, always love new charting libraries. I'm a big fan of D3 but it's too early to use in commercial apps (in my industry).

good job, keep it growing Paul.

Reply on news.ycombinator.com