D3 Examples - Sparkline

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <script src="d3-jetpack.js"></script>
  <style>
    body { margin:20px;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width:100%; height: 100% }
  </style>
</head>
​
<body>
  <script>
    var dataset = [
  {
    "Month": 1,
    "Tweets": 461
  },
  {
    "Month": 2,
    "Tweets": 389
  },
  {
    "Month": 3,
    "Tweets": 535
  },
  {
    "Month": 4,
    "Tweets": 515
  },
  {
    "Month": 5,
    "Tweets": 379
  },
  {
    "Month": 6,
    "Tweets": 338
  },
  {
    "Month": 7,
    "Tweets": 384
  },
  {
    "Month": 8,
    "Tweets": 400
  },
  {
    "Month": 9,
    "Tweets": 455
  },
  {
    "Month": 10,
    "Tweets": 327
  },
  {
    "Month": 11,
    "Tweets": 418
  },
  {
    "Month": 12,
    "Tweets": 374
  }
];
​
​
​
var width = 200,
    height = 40;
​
//Add a quarter-year property to each object in the dataset
for (var i in dataset) {
    dataset[i].Month = dataset[i].Month + "/2015";
}
​
//Append an SVG to the document body
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
  .append("g");
​
var x = d3.scale.ordinal()
    .domain(dataset.map(function(d) { return d.Month; }))
    .rangeRoundBands([0, width], .04);
​
var y = d3.scale.linear()
    .domain([0, d3.max(dataset, function(d) { return d.Tweets; })])
    .range([height, 0]);
​
//Draw the line graph
var line = d3.svg.line()
    .interpolate("basis")
    .x(function(d) { return x(d.Month); })
    .y(function(d) { return y(d.Tweets); })
​
//Append a path to the SVG
svg.append("path")
    .attr("d", line(dataset))
    .attr("class", "linePath")
    .attr("fill", "none")
    .attr("stroke", "#000000")
    .attr("stroke-width", 1.5);
​
  </script>
</body>
​
    