d3 tutorial

gistfile1.js

// This is code for d3 tutorial at http://ofps.oreilly.com/titles/9781449339739/_drawing_with_data.html
// At some point it turned into completely insane copy-pasting.. please don't try to read this :)
// Do the tutorial yourself instead.

var w = 500;
var h = 300;
var dataset1 = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13, 11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];
var dataset_scatter = [ [ 5, 20 ], [ 480, 90 ], [ 250, 50 ], [ 100, 33 ], [ 330, 95 ], [ 410, 12 ], [ 475, 44 ], [ 25, 67 ], [ 85, 21 ], [ 220, 88 ] ];
var dataset = dataset1;


/////////////////
// CHAPTER 9
/////////////////
var chapter9 = function() {
    var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13, 11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];
    dataset = d3.zip(dataset, d3.range(0, dataset.length)).map(function(entry){ return {key: entry[1], value: entry[0]}});
    var withKey = function(d) { return d.key; };
    var w = 600;
    var h = 250;
    var xScale = d3.scale.ordinal().domain(d3.range(dataset.length)).rangeRoundBands([0, w], 0.05);
    var yScale;
    var recalcYScale = function(){ yScale = d3.scale.linear().domain([0, d3.max(dataset, function(d){ return d.value; })]).range([0, h]); };
    recalcYScale();

    var svg = d3.select("svg");

    var addUpdateLabel = function() {
        var dynamicDelay = function(d, i){ return i / dataset.length * 1000; };

        d3.select("body").selectAll("p").remove();
        d3.select("body").append("p").text("Click on this text to update the chart with new data values (once).").on("click", function() {
            for (var i = 0; i < dataset.length; i++) {
                dataset[i].value = Math.floor(Math.random() * 100);
            }

            recalcYScale();

            var bars = svg.selectAll("rect").data(dataset, withKey);
            bars.transition()
//                .delay(dynamicDelay)
                .duration(500)
//                .ease("linear")
                .attr({
                    y: function(d){ return h - yScale(d.value); },
                    height: function(d){ return yScale(d.value); },
                    fill: function(d){ return "rgb(50,50," + (d.value*10) + ")"; }
                });
            svg.selectAll("text")
                .data(dataset, withKey)
                .transition()
//                .delay(dynamicDelay)
                .duration(500)
                .text(function(d){ return d.value; })
                .attr({
                    x: function(d, i){ return xScale(i) + xScale.rangeBand() / 2; },
                    y: function(d){ return h - yScale(d.value) + 14; }
                });
        });
        d3.select("body").append("p").text("Click on this text to add a new data value to the chart!").on("click", function() {
            dataset.push({key: dataset[dataset.length - 1].key + 1, value: Math.floor(Math.random() * 100)});

            xScale.domain(d3.range(dataset.length));
            recalcYScale();

            var bars = svg.selectAll("rect").data(dataset, withKey);
            bars.enter()
                .append("rect")
                .attr({
                    x: function(d, i){ return w; },
                    y: function(d){ return h - yScale(d.value); },
                    width: xScale.rangeBand(),
                    height: function(d){ return yScale(d.value); },
                    fill: function(d){ return "rgb(50,50," + (d.value*10) + ")"; }
                });
            bars.transition()
                .duration(500)
                .attr({
                    x: function(d, i){ return xScale(i); },
                    y: function(d){ return h - yScale(d.value); },
                    width: xScale.rangeBand(),
                    height: function(d){ return yScale(d.value); },
                    fill: function(d){ return "rgb(50,50," + (d.value*10) + ")"; }
                });
            var labels = svg.selectAll("text").data(dataset, withKey);
            labels.enter()
                .append("text")
                .text(function(d){ return d.value; })
                .attr({
                    x: function(d, i){ return w + xScale.rangeBand() / 2; },
                    y: function(d){ return h - yScale(d.value) + 14; },
                    "font-family": "sans-serif",
                    "font-size": "11px",
                    "text-anchor": "middle",
                    fill: "white"
                });
            labels.transition()
                .duration(500)
                .text(function(d){ return d.value; })
                .attr({
                    x: function(d, i){ return xScale(i) + xScale.rangeBand() / 2; },
                    y: function(d){ return h - yScale(d.value) + 14; }
                });
        });
        d3.select("body").append("p").text("Click on this text to remove a data value from the chart!").on("click", function() {
            dataset.shift();

            xScale.domain(d3.range(dataset.length));
            recalcYScale();

            var bars = svg.selectAll("rect").data(dataset, withKey);
            bars.exit()
                .transition()
                .duration(500)
                .attr({ x: -xScale.rangeBand() })
                .remove();
            bars.transition()
                .duration(500)
                .attr({
                    x: function(d, i){ return xScale(i); },
                    y: function(d){ return h - yScale(d.value); },
                    width: xScale.rangeBand(),
                    height: function(d){ return yScale(d.value); },
                    fill: function(d){ return "rgb(50,50," + (d.value*10) + ")"; }
                });
            var labels = svg.selectAll("text").data(dataset, withKey);
            labels.exit()
                .transition().duration(500)
                .attr("x", -xScale.rangeBand())
                .remove();
            labels.transition()
                .duration(500)
                .text(function(d){ return d.value; })
                .attr({
                    x: function(d, i){ return xScale(i) + xScale.rangeBand() / 2; },
                    y: function(d){ return h - yScale(d.value) + 14; }
                });
        });
    };
    var addRects = function(createRectAttrs) {
        svg.selectAll("rect").data(dataset, withKey).enter().append("rect").attr(createRectAttrs());
    };
    var rectAttrs = function() {
        return {
            x: function(d, i){ return xScale(i); },
            y: function(d){ return h - yScale(d.value); },
            fill: function(d){ return "rgb(50,50," + (d.value*10) + ")"; },
            width: xScale.rangeBand(),
            height: function(d){ return yScale(d.value); }
        };
    };
    var addLabels = function() {
        svg.selectAll("text").data(dataset, withKey).enter().append("text")
            .text(function(d){ return d.value; })
            .attr({
                x: function(d, i){ return xScale(i) + xScale.rangeBand() / 2; },
                y: function(d){ return h - yScale(d.value) + 14; },
                "font-family": "sans-serif",
                "font-size": "11px",
                "text-anchor": "middle",
                fill: "white"
            });
    };
    var clearSvg = function() {
        svg.selectAll("*").remove();
        d3.select("body").select("p").remove();
    };

    clearSvg();
    addUpdateLabel();
    addRects(rectAttrs);
    addLabels();
};

