D3 Examples - Axis Styles via JavaScript

Axis Styles via JavaScript

This is a scatter plot of the Iris data set.

The purpose of this example is to show how to dynamically style D3 axes through JavaScript. This is a first step toward interactively configurable axis styles, and paves the way for creating fully stylized visualization modules that are purely JavaScript and require no addition of CSS tags on the page that will contain the visualization.

The code for this is derived from example 106 of the screencast Introduction to D3.js.

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>D3 Example</title>
    <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  </head>
  <body>
    <script>
​
      // Set up the Font by appending a link tag.
      d3.select("head").append("link")
        .attr("href", "https://fonts.googleapis.com/css?family=Poiret+One")
        .attr("rel", "stylesheet")
        .attr("type", "text/css");
​
      // Here's how to apply dynamic CSS to axes through JavaScript.
      function applyAxisStyles(){
​
        // Style tick mark labels.
        d3.selectAll(".axis text")
          .style("font-family", "'Poiret One', cursive")
          .style("font-size", "16pt");
​
        // Style the axis labels.
        d3.selectAll(".axis .label")
          .style("font-size", "32pt");
​
        // Style the lines of the axis.
        d3.selectAll(".axis path, .axis line")
          .style("fill", "none")
          .style("stroke", "black")
          .style("shape-rendering", "crispEdges");
      }
​
      var outerWidth = 960;
      var outerHeight = 500;
      var margin = { left: 80, top: 10, right: 15, bottom: 80 };
      var rMin = 2; // "r" stands for radius
      var rMax = 15;
      var xColumn = "sepal_length";
      var yColumn = "petal_length";
      var rColumn = "sepal_width";
      var colorColumn = "species";
​
      var xAxisLabelText = "Sepal Length (cm)";
      var xAxisLabelOffset = 65;
​
      var yAxisLabelText = "Petal Length (cm)";
      var yAxisLabelOffset = 35;
​
      var innerWidth  = outerWidth  - margin.left - margin.right;
      var innerHeight = outerHeight - margin.top  - margin.bottom;
​
      var svg = d3.select("body").append("svg")
        .attr("width", outerWidth)
        .attr("height", outerHeight);
      var g = svg.append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
      var xAxisG = g.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + innerHeight + ")")
      var xAxisLabel = xAxisG.append("text")
        .style("text-anchor", "middle")
        .attr("x", innerWidth / 2)
        .attr("y", xAxisLabelOffset)
        .attr("class", "label")
        .text(xAxisLabelText);
      var yAxisG = g.append("g")
        .attr("class", "y axis");
      var yAxisLabel = yAxisG.append("text")
        .style("text-anchor", "middle")
        .attr("transform", "translate(-" + yAxisLabelOffset + "," + (innerHeight / 2) + ") rotate(-90)")
        .attr("class", "label")
        .text(yAxisLabelText);
​
      var xScale = d3.scale.linear().range([0, innerWidth]);
      var yScale = d3.scale.linear().range([innerHeight, 0]);
      var rScale = d3.scale.linear().range([rMin, rMax]);
      var colorScale = d3.scale.category10();
​
      var xAxis = d3.svg.axis().scale(xScale).orient("bottom")
        .ticks(10)
        .tickFormat(d3.format("s"))
        .outerTickSize(0);
      var yAxis = d3.svg.axis().scale(yScale).orient("left")
        .ticks(5)
        .tickFormat(d3.format("s"))
        .outerTickSize(0);
​
      function render(data){
        xScale.domain(d3.extent(data, function (d){ return d[xColumn]; }));
        yScale.domain(d3.extent(data, function (d){ return d[yColumn]; }));
        rScale.domain(d3.extent(data, function (d){ return d[rColumn]; }));
​
        xAxisG.call(xAxis);
        yAxisG.call(yAxis);
        applyAxisStyles();
​
        var circles = g.selectAll("circle").data(data);
        circles.enter().append("circle");
        circles
          .attr("cx",   function (d){ return     xScale(d[xColumn]);     })
          .attr("cy",   function (d){ return     yScale(d[yColumn]);     })
          .attr("r",    function (d){ return     rScale(d[rColumn]);     })
          .attr("fill", function (d){ return colorScale(d[colorColumn]); });
​
        circles.exit().remove();
      }
​
      function type(d){
        d.sepal_length = +d.sepal_length;
        d.sepal_width  = +d.sepal_width;
        d.petal_length = +d.petal_length;
        d.petal_width  = +d.petal_width;
        return d;
      }
​
      d3.csv("iris.csv", type, render);
​
    </script>
  </body>
</html>
​
    