31

I want to create a time series line graph in D3, with a smaller version of the graph below that allows the user to zoom in on certain sections of the chart, like a Google Finance graph.

The closest example I've found is this swimlane chart:

http://bl.ocks.org/1962173

Does anyone have any examples of doing this with a line graph in D3?

NB: I definitely want a small version of the graph with a resizeable brush on top, not a purely draggable/zoomable x-axis, like this example.

Ideally, I'd like to use Rickshaw, but the Rickshaw examples only seem to have a range slider. So a Rickshaw example would be even better.

VividD
  • 10,456
  • 6
  • 64
  • 111
Richard
  • 62,943
  • 126
  • 334
  • 542
  • Instead of reimplementing that functionality from scratch, you might be better off taking an existing solution like [dygraphs](http://dygraphs.com/) and adding a "d3 compatibility" layer on top of it, i.e. something that allows you to use it in a d3-like fashion. – Lars Kotthoff Aug 14 '12 at 15:18
  • TechanJS is based on d3. https://github.com/andredumas/techan.js/wiki/Gallery But I think you're artificially limiting yourself if you only allow a d3 foundation. – mg1075 Jan 03 '16 at 16:24
  • So the most popular zoomable finance graph question on stackoverflow was closed as "off-topic" due to "recommend or find a book, tool, software library, tutorial or other off-site resource" 3 years after it was asked, __despite the author clearly looking for a zoomable time-series chart example using either D3 or Rickshaw?__ – Moobie Jan 02 '19 at 02:47

7 Answers7

34

NVD3 is a very cool project that has a number of reusable charts written upon D3. See here for an example of a line chart with a view finder, along with source code.

NVD3.js Line Chart with View Finder

Update: The NVD3 example now also links to an example of Mike Bostock's (creator of D3) which demonstrates similar functionality, the ability to zoom/focus on a selection of the data, implemented purely with D3.js.

D3.js Focus+Context via Brushing

GordyD
  • 5,063
  • 25
  • 29
  • 1
    The link is now broken, and I've posted [an answer](http://stackoverflow.com/a/16138657/1269037) that does *exactly* what the OP want, using `dygraphs`. – Dan Dascalescu Apr 22 '13 at 02:46
  • 2
    The link is still present, however they moved from nvd3.com to nvd3.org and a redirects have not been put in place. I have also updated the answer following this change to the resource. - http://nvd3.org/ghpages/lineWithFocus.html – GordyD Apr 22 '13 at 13:35
  • Here is a less relevant but similar implementation of brush selection by Mike Bostock: https://bl.ocks.org/mbostock/6498000 – Moobie Jan 02 '19 at 02:50
14

dygraphs does exactly what you want in this demo:

http://dygraphs.com/gallery/#g/range-selector

enter image description here

Ahmed Kotb
  • 6,269
  • 6
  • 33
  • 52
Dan Dascalescu
  • 143,271
  • 52
  • 317
  • 404
6

How about HighStock, HighCharts lesser known sibling?

enter image description here

dardenfall
  • 196
  • 2
  • 9
4

I know you're intent on using D3, but Humble Finance has to be worth a mention as it does exactly what you want with just javascript and canvases.

If you're really intent on using D3, I guess you will have to create something of your own which has to be a waste of time given how good and suitable humble finance is.

Tip for trying Humble Finance: the zip download doesn't include flotr2 which it requires, however it can easily be download from here (obviously you then have to add the required flotr2 files to the Humble Finance directory in the right place).

Edit:

Ignore Humble Finance, I tried using it a lot and it drove me round the bend. The code base seemed to be quite messy and you had to end up added far to many libraries to your page to get it to work, it's then very hard to make even minor alterations to the chart. I'm now using D3, but i found it's SVG rendered too slowly with lots (lots and lots) of points on the curve. I ended up using D3 to draw the axes, setup the scales and render the timeframe changing thing, and drawing the curve using a canvas. That seems to work pretty well. Sorry i don't have the example anywhere viewable.

SColvin
  • 11,584
  • 6
  • 57
  • 71
3

Have you seen Crossfilter? Another offering based on D3, which has similar properties to Google Finance's interface.

rowanu
  • 1,683
  • 16
  • 22
0

I'm not familiar with either of the frameworks you mention but wondered if it was an option for you to use google charts instead? Using this you would be able to what they do in google finance and the example for how to do it could be taken from their website.

If you're looking for other frameworks to look into I can recommend Emprise Charts - I'm pretty sure you would be able to do something similar there and their development team are very helpful.

James
  • 1,720
  • 5
  • 29
  • 50
0

Rickshaw now supports this!

See example and Rickshaw.Graph.RangeSlider.Preview.

Brian Low
  • 11,605
  • 4
  • 58
  • 63