D3.js Voronoi Line Selection

README.md

...

chart.js

function lineChart() {

    var margin = {top: 30, right: 300, bottom: 30, left: 30},
        width = 1024,
        height = 480,
        xValue = function (d) {
            return d[0];
        },
        yValue = function (d) {
            return d[1];
        },
        labels = function (d) {
            return d[2];
        },
        tag = function (d, i) {
            return "tag_" + i;
        },
        xScale = d3.time.scale(),
        yScale = d3.scale.linear(),
        line = d3.svg.line().x(X).y(Y),
        xAxis = d3.svg.axis().scale(xScale).orient("bottom").tickSize(6, 0),
        yAxis = d3.svg.axis().scale(yScale).orient("left").tickSize(6, 0);

    function chart(selection) {
        selection.each(function (data) {

            // Convert data to standard representation greedily;
            // this is needed for non-deterministic accessors.
            data = data.map(function (d, i) {
                var x = xValue.call(data, d, i);
                var y = yValue.call(data, d, i);
                return {
                    label: labels.call(data, d, i),
                    data: x.map(function (d, i) {
                        return [x[i], y[i]];
                    })
                };
            });

            // Concatenate x and y values (for scale definition).
            var x = data.reduce(function (prev, cur, i, d) {
                return prev.concat(cur.data.map(function (d) {
                    return d[0];
                }))
            }, []);
            var y = data.reduce(function (prev, cur, i, d) {
                return prev.concat(cur.data.map(function (d) {
                    return d[1];
                }))
            }, []);

            // Update the x-scale.
            xScale
                .domain(d3.extent(x))
                .range([0, width - margin.left - margin.right]);

            // Update the y-scale.
            yScale
                .domain([0, d3.max(y)])
                .range([height - margin.top - margin.bottom, 0]);

            // Select the svg element, if it exists.
            var svg = d3.select(this).selectAll("svg").data([1]);

            // Otherwise, create the skeletal chart.
            var gEnter = svg.enter().append("svg").append("g");
            gEnter.append("g").attr("class", "x axis");
            gEnter.append("g").attr("class", "y axis");

            // Update the outer dimensions.
            svg.attr("width", width)
                .attr("height", height);

            // Update the inner dimensions.
            var g = svg.select("g")
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

            // Plot lines (base).
            g.selectAll("path.results")
                .data(data.map(function (d) {

                    return d.data;
                }))
                .enter()
                .append("svg:path")
                .attr("d", line);

            // Replot lines (highlighted; in front of base).
            g.selectAll("path.results")
                .data(data.map(function (d) {

                    return d.data;
                }))
                .enter()
                .append("svg:path")
                .attr("class", "highlight")
                .attr("id", tag)
                .attr("d", line)
                .style("opacity", 0.0)
                .on("mouseover", function (d, i) {

                    d3.selectAll("#" + tag(d, i)).style("opacity", 1.0);
                })
                .on("mouseout", function (d, i) {

                    d3.selectAll("#" + tag(d, i)).style("opacity", 0.0);
                });

            // Plot labels.
            g.selectAll("text.label.yaxis")
                .data(data)
                .enter()
                .append("svg:text")
                .attr("class", "label yaxis")
                .attr("id", tag)
                .attr("text-anchor", "start")
                .style("opacity", 0.0)
                .attr("dx", "1.0em")
                .attr("dy", "0.3em")
                .attr("x", xScale.range()[1])
                .attr("y", function (d) {

                    var last = d.data.length - 1;
                    return last < 0 ? yScale.range[0] : Y(d.data[last]);
                })
                .text(function (d) {

                    return d.label;
                });

            // Update the x-axis.
            g.select(".x.axis")
                .attr("transform", "translate(0," + yScale.range()[0] + ")")
                .call(xAxis);

            // Update the y-axis.
            g.select(".y.axis")
                .attr("transform", "translate(" + xScale.range()[0] + ",0)")
                .call(yAxis);
        });
    }

    // The x-accessor for the path generator; xScale ∘ xValue.
    function X(d) {
        return xScale(d[0]);
    }

    // The x-accessor for the path generator; yScale ∘ yValue.
    function Y(d) {
        return yScale(d[1]);
    }

    chart.margin = function (_) {
        if (!arguments.length) return margin;
        margin = _;
        return chart;
    };

    chart.width = function (_) {
        if (!arguments.length) return width;
        width = _;
        return chart;
    };

    chart.height = function (_) {
        if (!arguments.length) return height;
        height = _;
        return chart;
    };

    chart.x = function (_) {
        if (!arguments.length) return xValue;
        xValue = _;
        return chart;
    };

    chart.y = function (_) {
        if (!arguments.length) return yValue;
        yValue = _;
        return chart;
    };

    chart.labels = function (_) {
        if (!arguments.length) return labels;
        labels = _;
        return chart;
    };

    return chart;
}

// Transform the raw data.
//
function transformData(data) {

    // Year format.
    var format = d3.time.format("%Y");

    // Parse raw data -> x[].
    var x = [];
    data.forEach(function (d) {

        // Process country record.
        var usage = [];
        var years = [];
        var keys = Object.keys(d);
        keys.forEach(function (k) {
            if (k != 'Country') {

                // Parse usage.
                var use = +d[k];
                if (use) {
                    years.push(format.parse(k));
                    usage.push(use);
                }
            }
        });

        x.push({
            'Country': d.Country,
            'Years': years,
            'Usage': usage
        });
    });

    return x;
}

// Call-back after reading data.
//
function display(error, data) {
    if (error) {
        console.log(error);
        return;
    }

    //console.log(transformData(data));

    var chart = lineChart()
        .labels(function (d) {
            return d.Country;
        })
        .x(function (d) {
            return d.Years
        })
        .y(function (d) {
            return d.Usage
        });
    d3.select("#chart").datum(transformData(data)).call(chart);
}

// Read the data file.
queue()
    .defer(d3.csv, "Individuals_Internet_2000-2013.csv")
    .await(display);

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<head>
    <title>Global Internet Use 2000 – 2013</title>

    <link href="style.css" media="screen" rel="stylesheet" type="text/css"/>

    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="http://d3js.org/queue.v1.min.js"></script>
</head>
<body>

<h1>Global Internet Use 2000 – 2013</h1>

<p class="instructions">
    This chart visualizes ...
    <a href="http://www.vislives.com/2015/02/triple-j-hottest-100-artists-1993-2014.html" target="_blank">More...</a>
</p>

<div id="chart"></div>

<p><a href="http://vislives.com/" target="_blank">Chris Pudney</a>, 2015<br/>
    This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">Creative Commons
        Attribution 4.0 International License</a><br/>
    <a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="Creative Commons License"
                                                                             style="border-width:0"
                                                                             src="http://i.creativecommons.org/l/by/4.0/80x15.png"/></a>
</p>

<script src="chart.js" type="text/javascript"></script>

</body>

Individuals_Internet_2000-2013.csv

style.css

body {
    font-size: 12px;
    font-family: "Helvetica Neue", Helvetica, sans-serif;
}

p.instructions {
    width: 500px;
}

line.axis {
    stroke: #cccccc;
}

path {
    stroke: #cccccc;
    fill: none;
}

path.highlight {
    stroke: red;
    fill: none;
}

#tooltip {
    position: absolute;
    width: auto;
    height: auto;
    padding: 10px;
    background-color: white;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
    box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
    pointer-events: none;
}

#tooltip.hidden {
    display: none;
}

#tooltip p {
    margin: 0;
    color: black;
    font-family: sans-serif;
    font-size: 16px;
    line-height: 20px;
}