var chapter9_scatterPlot = function() {
    dataset = [];
    var refillDataset = function() {
        dataset = [];
        var xRange = Math.random() * 1000;
        var yRange = Math.random() * 1000;
        for (var i = 0; i < 50; i++) {
            dataset.push([Math.floor(Math.random() * xRange), Math.floor(Math.random() * yRange)]);
        }
    };
    refillDataset();
    var svg = d3.select("svg");

    var padding = 30;
    var xScale = d3.scale.linear().domain([0, d3.max(dataset, function(d){ return d[0]; })]).range([padding, w - padding * 2]);
    var yScale = d3.scale.linear().domain([0, d3.max(dataset, function(d){ return d[1]; })]).range([h - padding, padding]);
    var rScale = d3.scale.linear().domain([0, d3.max(dataset, function(d){ return d[1]; })]).range([5, 10]);
    var xAxis = d3.svg.axis().scale(xScale).orient("bottom").ticks(5);
    var yAxis = d3.svg.axis().scale(yScale).orient("left").ticks(5);

    var addUpdateLabel = function() {
        d3.select("body").append("p").text("Click on this text to update the chart with new data values (once).");
        d3.select("p").on("click", function() {
            refillDataset();
            xScale.domain([0, d3.max(dataset, function(d){ return d[0]; })]);
            yScale.domain([0, d3.max(dataset, function(d){ return d[1]; })]);
            svg.selectAll("circle")
                .data(dataset)
                .transition()
                .duration(500)
                .each("start", function() { d3.select(this).attr("fill", "magenta").attr("r", 3) })
                .attr({
                    cx: function(d){ return xScale(d[0]); },
                    cy: function(d){ return yScale(d[1]); },
                    r: function(d){ return 3; }
                })
                .each("end", function() { d3.select(this).transition().duration(1000).attr("fill", "black").attr("r", 3) });
            svg.select(".x.axis").transition().duration(500).call(xAxis);
            svg.select(".y.axis").transition().duration(500).call(yAxis);
        });
    };

    var showScatterPlot = function() {
        svg.append("clipPath").attr("id", "chart-area")
            .append("rect")
            .attr({
                x: padding, y: padding,
                width: w - padding * 3,
                height: h - padding * 2
            });

        svg.append("g").attr("id", "circles").attr("clip-path", "url(#chart-area)")
            .selectAll("circle")
            .data(dataset)
            .enter()
            .append("circle")
            .attr({
                cx: function(d){ return xScale(d[0]); },
                cy: function(d){ return yScale(d[1]); },
                r: function(d){ return 3; }
            });

        svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + (h - padding) + ")")
            .call(xAxis);
        svg.append("g")
            .attr("class", "y axis")
            .attr("transform", "translate(" + padding + ",0)")
            .call(yAxis);


        d3.select("head").select("style").text("\
        .axis path,\
        .axis line {\
            fill: none;\
            stroke: black;\
            shape-rendering: crispEdges;\
        }\
        .axis text {\
            font-family: sans-serif;\
            font-size: 11px;\
        }");
    };

    var clearSvg = function() {
        svg.selectAll("*").remove();
        d3.select("body").select("p").remove();
    };

    clearSvg();
    addUpdateLabel();
    showScatterPlot();
};


