Reading Notes for D3.js Part IV (Chapter 8)

This post is transferred from my old Hexo blog site, created on 2014.

This is a Reading Note for Interactive Data Visualization for the Web - An Introduction to Designing with D3 by Scott Murray, pulished by O'Reilly, 2013

This post will contains concepts that I think it's important for me to be familiar with in D3 book.

Chapter 8 : Axes

code example for this chapter is here. This part involves lots of code practice.

The axes in D3 are functions with parameters. Differnt from scale, axes function will not return anything. Instead, it will geneate elements such as axes line, axes tags, etc.

Note: Axes function only apply to SVG

Using d3.svg.axis(scale) to set up axis with certain scale.

Using axis.orient('bottom/top/left/right') to set up location of tags in axis.

Using svg.append('g').call(axis) to append axis to svg. g means a group element. This group element includes path,line and text elements for axis.

You can give style to axis, using css. By using .attr('class','class_name'), you can assign class to g group, then set style in style sheet using .class_name line{} or .class_name text(). path and line can share same rule in stylesheet.

Note: you should use svg attributes in style sheet, instead of css attributes

shape-rendering style make sure the number of tags in axis is as clear as pixels.

You can move axis to bottom/left/right using transform attribute and translate() function. For example:

//...
    .attr('transform','translate(0,10)')
    //move axis down in 10. Note positive y means going down

    .attr('transform','translate(10,0)')
    //move axis right in 10. This usually apply to y-axis.

.ticks(number) is to set how many axis tags you want. This is just a suggestion, D3 will automatically adjust to it.

d3.format() can set up a format. For example, d3.format('.1%'') means make a number to keep one decimal point, then add '%' after it. Then you can use axis.tickFormat(d3.format('.1%'')) to make this apply to axis tags, if you want.

Code Example for this Chapter You can check result of code here

<!--style after adding axis-->
<style type="text/css">
        .axis path,
        .axis line {
          fill: none;
          stroke: green;
          shape-rendering: crispEdges;
        }

        .axis text{
            font-size: 10px;
        }
</style>

<script type="text/javascript">


    //set up SVG
    var h = 400;
    var padding = 5;

    //set up random data set
    var dataset = [];
    var numOfPoint = 6; //we want 10 point
    var xRange = Math.random() * 100;
    var yRange = Math.random() * 100;
    for(var count=0; count<numOfPoint; count++){
        var newx = Math.floor(Math.random() * xRange);
        var newy = Math.floor(Math.random() * yRange);
        dataset.push([newx,newy]); //Add array to empty array
    }

    var svg = d3.select(document.getElementById('chapter8').getElementsByClassName('1')[0])
                .append('svg')
                .attr('width', '100%') //This can make svg take full width of div
                .attr('height','400');

    var w = document.getElementsByTagName('svg')[0].offsetWidth; //get width of svg, assign it to w variable

    //set up scatter plot
    var circle = svg.selectAll('circle')
                .data(dataset)
                .enter()
                .append('circle');

    var xScale = d3.scale.linear()
                    .domain([0, d3.max(dataset,function(d){ return d[0]; }) + padding]) //add extra padding to make sure leftest circle not be cut through middle
                    .range([0, w-padding*3]);
    var yScale = d3.scale.linear()
                    .domain([0, d3.max(dataset, function(d){return d[1]; })+padding])
                    .range([h-padding*3,0]);
    var rScale = d3.scale.linear()
                    .domain([0, d3.max(dataset, function(d){ return d[1]; })])
                    .range([5,15]);

    circle.attr('cx',function(d){
        return xScale(d[0]);
    }).attr('cy',function(d){
        return yScale(d[1]);
    }).attr('r',function(d){
        return rScale(d[1]);
    }).attr('fill','pink');

    //set up tag for scatter plot
    var text = svg.selectAll('text')
                    .data(dataset)
                    .enter()
                    .append('text');
    text.text(function(d){
        return d[0] + ',' + d[1];
    });
    text.attr('x',function(d){
        return xScale(d[0]);
    }).attr('y',function(d){
        return yScale(d[1]);
    });

    //Add line betwen these points
    var lineFunction = d3.svg.line()
                        .x(function(d) { return xScale(d[0]); })
                        .y(function(d) { return yScale(d[1]); })
                        .interpolate("linear");
    svg.append('path').attr('d',lineFunction(dataset))
                    .attr('stroke','blue')
                    .attr('stroke-width','1')
                    .attr('fill','none');

    //set up axis
    var xAxis = d3.svg.axis()
                    .scale(xScale) //use scale
                    .orient('bottom') //make axis at bottom
                    .ticks(5);//make only 5 tags for axis
    var yAxis = d3.svg.axis()
                    .scale(yScale)
                    .orient('right') //make axis on left
                    .ticks(7);//make only 7 tags for axis

    //Append axis to svg
    svg.append('g')
        .attr('class','axis')
        .attr('transform','translate(0,'+(h-padding*4) + ')') //make x axis move down, with the distance of h-padding*2
        .call(xAxis); //add axis
    svg.append('g')
        .attr('class','axis')
        .attr('transform','translate(' + padding*4 + ',0)') //make y axis move right, with the distance of padding
        .call(yAxis);

</script>