4 ms·

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 das

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/6eacbc08-2e16-11e4-827b-d21f8cd5f020.png 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.

dangets 12y ago
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://bl.ocks.org/mbostock/4060606 http://www.trulia.com/trends/2011/09/house-hunter-by-day-not-so-much-after-midnight/ http://www.trulia.com/trends/2011/09/house-hunter-by-day-not... http://prcweb.co.uk/circularheatchart/ http://prcweb.co.uk/circularheatchart/ http://bl.ocks.org/tjdecke/5558084 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 ;)
bradleyboy 12y ago
Highcharts (free for non-commercial) has heat maps: http://www.highcharts.com/demo/heatmap http://www.highcharts.com/demo/heatmap
pwang 12y ago
Heatmaps are fairly easy to do with Bokeh, for instance: http://bokeh.pydata.org/docs/gallery/unemployment.html http://bokeh.pydata.org/docs/gallery/unemployment.html
mef51 12y ago
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 https://github.com/benbria/d3.chart.bubble-matrix
corford 12y ago
Epoch can do realtime heatmaps: http://fastly.github.io/epoch/real-time/#heatmap http://fastly.github.io/epoch/real-time/#heatmap
- AYBABTME 12y ago
  Looks pretty much like what I'm looking for, thanks!
ylem 12y ago
For work, we had to fork jqplot to add features like heatmaps, zooming, etc.: https://github.com/scattering/jqplot.science 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.html 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=NGB30SANS http://ncnr.nist.gov/ipeek/singleplotwindow.html?instrument=... There are of course glitches, but hopefully you find some of this useful!
- chenster 12y ago
  phpChart (http://phpchart.org 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.
  - sendmorbutt 12y ago
    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.
saraid216 12y ago
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.

dangets 12y ago

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://bl.ocks.org/mbostock/4060606 http://www.trulia.com/trends/2011/09/house-hunter-by-day-not-so-much-after-midnight/ http://www.trulia.com/trends/2011/09/house-hunter-by-day-not... http://prcweb.co.uk/circularheatchart/ http://prcweb.co.uk/circularheatchart/ http://bl.ocks.org/tjdecke/5558084 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 ;)

bradleyboy 12y ago

Highcharts (free for non-commercial) has heat maps: http://www.highcharts.com/demo/heatmap http://www.highcharts.com/demo/heatmap

pwang 12y ago

Heatmaps are fairly easy to do with Bokeh, for instance: http://bokeh.pydata.org/docs/gallery/unemployment.html http://bokeh.pydata.org/docs/gallery/unemployment.html

mef51 12y ago

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 https://github.com/benbria/d3.chart.bubble-matrix

corford 12y ago

Epoch can do realtime heatmaps: http://fastly.github.io/epoch/real-time/#heatmap http://fastly.github.io/epoch/real-time/#heatmap

AYBABTME 12y ago
Looks pretty much like what I'm looking for, thanks!

ylem 12y ago

For work, we had to fork jqplot to add features like heatmaps, zooming, etc.: https://github.com/scattering/jqplot.science 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.html 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=NGB30SANS http://ncnr.nist.gov/ipeek/singleplotwindow.html?instrument=... There are of course glitches, but hopefully you find some of this useful!

chenster 12y ago
phpChart (http://phpchart.org 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.
- sendmorbutt 12y ago
  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.

saraid216 12y ago

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.