Skip to content

Instantly share code, notes, and snippets.

@timelyportfolio

timelyportfolio/Readme.md

Last active December 15, 2015 16:09
Show Gist options
  • Save timelyportfolio/5287484 to your computer and use it in GitHub Desktop.
Save timelyportfolio/5287484 to your computer and use it in GitHub Desktop.
Download ZIP
old price tables in d3 line chart using clickme ractive
Raw
Readme.md

Old Price Tables in d3 multiline chart

======= Create a d3 multiline chart for some old price tables provided in

[Gold and Prices Since 1873]((http://books.google.com/books?id=UFMuAAAAYAAJ&pg=PA12&dq=gold+price+1873&hl=en&sa=X&ei=F9FIUYOyLbWo4AP5-YCoBA&ved=0CDoQ6AEwAA#v=onepage&q=gold%20price%201873&f=false)
by J. Laurence Laughlin
Reprinted from Quarterly Journal of Economics April 1887
The University of Chicago Press 1895

using a clickme ractive. This is the index.html produced. The entire ractive is provided in this Git repo.

Raw
index.html
<!DOCTYPE html>
<head>
<script src="http://d3js.org/d3.v3.min.js"></script>
<link href="original_style.css" rel="stylesheet">
</head>
<body>
<h2> Price Tables from <em> Gold and Prices Since 1873 </em> </h2>
<script>
var margin = { top: 20, right: 20, bottom: 30, left: 50 },
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
d3.selectAll("body").append("svg")
.append("g")
.attr("id", "linechart")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
drawd3line(width, height);
function drawd3line(width, height) {
var svg = d3.selectAll("#linechart");
var parseDate = d3.time.format("%Y-%m-%d").parse,
bisectDate = d3.bisector(function (d) { return d.date; }).left;
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var line = d3.svg.line()
.x(function (d) { return x(d.date); })
.y(function (d) { return y(d.value); });
var color = d3.scale.category20();
data = [{"date":"1850-01-01","indexname":"EconomistTablePercent","value":"100"},
{"date":"1851-01-01","indexname":"EconomistTablePercent","value":"104"},
{"date":"1853-07-01","indexname":"EconomistTablePercent","value":"111"},
{"date":"1857-07-01","indexname":"EconomistTablePercent","value":"136"},
{"date":"1858-01-01","indexname":"EconomistTablePercent","value":"118"},
{"date":"1859-01-01","indexname":"EconomistTablePercent","value":"115"},
{"date":"1860-01-01","indexname":"EconomistTablePercent","value":"122"},
{"date":"1861-01-01","indexname":"EconomistTablePercent","value":"123"},
{"date":"1862-01-01","indexname":"EconomistTablePercent","value":"130"},
{"date":"1863-01-01","indexname":"EconomistTablePercent","value":"158"},
{"date":"1864-01-01","indexname":"EconomistTablePercent","value":"172"},
{"date":"1865-01-01","indexname":"EconomistTablePercent","value":"162"},
{"date":"1866-01-01","indexname":"EconomistTablePercent","value":"161"},
{"date":"1867-01-01","indexname":"EconomistTablePercent","value":"137"},
{"date":"1868-01-01","indexname":"EconomistTablePercent","value":"122"},
{"date":"1869-01-01","indexname":"EconomistTablePercent","value":"121"},
{"date":"1870-01-01","indexname":"EconomistTablePercent","value":"122"},
{"date":"1871-01-01","indexname":"EconomistTablePercent","value":"118"},
{"date":"1872-01-01","indexname":"EconomistTablePercent","value":"129"},
{"date":"1873-01-01","indexname":"EconomistTablePercent","value":"134"},
{"date":"1874-01-01","indexname":"EconomistTablePercent","value":"131"},
{"date":"1875-01-01","indexname":"EconomistTablePercent","value":"126"},
{"date":"1876-01-01","indexname":"EconomistTablePercent","value":"123"},
{"date":"1877-01-01","indexname":"EconomistTablePercent","value":"124"},
{"date":"1878-01-01","indexname":"EconomistTablePercent","value":"115"},
{"date":"1879-01-01","indexname":"EconomistTablePercent","value":"100"},
{"date":"1880-01-01","indexname":"EconomistTablePercent","value":"115"},
{"date":"1881-01-01","indexname":"EconomistTablePercent","value":"108"},
{"date":"1882-01-01","indexname":"EconomistTablePercent","value":"111"},
{"date":"1883-01-01","indexname":"EconomistTablePercent","value":"107"},
{"date":"1883-07-01","indexname":"EconomistTablePercent","value":"101"},
{"date":"1884-01-01","indexname":"EconomistTablePercent","value":"101"},
{"date":"1884-07-01","indexname":"EconomistTablePercent","value":"98"},
{"date":"1885-01-01","indexname":"EconomistTablePercent","value":"95"},
{"date":"1885-07-01","indexname":"EconomistTablePercent","value":"93"},
{"date":"1886-01-01","indexname":"EconomistTablePercent","value":"92"},
{"date":"1851-01-01","indexname":"EconomistTableBourne","value":"103"},
{"date":"1853-07-01","indexname":"EconomistTableBourne","value":"114"},
{"date":"1857-07-01","indexname":"EconomistTableBourne","value":"140"},
{"date":"1858-01-01","indexname":"EconomistTableBourne","value":"123"},
{"date":"1859-01-01","indexname":"EconomistTableBourne","value":"118"},
{"date":"1860-01-01","indexname":"EconomistTableBourne","value":"123"},
{"date":"1861-01-01","indexname":"EconomistTableBourne","value":"124"},
{"date":"1862-01-01","indexname":"EconomistTableBourne","value":"125"},
{"date":"1863-01-01","indexname":"EconomistTableBourne","value":"144"},
{"date":"1864-01-01","indexname":"EconomistTableBourne","value":"151"},
{"date":"1865-01-01","indexname":"EconomistTableBourne","value":"138"},
{"date":"1866-01-01","indexname":"EconomistTableBourne","value":"141"},
{"date":"1867-01-01","indexname":"EconomistTableBourne","value":"128"},
{"date":"1868-01-01","indexname":"EconomistTableBourne","value":"122"},
{"date":"1869-01-01","indexname":"EconomistTableBourne","value":"118"},
{"date":"1870-01-01","indexname":"EconomistTableBourne","value":"119"},
{"date":"1871-01-01","indexname":"EconomistTableBourne","value":"118"},
{"date":"1872-01-01","indexname":"EconomistTableBourne","value":"133"},
{"date":"1873-01-01","indexname":"EconomistTableBourne","value":"142"},
{"date":"1874-01-01","indexname":"EconomistTableBourne","value":"136"},
{"date":"1875-01-01","indexname":"EconomistTableBourne","value":"130"},
{"date":"1876-01-01","indexname":"EconomistTableBourne","value":"123"},
{"date":"1877-01-01","indexname":"EconomistTableBourne","value":"126"},
{"date":"1878-01-01","indexname":"EconomistTableBourne","value":"118"},
{"date":"1879-01-01","indexname":"EconomistTableBourne","value":"106"},
{"date":"1860-01-01","indexname":"BourneTableHome","value":"94"},
{"date":"1861-01-01","indexname":"BourneTableHome","value":"94"},
{"date":"1862-01-01","indexname":"BourneTableHome","value":"95"},
{"date":"1863-01-01","indexname":"BourneTableHome","value":"109"},
{"date":"1864-01-01","indexname":"BourneTableHome","value":"115"},
{"date":"1865-01-01","indexname":"BourneTableHome","value":"105"},
{"date":"1866-01-01","indexname":"BourneTableHome","value":"107"},
{"date":"1867-01-01","indexname":"BourneTableHome","value":"98"},
{"date":"1868-01-01","indexname":"BourneTableHome","value":"93"},
{"date":"1869-01-01","indexname":"BourneTableHome","value":"90"},
{"date":"1870-01-01","indexname":"BourneTableHome","value":"91"},
{"date":"1871-01-01","indexname":"BourneTableHome","value":"90"},
{"date":"1872-01-01","indexname":"BourneTableHome","value":"101"},
{"date":"1873-01-01","indexname":"BourneTableHome","value":"108"},
{"date":"1874-01-01","indexname":"BourneTableHome","value":"103"},
{"date":"1875-01-01","indexname":"BourneTableHome","value":"99"},
{"date":"1876-01-01","indexname":"BourneTableHome","value":"94"},
{"date":"1877-01-01","indexname":"BourneTableHome","value":"96"},
{"date":"1878-01-01","indexname":"BourneTableHome","value":"90"},
{"date":"1879-01-01","indexname":"BourneTableHome","value":"80"},
{"date":"1861-01-01","indexname":"BourneTableWorld","value":"113"},
{"date":"1862-01-01","indexname":"BourneTableWorld","value":"116"},
{"date":"1863-01-01","indexname":"BourneTableWorld","value":"143"},
{"date":"1864-01-01","indexname":"BourneTableWorld","value":"170"},
{"date":"1865-01-01","indexname":"BourneTableWorld","value":"175"},
{"date":"1866-01-01","indexname":"BourneTableWorld","value":"132"},
{"date":"1867-01-01","indexname":"BourneTableWorld","value":"120"},
{"date":"1868-01-01","indexname":"BourneTableWorld","value":"116"},
{"date":"1869-01-01","indexname":"BourneTableWorld","value":"111"},
{"date":"1870-01-01","indexname":"BourneTableWorld","value":"111"},
{"date":"1871-01-01","indexname":"BourneTableWorld","value":"105"},
{"date":"1872-01-01","indexname":"BourneTableWorld","value":"108"},
{"date":"1873-01-01","indexname":"BourneTableWorld","value":"107"},
{"date":"1874-01-01","indexname":"BourneTableWorld","value":"99"},
{"date":"1875-01-01","indexname":"BourneTableWorld","value":"94"},
{"date":"1876-01-01","indexname":"BourneTableWorld","value":"95"},
{"date":"1877-01-01","indexname":"BourneTableWorld","value":"97"},
{"date":"1869-01-01","indexname":"PalgraveTableEconomistPercent","value":"100"},
{"date":"1870-01-01","indexname":"PalgraveTableEconomistPercent","value":"91"},
{"date":"1871-01-01","indexname":"PalgraveTableEconomistPercent","value":"90"},
{"date":"1872-01-01","indexname":"PalgraveTableEconomistPercent","value":"97"},
{"date":"1873-01-01","indexname":"PalgraveTableEconomistPercent","value":"102"},
{"date":"1874-01-01","indexname":"PalgraveTableEconomistPercent","value":"100"},
{"date":"1875-01-01","indexname":"PalgraveTableEconomistPercent","value":"95"},
{"date":"1876-01-01","indexname":"PalgraveTableEconomistPercent","value":"93"},
{"date":"1877-01-01","indexname":"PalgraveTableEconomistPercent","value":"94"},
{"date":"1878-01-01","indexname":"PalgraveTableEconomistPercent","value":"87"},
{"date":"1879-01-01","indexname":"PalgraveTableEconomistPercent","value":"76"},
{"date":"1880-01-01","indexname":"PalgraveTableEconomistPercent","value":"87"},
{"date":"1881-01-01","indexname":"PalgraveTableEconomistPercent","value":"81"},
{"date":"1882-01-01","indexname":"PalgraveTableEconomistPercent","value":"83"},
{"date":"1883-01-01","indexname":"PalgraveTableEconomistPercent","value":"80"},
{"date":"1884-01-01","indexname":"PalgraveTableEconomistPercent","value":"75"},
{"date":"1885-01-01","indexname":"PalgraveTableEconomistPercent","value":"70"},
{"date":"1886-01-01","indexname":"PalgraveTableEconomistPercent","value":"69"},
{"date":"1865-01-01","indexname":"PalgraveTableRelativeImportancePercent","value":"108"},
{"date":"1866-01-01","indexname":"PalgraveTableRelativeImportancePercent","value":"111"},
{"date":"1867-01-01","indexname":"PalgraveTableRelativeImportancePercent","value":"99"},
{"date":"1868-01-01","indexname":"PalgraveTableRelativeImportancePercent","value":"93"},
{"date":"1869-01-01","indexname":"PalgraveTableRelativeImportancePercent","value":"89"},
{"date":"1870-01-01","indexname":"PalgraveTableRelativeImportancePercent","value":"90"},
{"date":"1871-01-01","indexname":"PalgraveTableRelativeImportancePercent","value":"93"},
{"date":"1872-01-01","indexname":"PalgraveTableRelativeImportancePercent","value":"100"},
{"date":"1873-01-01","indexname":"PalgraveTableRelativeImportancePercent","value":"104"},
{"date":"1874-01-01","indexname":"PalgraveTableRelativeImportancePercent","value":"108"},
{"date":"1875-01-01","indexname":"PalgraveTableRelativeImportancePercent","value":"97"},
{"date":"1876-01-01","indexname":"PalgraveTableRelativeImportancePercent","value":"99"},
{"date":"1877-01-01","indexname":"PalgraveTableRelativeImportancePercent","value":"100"},
{"date":"1878-01-01","indexname":"PalgraveTableRelativeImportancePercent","value":"95"},
{"date":"1879-01-01","indexname":"PalgraveTableRelativeImportancePercent","value":"82"},
{"date":"1880-01-01","indexname":"PalgraveTableRelativeImportancePercent","value":"89"},
{"date":"1881-01-01","indexname":"PalgraveTableRelativeImportancePercent","value":"93"},
{"date":"1882-01-01","indexname":"PalgraveTableRelativeImportancePercent","value":"87"},
{"date":"1883-01-01","indexname":"PalgraveTableRelativeImportancePercent","value":"88"},
{"date":"1884-01-01","indexname":"PalgraveTableRelativeImportancePercent","value":"80"},
{"date":"1885-01-01","indexname":"PalgraveTableRelativeImportancePercent","value":"76"},
{"date":"1850-01-01","indexname":"BurchardsUSTable","value":"102.6"},
{"date":"1851-01-01","indexname":"BurchardsUSTable","value":"103.1"},
{"date":"1852-01-01","indexname":"BurchardsUSTable","value":"106.1"},
{"date":"1853-01-01","indexname":"BurchardsUSTable","value":"114.8"},
{"date":"1854-01-01","indexname":"BurchardsUSTable","value":"123.5"},
{"date":"1855-01-01","indexname":"BurchardsUSTable","value":"128.3"},
{"date":"1856-01-01","indexname":"BurchardsUSTable","value":"129.6"},
{"date":"1857-01-01","indexname":"BurchardsUSTable","value":"138.3"},
{"date":"1858-01-01","indexname":"BurchardsUSTable","value":"115.1"},
{"date":"1859-01-01","indexname":"BurchardsUSTable","value":"116.1"},
{"date":"1860-01-01","indexname":"BurchardsUSTable","value":"115.8"},
{"date":"1861-01-01","indexname":"BurchardsUSTable","value":"113.1"},
{"date":"1862-01-01","indexname":"BurchardsUSTable","value":"128.8"},
{"date":"1863-01-01","indexname":"BurchardsUSTable","value":"137.8"},
{"date":"1864-01-01","indexname":"BurchardsUSTable","value":"127"},
{"date":"1865-01-01","indexname":"BurchardsUSTable","value":"142"},
{"date":"1866-01-01","indexname":"BurchardsUSTable","value":"137.5"},
{"date":"1867-01-01","indexname":"BurchardsUSTable","value":"130.5"},
{"date":"1868-01-01","indexname":"BurchardsUSTable","value":"124.2"},
{"date":"1869-01-01","indexname":"BurchardsUSTable","value":"124.9"},
{"date":"1870-01-01","indexname":"BurchardsUSTable","value":"136.5"},
{"date":"1871-01-01","indexname":"BurchardsUSTable","value":"124.8"},
{"date":"1872-01-01","indexname":"BurchardsUSTable","value":"130"},
{"date":"1873-01-01","indexname":"BurchardsUSTable","value":"124.1"},
{"date":"1874-01-01","indexname":"BurchardsUSTable","value":"123.3"},
{"date":"1875-01-01","indexname":"BurchardsUSTable","value":"113.5"},
{"date":"1876-01-01","indexname":"BurchardsUSTable","value":"108.9"},
{"date":"1877-01-01","indexname":"BurchardsUSTable","value":"113.2"},
{"date":"1878-01-01","indexname":"BurchardsUSTable","value":"101.6"},
{"date":"1879-01-01","indexname":"BurchardsUSTable","value":"109.1"},
{"date":"1880-01-01","indexname":"BurchardsUSTable","value":"104.3"},
{"date":"1881-01-01","indexname":"BurchardsUSTable","value":"118.4"},
{"date":"1882-01-01","indexname":"BurchardsUSTable","value":"119.1"},
{"date":"1883-01-01","indexname":"BurchardsUSTable","value":"115.6"},
{"date":"1884-01-01","indexname":"BurchardsUSTable","value":"105.3"},
{"date":"1850-01-01","indexname":"SauerbeckTable","value":"100"},
{"date":"1851-01-01","indexname":"SauerbeckTable","value":"97.4025974025974"},
{"date":"1852-01-01","indexname":"SauerbeckTable","value":"101.298701298701"},
{"date":"1853-01-01","indexname":"SauerbeckTable","value":"123.376623376623"},
{"date":"1854-01-01","indexname":"SauerbeckTable","value":"132.467532467532"},
{"date":"1855-01-01","indexname":"SauerbeckTable","value":"131.168831168831"},
{"date":"1856-01-01","indexname":"SauerbeckTable","value":"131.168831168831"},
{"date":"1857-01-01","indexname":"SauerbeckTable","value":"136.363636363636"},
{"date":"1858-01-01","indexname":"SauerbeckTable","value":"118.181818181818"},
{"date":"1859-01-01","indexname":"SauerbeckTable","value":"122.077922077922"},
{"date":"1860-01-01","indexname":"SauerbeckTable","value":"128.571428571429"},
{"date":"1861-01-01","indexname":"SauerbeckTable","value":"127.272727272727"},
{"date":"1862-01-01","indexname":"SauerbeckTable","value":"131.168831168831"},
{"date":"1863-01-01","indexname":"SauerbeckTable","value":"133.766233766234"},
{"date":"1864-01-01","indexname":"SauerbeckTable","value":"136.363636363636"},
{"date":"1865-01-01","indexname":"SauerbeckTable","value":"131.168831168831"},
{"date":"1866-01-01","indexname":"SauerbeckTable","value":"132.467532467532"},
{"date":"1867-01-01","indexname":"SauerbeckTable","value":"129.87012987013"},
{"date":"1868-01-01","indexname":"SauerbeckTable","value":"128.571428571429"},
{"date":"1869-01-01","indexname":"SauerbeckTable","value":"127.272727272727"},
{"date":"1870-01-01","indexname":"SauerbeckTable","value":"124.675324675325"},
{"date":"1871-01-01","indexname":"SauerbeckTable","value":"129.87012987013"},
{"date":"1872-01-01","indexname":"SauerbeckTable","value":"141.558441558442"},
{"date":"1873-01-01","indexname":"SauerbeckTable","value":"144.155844155844"},
{"date":"1874-01-01","indexname":"SauerbeckTable","value":"145.454545454545"},
{"date":"1875-01-01","indexname":"SauerbeckTable","value":"124.675324675325"},
{"date":"1876-01-01","indexname":"SauerbeckTable","value":"123.376623376623"},
{"date":"1877-01-01","indexname":"SauerbeckTable","value":"122.077922077922"},
{"date":"1878-01-01","indexname":"SauerbeckTable","value":"112.987012987013"},
{"date":"1879-01-01","indexname":"SauerbeckTable","value":"107.792207792208"},
{"date":"1880-01-01","indexname":"SauerbeckTable","value":"114.285714285714"},
{"date":"1881-01-01","indexname":"SauerbeckTable","value":"110.38961038961"},
{"date":"1882-01-01","indexname":"SauerbeckTable","value":"109.090909090909"},
{"date":"1883-01-01","indexname":"SauerbeckTable","value":"106.493506493506"},
{"date":"1884-01-01","indexname":"SauerbeckTable","value":"98.7012987012987"},
{"date":"1885-01-01","indexname":"SauerbeckTable","value":"93.5064935064935"},
{"date":"1850-01-01","indexname":"SoetbeerGermanTable","value":"100"},
{"date":"1851-01-01","indexname":"SoetbeerGermanTable","value":"100.21"},
{"date":"1852-01-01","indexname":"SoetbeerGermanTable","value":"101.69"},
{"date":"1853-01-01","indexname":"SoetbeerGermanTable","value":"113.69"},
{"date":"1854-01-01","indexname":"SoetbeerGermanTable","value":"121.25"},
{"date":"1855-01-01","indexname":"SoetbeerGermanTable","value":"124.23"},
{"date":"1856-01-01","indexname":"SoetbeerGermanTable","value":"123.27"},
{"date":"1857-01-01","indexname":"SoetbeerGermanTable","value":"130.11"},
{"date":"1858-01-01","indexname":"SoetbeerGermanTable","value":"113.52"},
{"date":"1859-01-01","indexname":"SoetbeerGermanTable","value":"116.34"},
{"date":"1860-01-01","indexname":"SoetbeerGermanTable","value":"120.98"},
{"date":"1861-01-01","indexname":"SoetbeerGermanTable","value":"118.1"},
{"date":"1862-01-01","indexname":"SoetbeerGermanTable","value":"122.65"},
{"date":"1863-01-01","indexname":"SoetbeerGermanTable","value":"125.49"},
{"date":"1864-01-01","indexname":"SoetbeerGermanTable","value":"129.28"},
{"date":"1865-01-01","indexname":"SoetbeerGermanTable","value":"122.63"},
{"date":"1866-01-01","indexname":"SoetbeerGermanTable","value":"125.85"},
{"date":"1867-01-01","indexname":"SoetbeerGermanTable","value":"124.44"},
{"date":"1868-01-01","indexname":"SoetbeerGermanTable","value":"121.99"},
{"date":"1869-01-01","indexname":"SoetbeerGermanTable","value":"123.38"},
{"date":"1870-01-01","indexname":"SoetbeerGermanTable","value":"122.87"},
{"date":"1871-01-01","indexname":"SoetbeerGermanTable","value":"127.03"},
{"date":"1872-01-01","indexname":"SoetbeerGermanTable","value":"135.62"},
{"date":"1873-01-01","indexname":"SoetbeerGermanTable","value":"138.28"},
{"date":"1874-01-01","indexname":"SoetbeerGermanTable","value":"136.2"},
{"date":"1875-01-01","indexname":"SoetbeerGermanTable","value":"129.85"},
{"date":"1876-01-01","indexname":"SoetbeerGermanTable","value":"128.33"},
{"date":"1877-01-01","indexname":"SoetbeerGermanTable","value":"127.7"},
{"date":"1878-01-01","indexname":"SoetbeerGermanTable","value":"120.6"},
{"date":"1879-01-01","indexname":"SoetbeerGermanTable","value":"117.1"},
{"date":"1880-01-01","indexname":"SoetbeerGermanTable","value":"121.89"},
{"date":"1881-01-01","indexname":"SoetbeerGermanTable","value":"121.07"},
{"date":"1882-01-01","indexname":"SoetbeerGermanTable","value":"122.14"},
{"date":"1883-01-01","indexname":"SoetbeerGermanTable","value":"122.24"},
{"date":"1884-01-01","indexname":"SoetbeerGermanTable","value":"114.25"},
{"date":"1885-01-01","indexname":"SoetbeerGermanTable","value":"108.72"},
{"date":"1865-01-01","indexname":"PalgraveFranceSpliced","value":"127.308"},
{"date":"1866-01-01","indexname":"PalgraveFranceSpliced","value":"129.78"},
{"date":"1867-01-01","indexname":"PalgraveFranceSpliced","value":"123.6"},
{"date":"1868-01-01","indexname":"PalgraveFranceSpliced","value":"119.892"},
{"date":"1869-01-01","indexname":"PalgraveFranceSpliced","value":"117.42"},
{"date":"1870-01-01","indexname":"PalgraveFranceSpliced","value":"119.892"},
{"date":"1871-01-01","indexname":"PalgraveFranceSpliced","value":"128.544"},
{"date":"1872-01-01","indexname":"PalgraveFranceSpliced","value":"137.196"},
{"date":"1873-01-01","indexname":"PalgraveFranceSpliced","value":"135.96"},
{"date":"1874-01-01","indexname":"PalgraveFranceSpliced","value":"124.836"},
{"date":"1875-01-01","indexname":"PalgraveFranceSpliced","value":"126.072"},
{"date":"1876-01-01","indexname":"PalgraveFranceSpliced","value":"123.6"},
{"date":"1877-01-01","indexname":"PalgraveFranceSpliced","value":"126.072"},
{"date":"1878-01-01","indexname":"PalgraveFranceSpliced","value":"110.004"},
{"date":"1879-01-01","indexname":"PalgraveFranceSpliced","value":"106.296"},
{"date":"1880-01-01","indexname":"PalgraveFranceSpliced","value":"108.768"},
{"date":"1881-01-01","indexname":"PalgraveFranceSpliced","value":"105.06"},
{"date":"1882-01-01","indexname":"PalgraveFranceSpliced","value":"103.824"},
{"date":"1883-01-01","indexname":"PalgraveFranceSpliced","value":"101.352"},
{"date":"1884-01-01","indexname":"PalgraveFranceSpliced","value":"93.936"}]
data.forEach(function (d) {
d.date = parseDate(d.date);
d.value = +d.value;
});
//get the names of indexes since we will use later for the focus dots
var indexkeys = d3.keys(d3.nest().key(function (d) { return d.indexname; }).map(data))
indexdata = d3.nest().key(function(d) {return d.indexname;}).entries(data);
x.domain(d3.extent(data, function (d) { return d.date; }));
y.domain(d3.extent(data, function (d) { return d.value; }));
//moved the x axis to after drawing of lines
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Price");
var indexGroup = svg.selectAll(".indexname")
.data(indexdata)
.enter().append("g")
.attr("class", "indexname")
.attr("id", function (d) { return d.key });
indexGroup.append("path")
.attr("class", "line")
.attr("d", function (d) { return line(d.values); })
.attr("stroke", function (d) { return color(d.key); });
//original ugly way of doing it until I found Mike Bostock's example
// var nodes = indexGroup.selectAll()
// .data(function (d) { return d.values; })
// .enter().append("g")
// .attr("class", "points")
// .attr("transform", function (d) { return "translate(" + x(d.date) + "," + y(d.value) + ")"; });
//nodes.append('circle')
// .attr("r", 10)
// .attr("fill", function (d) { return color(d.indexname); })
// nodes.append('text')
// .attr("text-anchor", "middle")
// .attr("dx", 12)
// .attr("dy", "-.35em")
// .text(function (d) { return d.indexname + "\n " + Math.round(d.value * 100) / 100; })
// .attr("fill", "gray");
//moved x axis to here so will show on top
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + ( Boolean(100) ? y( 100 ): height ) + ")") //allow x axis location to be set by ractive parameter
.call(xAxis);
var focus = svg.selectAll(".focus")
.data(indexkeys).enter().append("g")
.attr("class", "focus")
.attr("id", function (d) { return "focus-" + d; })
.style("display", "none");
focus.append("circle")
.attr("r", 4.5);
focus.append("text")
.attr("x", 9)
.attr("dy", ".35em");
svg.append("rect")
.attr("class", "overlay")
.attr("width", width)
.attr("height", height)
.on("mouseover", function () { focus.style("display", null); })
.on("mouseout", function () { focus.style("display", "none"); })
.on("mousemove", mousemove);
function mousemove() {
var x0 = x.invert(d3.mouse(this)[0]);
indexkeys.forEach(function (indexname, i1) {
var i = bisectDate(indexdata[i1].values, x0, 1),
d0 = indexdata[i1].values[i - 1],
d1 = indexdata[i1].values[i];
var d;
if(Boolean(d1)) {d = x0 - d0.date > d1.date - x0 ? d1 : d0} else {d = d0};
d3.select("#focus-" + indexname)
.attr("transform", "translate(" + x(d.date) + "," + y(d.value) + ")")
.attr("fill", color(indexname));
d3.select("#focus-" + indexname).select("text").text(indexname + " " + Math.round(d.value*100)/100).attr("fill", color(indexname));
});
}
}
</script>
</body>
</html>
Raw
original_style.css
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.line {
fill: none;
stroke-width: 5px;
}
/*ugly way before I found Mike Bostock's example
.points {opacity: 0;}
.points:hover {opacity: 1;}*/
.overlay {
fill: none;
pointer-events: all;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment