Skip to main content
100%

d3fc extent example

✓ Published0🌍 Public
CColinEberhardt
Last edited Aug 9, 2018
Created on Aug 9, 2017

This example shows a line chart of stock closing prices over time, with the chart’s x and y domains computed using the d3fc extent components (`fc.extentLinear` and `fc.extentDate`). The y-extent pads the upper range by 10% and includes zero, while the x-extent pads by one day in both directions using domain units. Data comes from a CSV file, rendered as an SVG line with circles for each point, axes via `d3.axisBottom` and `d3.axisLeft`.

AI-generated description

This is a simple demonstration of the d3fc extent component, which provides a flexible mechanism for computing the domain of a chart. It allows you to add padding, define multiple accessors, include fixed values (e.g. ensure it includes zero), etc.

var yExtent = fc.extentLinear()
	// the property of the data that defines the y extent
  .accessors([function(d) { return d.close; }])
  // pad by 10% in the +ve direction
  .pad([0, 0.1])
  // ensure that the extent includes zero
  .include([0]);

var xExtent = fc.extentDate()
	// the property of the data that defines the x extent
  .accessors([function(d) { return d.date; }])
  // pad in domain units (in this case milliseconds)
  .padUnit('domain')
  // ensure that the scale is padded by one day in either direction
  .pad([millisPerDay, millisPerDay]);

// apply the extent to the scales
x.domain(xExtent(data));
y.domain(yExtent(data));

Forked from this block: https://bl.ocks.org/d3noob/2505b09d0feb51d0c9873cc486f10f67

forked from <a href='http://bl.ocks.org/d3noob/'>d3noob</a>'s block: <a href='http://bl.ocks.org/d3noob/2505b09d0feb51d0c9873cc486f10f67'>d3fc extent example</a>

mit Licensed

Similar vizzes