JSFiddle - React, Tailwind, and code Playground

by jeffxiao

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.7/d3.js"></script>
<a href='http://bl.ocks.org/phoebebright/3061203'>reference 1;</a>
<a href="http://stackoverflow.com/questions/26652925">reference 2;</a>

CSS

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

.axis text {
  font-family: sans-serif;
  font-size: 11px;

JavaScript

var width = 700, // width of svg
  height = 400, // height of svg
  padding = 100; // space around the chart, not including labels

var data = [{
  "date": new Date(2012, 0, 1),
  "value": 3
}, {
  "date": new Date(2012, 0, 3),
  "value": 2
}, {
  "date": new Date(2012, 0, 12),
  "value": 33
}, {
  "date": new Date(2012, 0, 21),
  "value": 13
}];

/* get
y_domain: Array[2]
    0: 2
    1: 33
x_domain: Array[2]
    0: Sun Jan 01 2012 00:00:00 GMT+0000 (GMT)
    1: Mon Jan 30 2012 00:00:00 GMT+0000 (GMT)
*/

// create an svg container
var vis = d3.select("body").
append("svg:svg")
  .attr("width", width)
  .attr("height", height);

var x_domain = d3.extent(data, function(d) {
  return d.date;
});
debugger;
var xScale = d3.time.scale()
  .domain(x_domain) // values between for month of january
  .range([100, 600]); // map these sides of the chart, in this case 100 and 600

// display date format
var date_format = d3.time.format("%m/%d");
// define the x axis
var xAxis = d3.svg.axis()
  .orient("bottom")
  .scale(xScale)
  .tickFormat(date_format);


// draw x axis with labels and move to the bottom of the chart area
vis.append("g")
  .attr("class", "xaxis axis") // two classes, one for css formatting, one for selection below
  .attr("transform", "translate(0," + (height - padding) + ")")
  .call(xAxis);