calgaryd3map/map.js at gh-pages · Gsync/calgaryd3map · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
function createMap(w, h) {
    d3.select("#map")
        .attr("width", w)
        .attr("height", h)
        .append("text")
        .attr("x", w / 2)
        .attr("y", "1em")
        .attr("font-size", "1.5em")
        .style("text-anchor", "middle")
        .classed("map-title", true);
}

function drawMap(geodata, data) {
    let map = d3.select('#map');

    var projection = d3.geoMercator()
        .fitExtent([[0, 0], [w, h]], geodata);

    let path = d3.geoPath().projection(projection);

    map
        .selectAll('.community')
        .data(geodata.features)
        .enter()
        .append('path')
        .attr('d', path)
        .classed('community', true)
        .on('click', function () {
            let comobj = d3.select(this);
            let commmunity = comobj.data()[0].properties.name;
            drawBar(data, commmunity);
        })
        .attr('fill', 'steelblue');

}