Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

C3.js: D3-based reusable chart library

c3js.org

Post reply on HN
Print view View original

61–70 of 81 posts

Re: C3.js: D3-based reusable chart library

#61

Post by sendmorbutt »

chenster wrote: post #60
ylem wrote: post #51

Earlier quoted context omitted.

For work, we had to fork jqplot to add features like heatmaps, zooming, etc.: https://github.com/scattering/jqplot.science We also have the notion of "interactors" which allow you to add draggable widgets to a plot: http://ncnr.nist.gov/instruments/magik/calculators/calcR_wf.... To see the heatmap in action, you can look at: http://ncnr.nist.gov/ipeek/singleplotwindow.html?instrument=... There are of course glitches,…

phpChart ( http://phpchart.org ) is a higher level charting library for jqplot if you don't wan to spend days to learn custom styling and scripting.

We made a decision to go with phpChart in June. It works well in our use case. We can still add custom javascript when something is outside its offered feature set.

Re: C3.js: D3-based reusable chart library

#62

Post by caprock »

sdrothrock wrote: post #48
cjfont wrote: post #46

Earlier quoted context omitted.

With those many points you'll probably need something that makes use of HTML Canvas, and not SVG which slows down if you plot that many elements.

Do you happen to have any recommendations?

For dense data like that, you might give dygraphs a try.

Re: C3.js: D3-based reusable chart library

#63

Post by flashman »

capkutay wrote: post #17

Out of raw d3.js, nvd3.js, cubism, and rickshaw.js, I've by far had the best experience with nvd3. I was particularly pleased with the way nvd3 supports sliding data off line charts without any extra work. D3.js is an excellent, low level visualization library. But you will find yourself spending days to a couple weeks with custom styling, tooltips, legends, etc. Many high level charting libraries are nice because th…

We use nvd3 in an analytics dashboard with some success, and some troubles. Simple Excel-like behaviour, such as rotating the axis labels so they don't overlap, require lots and lots of tweaking.

Default bar/column chart settings occasionally give mystifying results, like the highest value in the chart plotting above the highest axis value (e.g. 23,600 plots above 22,000 instead of between 22-24k).

I'm sure we'll solve these issues, but they are eating up a bit of developer time for things we're used to having work out-of-the-box in something like Excel.

Re: C3.js: D3-based reusable chart library

#64

Post by frik »

Great, but I dislike the combined JS filesize. 267kb is simply still too big for mobile websites, given that it is only a part of a website. It seems to consume a bit too much memory for my iPad2, the first time I saw a blank demo; had to re-open Safari. (combined: c3 is 120kb and d3 is 147kb) c3.min: https://github.com/masayuki0812/c3/blob/master/c3.min.js , d3.min: https://github.com/mbostock/d3/blob/master/d3.min.js

A charts library that has no dependecies (no d3, no jquery, etc), has a filesize of less than 100kb and still looks great and offers useful features would be awesome. SVG vs. Canvas2D is another hot topic.

Re: C3.js: D3-based reusable chart library

#65

Post by chrischen »

omouse wrote: post #36

annnd it suffers from the same problem as other javascript libraries: the documentation is awful. If you want your reusable library to be adopted widely, you have to write good docs. I was hoping I could replace NVD3.js with C3.js but the docs are on par.

The documentation is nice... it's just incomplete.

Re: C3.js: D3-based reusable chart library

#66

Post by frik »

jbogp wrote: post #3

This is nice, easy to use. It is however only using an extremely limited subset of d3 capabilities, which makes me wonder what added value is brought by the fact of making this d3 based compared to other "pure" and lightweight chart libraries which have the same functions [1] My usual go to library: Flot http://www.flotcharts.org/

I like flotcharts too. The Canvas2D rendering has some advantages too. Though, I would like to remove the jquery dependency. I tried to use zepto instead of jquery, it worked but zepto's codebase is ugly and it relies on outdated JS features that emit warnings in Firefox.

Re: C3.js: D3-based reusable chart library

#67

Post by creatio »

1971genocide wrote: post #39
capkutay wrote: post #17

Out of raw d3.js, nvd3.js, cubism, and rickshaw.js, I've by far had the best experience with nvd3. I was particularly pleased with the way nvd3 supports sliding data off line charts without any extra work. D3.js is an excellent, low level visualization library. But you will find yourself spending days to a couple weeks with custom styling, tooltips, legends, etc. Many high level charting libraries are nice because th…

nvd3.js is awesome. However It always crashes for very large dataset. I had to reduce my dataset size for nvd3.js to not crash, however programs like MATLAB has no problem visualising really large dataset where you can zoom to individual data point. Its in my TODO list to make nvd3.js handle large data set so that it can compete with MATLAB/Python.

Just happen to come by this today: http://i.imgur.com/5zE08DX.png

Re: C3.js: D3-based reusable chart library

#68

Post by muyueh »

I build visualizations with d3.js for my clients (http://muyueh.com/42/), and I have always wonders whether I will be one day replaced by library such as c3.js.

I have been watching closely different library, and felt that most of the library are just providing default value to d3.js, plus adding some nice plug-in (such as tooltips). If we are looking for a bar chart, then it's very fast to use a bar chart library to build what we want. Yet some problems may occur:

1. Control, we thought that we need bar chart, but we actually need bar chart’. In my process of developing effective visual, I often need to access different part of the API.

2. Choice, currents charts provided by most of the library are available in Google Charts and Excel. This might a question of time: these library are fairly new, and maybe in the near future these library will provide all visualization available in the d3.js page. But maybe it’s not because of time, but of complexity. If these library were providing better abstraction, it should be easier to develop more complex charts.

3. Extendability: We probably don't just need the bar-chart as a stand alone visual, but as building block that can interact with other component (texts or maps).

An interesting question is to ask why d3.js was designed so “low level”, why not directly releasing a “high level library”? My hypothesis is that maybe this is the right level of abstraction. When you tried to get “higher”, you actually lose power/control over your visual. Maybe that’s the reason why people are sharing a lot of their work on http://bost.ocks.org/, doing some small experiments, laying down some building block, perhaps currently that is the most efficient way of building re-usable chart.

I shared my thought on the issue, in hope that people challenge my hypothesis: my current work depends on it.

Re: C3.js: D3-based reusable chart library

#69

Post by webmdee »

muyueh wrote: post #68

I build visualizations with d3.js for my clients ( http://muyueh.com/42/ ), and I have always wonders whether I will be one day replaced by library such as c3.js. I have been watching closely different library, and felt that most of the library are just providing default value to d3.js, plus adding some nice plug-in (such as tooltips). If we are looking for a bar chart, then it's very fast to use a bar chart library…

I agree with your points, which is why I have been hesitant to try out these wrappers around d3.

It is nice to have tool tips and other bells and whistles outbid the box though. I wonder if anybody has tried to do a more complex visualization (hierarchical bar chart for example) in one of these wrappers?

Re: C3.js: D3-based reusable chart library

#70

Post by cjfont »

sdrothrock wrote: post #48
cjfont wrote: post #46

Earlier quoted context omitted.

With those many points you'll probably need something that makes use of HTML Canvas, and not SVG which slows down if you plot that many elements.

Do you happen to have any recommendations?

For a simple scatterplot with many points I would probably simply use Canvas directly, and perhaps borrow elements from D3 like d3.scale to plot the axis labels. It is possible to use Canvas underneath to plot the 100,000 points, and SVG on top for other stuff like tooltips and brush selecting.
Post reply on HN