script.js

/*
Parses us-county-names.tsv into components.
Used by d3.tsv() function.
*/
function parseCountyName(row) {
    return {
        id: +row.id,
        name: row.name.trim()
    };
}

/*
Parses us-state-names.tsv into components.
Used by d3.tsv() function.
*/
function parseStateName(row) {
    return {
        id: +row.id,
        name: row.name.trim(),
        code: row.code.trim().toUpperCase()
    };
}

/*
Non-robust function to update lookup IDs based
on passed in data. Does no error checking!
*/
function updateNameLookup(lookup, data) {
    data.forEach(function(element) {
        lookup[element.id] = element.name;

        // Lets you lookup the ID of a state
        // by its code (2-letter abbreviation)
        if (element.hasOwnProperty("code")) {
            lookup[element.code] = element.id;
        }
    });

    return lookup;
}

function drawCountry(data, id) {

    // get the svg by id
    var svg = d3.select("svg#" + id);

    // gets the width and height of an html-level element
    var bbox = svg.node().getBoundingClientRect();

    // get the default albers USA projection
    var projection = d3.geo.albersUsa()
        .scale(bbox.width)
        .translate([bbox.width / 2, bbox.height / 2]);

    // get a path generator function for our projection
    var path = d3.geo.path().projection(projection);

    // add a plot group
    var plot = svg.append("g");

    // append the land path
    plot.append("path")
        // get the data from topojson
        .datum(topojson.feature(data, data.objects.land))
        // call the path generator
        .attr("d", path)
        .classed({"land": true, "outline": true});
}

function drawStates(data, id) {
    // get the svg by id
    var svg = d3.select("svg#" + id);

    // gets the width and height of an html-level element
    var bbox = svg.node().getBoundingClientRect();

    // get the default albers USA projection
    var projection = d3.geo.albersUsa()
        .scale(bbox.width)
        .translate([bbox.width / 2, bbox.height / 2]);

    // get a path generator function for our projection
    var path = d3.geo.path().projection(projection);

    // add a plot group
    var plot = svg.append("g");

    // append the land path
    plot.append("path")
        // get the data from topojson
        .datum(topojson.feature(data, data.objects.land))
        // call the path generator
        .attr("d", path)
        .classed({"land": true, "outline": true});

    // use this to plot non-overlapping boundaries only (no fill)
    plot.append("path")
        .datum(topojson.mesh(data, data.objects.states,
            function(a, b) { return a !== b; }))
        .attr("d", path)
        .classed("state", true);
}

function drawCounties(data, id) {
    // get the svg by id
    var svg = d3.select("svg#" + id);

    // gets the width and height of an html-level element
    var bbox = svg.node().getBoundingClientRect();

    // get the default albers USA projection
    var projection = d3.geo.albersUsa()
        .scale(bbox.width)
        .translate([bbox.width / 2, bbox.height / 2]);

    // get a path generator function for our projection
    var path = d3.geo.path().projection(projection);

    // add a plot group
    var plot = svg.append("g");

    // append the land background
    plot.append("path")
        // get the data from topojson
        .datum(topojson.feature(data, data.objects.land))
        // call the path generator
        .attr("d", path)
        .classed("land", true);

    // use this to plot fillable shapes
    plot.selectAll("path")
        .data(topojson.feature(data, data.objects.counties).features)
        .enter()
        .append("path")
        .attr("d", path)
        .classed("county", true);

    // plot land outline on top
    plot.append("path")
        // get the data from topojson
        .datum(topojson.mesh(data, data.objects.land))
        // call the path generator
        .attr("d", path)
        .classed("outline", true)
        .style("fill", "none");
}

function drawFinal(data, id) {
    // get the svg by id
    var svg = d3.select("svg#" + id);

    // gets the width and height of an html-level element
    var bbox = svg.node().getBoundingClientRect();

    // get the default albers USA projection
    var projection = d3.geo.albersUsa()
        .scale(bbox.width)
        .translate([bbox.width / 2, bbox.height / 2]);

    // get a path generator function for our projection
    var path = d3.geo.path().projection(projection);

    // add a plot group
    var plot = svg.append("g");

    // append the land background
    plot.append("path")
        // get the data from topojson
        .datum(topojson.feature(data, data.objects.land))
        // call the path generator
        .attr("d", path)
        .classed("land", true);

    // use this to plot fillable shapes
    plot.selectAll("path")
        .data(topojson.feature(data, data.objects.counties).features)
        .enter()
        .append("path")
        .attr("d", path)
        .classed("county", true)
        .on("click", function(d) {
            // assumes nameLookup is defined somewhere
            console.log(nameLookup[d.id], d);
        });

    // plot land outline on top
    plot.append("path")
        // get the data from topojson
        .datum(topojson.mesh(data, data.objects.land))
        // call the path generator
        .attr("d", path)
        .classed("outline", true)
        .style("fill", "none");
}