intmap.js

/**
 * Created by jonah on 18/11/13.
 */
    var w = 600;
    var h = 400;
    var centered;

    var points = [
        {'name': 'Abakaliki', 'lat' : 6.333, 'lon': 8.1, lga: 'Ebonyi'},
        {'name': 'Abakaliki2', 'lat' : 6.5, 'lon': 8.1, lga: 'Ebonyi'},
        {'name': 'Abakaliki3', 'lat' : 6.55, 'lon': 8.14, lga: 'Ebonyi'},
        {'name': 'Strange', 'lat': 6.13, 'lon': 8.0, lga: 'Ezza South'}
    ];

    /**********************************************/
    // Setup projection
    var projection = d3.geo.mercator()
            .translate([w/2, h/2])
            .center([8.033,6.3])
            .scale([15000]);

    var path = d3.geo.path()
            .projection(projection);
    /***********************************************/

    // Create svg element
    var svg = d3.select("body")
            .append("svg")
            .attr("width", w)
            .attr("height", h);

    //Add rectangular background
    svg.append("rect")
            .attr("class", "background")
            .attr("width", w)
            .attr("height", h)
            .on("click", clicked);

    svg2 = svg.append("g");

    d3.json('./ebonyi.json', function(json){
                svg2.selectAll("path")
                        .data(json.features)
                        .enter()
                        .append("path")
                        .attr("d", path)
                        .attr("class", 'lgas')
                        .on('click', clicked);
            }
    );

    //var b = path.bounds(svg2.select("g"))
    svg3 = svg.append("g");

    // Create points
    svg3.selectAll("path")
            .data(points)
            .enter()
            .append("svg:circle")
            .attr("cx", function(xx){return projection([xx.lon, xx.lat])[0]})
            .attr("cy", function(xx){return projection([xx.lon, xx.lat])[1]})
            .attr("r", 1.5)
            .style('fill', 'black')
            .style('stroke', 'grey')
            .style('stroke-width', 0.5)
            .style('opacity', 0)
            .style('pointer-events', 'none');

    function clicked(d){
        var x, y, k;

        if (d && centered !== d) {
            var centroid = path.centroid(d);
            x = centroid[0];
            y = centroid[1];
            k = 3;
            centered = d;
        } else {
            x = w/2;
            y = h/2;
            k = 1;
            centered = null;
        }
        svg2.selectAll("path")
                .classed("active", centered && function(d) { return d === centered; });

        svg2.transition()
                .duration(500)
                .attr("transform", "translate(" + w / 2 + "," + h / 2 + ")scale(" + k + ")translate(" + -x + "," + -y + ")")
                .style("stroke-width", 1.5 / k + "px");

        svg3.transition()
                .duration(500)
                .attr("transform", "translate(" + w / 2 + "," + h / 2 + ")scale(" + k + ")translate(" + -x + "," + -y + ")")

        if (centered != null){

        //display points in clicked LGA
        svg3.selectAll("circle")
                .filter(function(xx) {return xx.lga == d.properties.ADM2NAME})
                .style('pointer-events', 'all')
                .transition()
                .duration(500)
                .delay(function(d, i) { return i / 10 * 1000; })
                .style('opacity', 1);

        //hide points not in clicked LGA
        svg3.selectAll('circle')
                .filter(function(xx) {return xx.lga != d.properties.ADM2NAME})
                .style('pointer-events', 'none')
                .transition()
                .duration(500)
                .style('opacity', 0);
        }
        else
        {
            svg3.selectAll('circle')
                    .style('pointer-events', 'none')
                    .transition()
                    .duration(500)
                    .style('opacity', 0);
        }

    }