D3 Examples - d3-ez : Line Chart Example

d3-ez : Line Chart Example

A line chart or line graph is a type of chart which displays information as a series of data points called ‘markers’ connected by straight line segments. It is similar to a scatter plot except that the measurement points are ordered (typically by their x-axis value) and joined with straight line segments. Line Charts show how a particular data changes at equal intervals of time. A line chart is similar to the spline graph, but the spline graph draws a curved line between the points instead of the straight lines.

FUNCTION: Distribution; Trend over time

Data Source: https://www.ofx.com/en-gb/forex-news/historical-exchange-rates/

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
​
<head>
  <title>d3-ez : Line Chart Example</title>
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <script src="https://raw.githack.com/jamesleesaunders/d3-ez/master/dist/d3-ez.js"></script>
  <link rel="stylesheet" type="text/css" href="https://rawgit.com/jamesleesaunders/d3.ez/master/dist/d3-ez.css" />
</head>
​
<body>
  <div id="chartholder"></div>
  <br/>
  <div>Value: <span id="message"></span></div>
​
  <script type="text/javascript">
​
    dateConvert = function(dateYMD) {
      parser = d3.timeParse('%d-%b-%y');
      var dateISO = parser(dateYMD).toISOString();
      var dateUnix = new Date(dateISO)/1000;
      return dateUnix;
    };
​
    d3.csv("exchange_rates.csv").then(function(csv) {
      // Historical Exchange Rates Source: https://www.ofx.com/en-gb/forex-news/historical-exchange-rates/
​
      var colors = d3.ez.palette.categorical(3);
      var chart = d3.ez.chart.lineChart()
        .colors(colors)
        .yAxisLabel("Rate");
      var legend = d3.ez.component.legend().title("Currency");
      var title = d3.ez.component.title().mainText("Historical Exchange Rates").subText("Comparison against GBP");
​
      // Convert csv to d3-ez data format
      data = [ {key: "USD", values: []}, {key: "EUR", values: []}, {key: "AUD", values: []} ];
      d3.map(csv).values().forEach(function(d) {
        data[0].values.push({key: dateConvert(d.Date), value: d['USD']});
        data[1].values.push({key: dateConvert(d.Date), value: d['EUR']});
        data[2].values.push({key: dateConvert(d.Date), value: d['AUD']});
      });
​
      // Create chart base
      var myChart = d3.ez.base()
        .width(750)
        .height(400)
        .chart(chart)
        .legend(legend)
        .title(title)
        .on("customValueMouseOver", function(d, i) {
          d3.select("#message").text(d.value);
        });
​
      d3.select('#chartholder')
        .datum(data)
        .call(myChart);
    });
​
  </script>
</body>
​
</html>
    