/////////////////
// CHAPTER 8
/////////////////
var showScatterPlot = function() {
    var dataset = [ [ 5, 20 ], [ 480, 90 ], [ 250, 50 ], [ 100, 33 ], [ 330, 95 ], [ 410, 12 ], [ 475, 44 ], [ 25, 67 ], [ 85, 21 ], [ 220, 88 ], [600, 150] ];
    var xRange = Math.random() * 1000;
    var yRange = Math.random() * 1000;
    for (var i = 0; i < 50; i++) {
        var newNumber1 = Math.floor(Math.random() * xRange);
        var newNumber2 = Math.floor(Math.random() * yRange);
        dataset.push([newNumber1, newNumber2]);
    }

    var padding = 30;
    var xScale = d3.scale.linear()
        .domain([0, d3.max(dataset, function(d){ return d[0]; })])
        .range([padding, w - padding * 2]);
    var yScale = d3.scale.linear()
        .domain([0, d3.max(dataset, function(d){ return d[1]; })])
        .range([h - padding, padding]);
    var rScale = d3.scale.linear()
        .domain([0, d3.max(dataset, function(d){ return d[1]; })])
        .range([5, 10]);

    svg.selectAll("circle")
        .data(dataset)
        .enter()
        .append("circle")
        .attr({
            cx: function(d){ return xScale(d[0]); },
            cy: function(d){ return yScale(d[1]); },
            r: function(d){ return rScale(d[1]); }
        });
//    svg.selectAll("text").data(dataset).enter().append("text")
//        .text(function(d){ return d[0] + "," + d[1]; })
//        .attr({
//            x: function(d){ return xScale(d[0]); },
//            y: function(d){ return yScale(d[1]); },
//            "font-family": "sans-serif",
//            "font-size": "11px",
//            fill: "red"
//        });

    var xAxis = d3.svg.axis().scale(xScale).orient("bottom").ticks(5);
    var yAxis = d3.svg.axis().scale(yScale).orient("left").ticks(5);
    svg.append("g")
        .attr("class", "axis")
        .attr("transform", "translate(0," + (h - padding) + ")")
        .call(xAxis);
    svg.append("g")
        .attr("class", "axis")
        .attr("transform", "translate(" + padding + ",0)")
        .call(yAxis);


    d3.select("head").select("style").text("\
        .axis path,\
        .axis line {\
            fill: none;\
            stroke: black;\
            shape-rendering: crispEdges;\
        }\
        .axis text {\
            font-family: sans-serif;\
            font-size: 11px;\
        }");
};



/////////////////
// CHAPTER 7
/////////////////
var showScatterPlot = function() {
    var padding = 20;

    var xScale = d3.scale.linear()
        .domain([0, d3.max(dataset, function(d){ return d[0]; })])
        .range([padding, w - padding * 2]);
    var yScale = d3.scale.linear()
        .domain([0, d3.max(dataset, function(d){ return d[1]; })])
        .range([h - padding, padding]);
    var rScale = d3.scale.linear()
        .domain([0, d3.max(dataset, function(d){ return d[1]; })])
        .range([2, 5]);

    svg.selectAll("circle")
        .data(dataset)
        .enter()
        .append("circle")
        .attr({
            cx: function(d){ return xScale(d[0]); },
            cy: function(d){ return yScale(d[1]); },
            r: function(d){ return rScale(d[1]); }
        });
    svg.selectAll("text").data(dataset).enter().append("text")
        .text(function(d){ return d[0] + "," + d[1]; })
        .attr({
            x: function(d){ return xScale(d[0]); },
            y: function(d){ return yScale(d[1]); },
            "font-family": "sans-serif",
            "font-size": "11px",
            fill: "red"
        });
};


/////////////////
// CHAPTER 6
/////////////////

var addCircles = function() {
    svg.selectAll("circle")
        .data(dataset)
        .enter()
        .append("circle")
        .attr({
            cx: function(d){ return d[0]; },
            cy: function(d){ return d[1]; },
            r: function(d){ return Math.sqrt(h - d[1]); }
        });
    svg.selectAll("text").data(dataset).enter().append("text")
        .text(function(d){ return d[0] + "," + d[1]; })
        .attr({
            x: function(d){ return d[0]; },
            y: function(d){ return d[1]; },
            "font-family": "sans-serif",
            "font-size": "11px",
            fill: "red"
        });
};

var addLabels = function() {
    svg.selectAll("text").data(dataset).enter().append("text")
        .text(function(d){ return d; })
        .attr({
            x: function(d, i){ return i * (w / dataset.length) + ((w / dataset.length - 1) / 2); },
            y: function(d){ return h - (d * 4) + 14; },
            "font-family": "sans-serif",
            "font-size": "11px",
            "text-anchor": "middle",
            fill: "white"
        });
};

var addRects = function(createRectAttrs) {
    svg.selectAll("rect").data(dataset).enter().append("rect").attr(createRectAttrs());
};

var rectAttrs = function() {
    return {
        x: function(d, i){ return i * (w / dataset.length); },
        y: function(d){ return h - (d * 4); },
        width: w / dataset.length - 1,
        height: function(d){ return d * 4; }
    };
};

function redrawSvg() {
    clearSvg();
    addRects(rectAttrs);
    addLabels();
}