Skip to content

Instantly share code, notes, and snippets.

@jamesleesaunders
Last active July 16, 2019 20:11
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jamesleesaunders/0f25b04b9b9080b67714 to your computer and use it in GitHub Desktop.
Save jamesleesaunders/0f25b04b9b9080b67714 to your computer and use it in GitHub Desktop.
d3-ez : Line Chart Example

d3-ez : Line Chart Example

Generated using d3-ez D3 Reusable Chart Library

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

Credit: Data Viz Project

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

Date USD EUR AUD
31-Oct-12 1.607829 1.239305 1.562433
30-Nov-12 1.596271 1.244387 1.535595
31-Dec-12 1.612576 1.230312 1.541986
31-Jan-13 1.598268 1.203192 1.523326
28-Feb-13 1.551687 1.159775 1.503055
31-Mar-13 1.508841 1.163084 1.458799
30-Apr-13 1.530798 1.175817 1.474997
31-May-13 1.530728 1.178857 1.541277
30-Jun-13 1.547105 1.173827 1.63891
31-Jul-13 1.517407 1.160606 1.656895
31-Aug-13 1.549456 1.163038 1.713089
30-Sep-13 1.584574 1.187066 1.711542
31-Oct-13 1.60907 1.179703 1.690689
30-Nov-13 1.609471 1.19294 1.726298
31-Dec-13 1.637163 1.195036 1.822352
31-Jan-14 1.646978 1.208451 1.859235
28-Feb-14 1.655038 1.212685 1.848062
31-Mar-14 1.663331 1.202784 1.833768
30-Apr-14 1.673308 1.212038 1.796454
31-May-14 1.68415 1.225907 1.802354
30-Jun-14 1.690199 1.242863 1.804995
31-Jul-14 1.708261 1.261034 1.818797
31-Aug-14 1.671179 1.253802 1.795182
30-Sep-14 1.630706 1.263506 1.800018
31-Oct-14 1.607207 1.268481 1.83383
30-Nov-14 1.578398 1.265305 1.822588
31-Dec-14 1.563439 1.268995 1.896842
31-Jan-15 1.513694 1.304102 1.873815
28-Feb-15 1.531537 1.349396 1.964456
31-Mar-15 1.498029 1.382945 1.937418
30-Apr-15 1.49353 1.38202 1.93252
31-May-15 1.545864 1.384245 1.960427
30-Jun-15 1.557259 1.387575 2.020047
31-Jul-15 1.555726 1.413337 2.096837
31-Aug-15 1.558645 1.400846 2.132696
30-Sep-15 1.533982 1.364944 2.172054
31-Oct-15 1.532642 1.365074 2.127268
30-Nov-15 1.5194 1.415249 2.127067
31-Dec-15 1.500284 1.377352 2.07052
31-Jan-16 1.441775 1.327742 2.050903
29-Feb-16 1.43164 1.289573 2.009343
31-Mar-16 1.424815 1.281442 1.901495
30-Apr-16 1.429959 1.261071 1.86584
31-May-16 1.452412 1.284507 1.983799
30-Jun-16 1.424158 1.26634 1.926698
31-Jul-16 1.314143 1.188111 1.7457
31-Aug-16 1.308846 1.168286 1.716088
30-Sep-16 1.314477 1.173345 1.736207
31-Oct-16 1.237451 1.121426 1.624764
30-Nov-16 1.245 1.154679 1.65596
31-Dec-16 1.248012 1.184233 1.700894
31-Jan-17 1.234802 1.16172 1.657096
28-Feb-17 1.248411 1.172387 1.628022
31-Mar-17 1.234259 1.154068 1.619599
30-Apr-17 1.264146 1.180432 1.677982
31-May-17 1.292059 1.168267 1.738461
30-Jun-17 1.280023 1.139854 1.694356
31-Jul-17 1.300514 1.128165 1.667769
31-Aug-17 1.295385 1.095556 1.635857
24-Sep-17 1.329049 1.112724 1.661776
<!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="http://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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment