learnd3.com

by Igor Cuckovic

CSS

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

.axis line {
    fill : none;
    stroke: #ccc;
    shape-rendering: crispEdges;
}

JavaScript

// http://learnd3.com/

var data = [50, 125, 75, 150, 42, 157, 33, 92];
var width = 500,
    height = 300,
    margin = 50;

var svg = d3.select("body").append("svg")
    .attr("width", width + margin * 2)
    .attr("height", height + margin * 2)
    .append("g")
    .attr("transform", "translate(" + margin + "," + margin + ")");

var scaleX = d3.scale.linear()
                .domain([0, data.length -1])
                .range([0, width]); 

var x = function (d,i) {return scaleX(i);};

var scaleY = d3.scale.linear()
                //.domain([d3.min(data), d3.max(data)]) //min, max
                .domain(d3.extent(data)) //min, max
                .range([height, 0]); // swwaped so it starts at bottom
//console.log(d3.extent(data));

var y = function (d,i) {return scaleY(d);};

// axis

var xAxis = d3.svg.axis()
    .scale(scaleX)
    .tickSize(-height)
    .orient('bottom');

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


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

svg.append('g')
    .attr('class', 'axis')
    .attr('transform', 'translate(0,0)')
    .call(yAxis);

// main function

function update () {
    var circles = svg.selectAll("circle")
        .data(data)
        .enter()
        .append("circle")
        .attr({
            "fill": "darkred",
            "cx": x,
            "cy": height,
            "r": 0
        })
        .transition()
        .duration(1500)
        .delay(function (d,i) {return i * 200;})
        .attr("cy", y)
        .attr("r", function (d,i) {return Math.sqrt(d);});
    
    var line = d3.svg.line()
        .interpolate("basis")
        .x(x)
        .y(y);
    
    svg.append("path")
        //.datum(data)
        .attr({
            "fill": "none",
            "stroke": "steelblue",
            "stroke-width": 2,
            "d": line(data) // line
        });   
    

};

update();