Sparkline

by Igor Cuckovic

CSS

body {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.x.axis path {
  display: none;
}

.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
}

.overlay {
  fill: none;
  pointer-events: all;
}

.focus circle {
  fill: none;
  stroke: steelblue;
}

JavaScript

var dataOrig = {"countries":[{"id":"USA","name":"United States"}],"indicators":[{"id":944,"name":"GDP per capita (current US$)","valueType":"value","dataset":"World Development Indicators"}],"data":[{"id":"USA","indicators":[{"id":944,"values":{"1960":3007.12344537861,"1961":3066.56286916615,"1962":3243.84307754988,"1963":3374.51517105082,"1964":3573.94118474743,"1965":3827.52710972039,"1966":4146.31664631665,"1967":4336.42658722171,"1968":4695.92339043178,"1969":5032.14474262003,"1970":5246.88371730098,"1971":5623.44397840712,"1972":6109.92586804894,"1973":6741.33236436395,"1974":7242.44110467889,"1975":7820.06547114686,"1976":8611.40183915426,"1977":9471.3061719314,"1978":10587.2857560033,"1979":11695.5544200307,"1980":12597.6675101771,"1981":13993.166743657,"1982":14438.9762759859,"1983":15561.4263961128,"1984":17134.2860171738,"1985":18269.4221684235,"1986":19115.05290818,"1987":20100.8588916542,"1988":21483.2330602579,"1989":22922.4370895271,"1990":23954.4793548671,"1991":24405.1648147489,"1992":25492.9516517617,"1993":26464.852511744,"1994":27776.635528226,"1995":28782.1750200918,"1996":30068.2309182833,"1997":31572.6902298492,"1998":32949.1977640346,"1999":34620.9288990826,"2000":36449.8551155349,"2001":37273.6181034176,"2002":38166.0378407812,"2003":39677.1983481058,"2004":41921.8097617892,"2005":44307.9205848603,"2006":46437.0671173065,"2007":48061.5376613353,"2008":48401.4273403899,"2009":47001.5553496818,"2010":48374.0564565966,"2011":49781.357490134,"2012":51456.6587280353,"2013":52980.0436263119,"2014":54629.4951678912}}]}]};

var obj = dataOrig.data[0].indicators[0].values;
var data = [];

for (var prop in obj) {
	data.push({"year": prop, "value":obj[prop]})
}

//console.log(data)

var margin = {top: 5, right: 30, bottom: 20, left: 12},
    width = 250 - margin.left - margin.right,
    height = 60 - margin.top - margin.bottom;

var parseDate = d3.time.format("%Y").parse,
    bisectDate = d3.bisector(function(d) { return d.year; }).left,
   ...