Hacker News new | ask | show | jobs
by AYBABTME 4310 days ago
The type of chart I've found most useful is heat map charts, and none of the charting library I've looked at provide that:

Here's an example from a Datadog dashboard: https://cloud.githubusercontent.com/assets/1189716/4064956/6...

I wish such a chart style was more common, it's so much more useful than a typical line chart of the median/p9x. Unfortunately, I'm not familiar enough with D3 and such to write my own; it would likely be crap.

7 comments

I don't think it should be too difficult (not saying that d3 doesn't have a learning curve). There are some examples on the d3 gallery that would probably be close.

http://bl.ocks.org/mbostock/4060606 http://www.trulia.com/trends/2011/09/house-hunter-by-day-not... http://prcweb.co.uk/circularheatchart/ http://bl.ocks.org/tjdecke/5558084

Heck if you point me to a stock dataset I could probably code up a simple example that you could tweak. (no promises though ;)

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, but hopefully you find some of this useful!

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.
Heatmaps are fairly easy to do with Bokeh, for instance: http://bokeh.pydata.org/docs/gallery/unemployment.html
Eh. In D3, just transform the data into X/Y coordinates, create a DIV for each one, and then change the background color based on the desired value.

I think it's d3.scale.color to automatically set up a gradient you plug a value into and get a color out.

Epoch can do realtime heatmaps: http://fastly.github.io/epoch/real-time/#heatmap
Looks pretty much like what I'm looking for, thanks!
Highcharts (free for non-commercial) has heat maps:

http://www.highcharts.com/demo/heatmap

you may be able to reproduce a heatmap using this d3 extension.. it's called bubble matrix but both heatmaps and this bubble matrix are meant for displaying two dimensions of data

https://github.com/benbria/d3.chart.bubble-matrix