Axis formatting and styling in D3

README.md

A demo of decent-looking axes and axis formatting in D3. SVG also styled to help understand margins.

atlanta-home-prices.tsv

index.html

<style type="text/css">
body {
  font-family: arial;
  width:800px;
  margin:20px auto;
}

svg {
  border:1px dashed #ff00ff;
}

.g-city-line {
  fill:none;
  stroke-width: 2px;
  stroke:orange;
}

/* axis CSS */

.axis line {
  fill: none;
  stroke: #ccc;
  stroke-dasharray: 2px 3px;
  shape-rendering: crispEdges;
  stroke-width: 1px;
}

.axis text {
  font-family: arial, sans-serif;
  font-size: 12px;
  pointer-events: none;
  fill: #777;
}

.axis path {
  display: none;
}

.y.axis line {
}

.y.axis text {
  text-anchor: end !important;
  font-size:12px;
}

.g-baseline line {
  stroke:#000;
  stroke-dasharray:none;

}

</style>

<div class="g-chart">
  <h4>Case-Shiller Home Price Index: Atlanta</h4>
</div>

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script type="text/javascript">

var margin = {top: 10, right: 40, bottom: 40, left: 10};

var width = 800 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom,
    formatYear = d3.time.format("'%y");

var svg = d3.select(".g-chart").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var x = d3.time.scale()
    .range([0, width]);

var y = d3.scale.linear()
    .range([height, 0]);

var line = d3.svg.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.val); });

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .ticks(d3.time.years)
    .tickSize(4)
    .tickPadding(2)
    .tickFormat(formatYear);

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("right")
    .tickSize(-width - margin.left - margin.right)

d3.tsv("atlanta-home-prices.tsv", function(err, data) {

    data.forEach(function(d) {
        d.val = +d.val;
        d.year = +d.year;
        d.month = +d.month;
        d.date = new Date(+d.year, +d.month -1 , 1 );
    });

    x.domain(d3.extent(data, function(d) { return d.date; }))
    y.domain(d3.extent(data, function(d) { return d.val; }))

    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);

    svg.append("g")
        .attr("class", "y axis")
        .attr("transform", "translate(" + (width) + ",0)")
        .call(yAxis)
      .selectAll("g")
        .classed("g-baseline", function(d) { return d == 100 })
      .selectAll("g text")
        .attr("dx", 30);

    svg.append("path")
        .attr("class", "g-city-line")
        .attr("d", line(data) );
});


</script>