Civic-Data/interactive_map.html at master · DataSparkRI/Civic-Data · 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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>RI Youth Registration Rate</title>
        <script type="text/javascript" src="d3.js"></script>
        <style type="text/css">
            /* Style rules */
        </style>
    </head>
    <body>
        <script type="text/javascript">

            // var w = 1500;
            // var h = 900;
            // var w = 960;
            // var h = 500;
            var w = 960;
            var h = 900;

            var projection = d3.geo.mercator()
                                    .center([-71.4121134, 41.8148182]) // centered on Providence
                                    // .center([-71.5064508, 41.5827282,]) // centered on RI
                                    .scale(40000);

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


            var color = d3.scale.quantile()
            // var color = d3.scale.quantize()
                                // .domain([0,120000])
                                // .domain([0,18000])
                                // .range(["rgb(237,248,233)","rgb(186,228,179)","rgb(116,196,118)","rgb(49,163,84)","rgb(0,109,44)"]);
                                .range(["#eff3ff","#bdd7e7","#6baed6","#3182bd","#08519c"]);
                                // ColorBrewer colors

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

            // Load in muni data

            var munis = {};

            d3.csv("2013_5yr_pop_estimates.csv", function (pop_data) {

                for (var g = 0; g < pop_data.length; g++) {

                    var loc = pop_data[g]["Municipality3"];

                    if (!(loc in munis)) {
                        munis[loc] = {}
                    }

                    munis[loc].pop_18_plus = parseFloat(pop_data[g]["Total 18+"]);
                    munis[loc].pop_18_24 = parseFloat(pop_data[g]["Total 18-24"]);
                }
            });

            d3.csv("Registered_voter_totals_Nov2014a.csv", function (voter_data) {

                for (var h = 0; h < voter_data.length; h++) {

                    var loc = voter_data[h]["Muni"];

                    munis[loc].voter_18_plus = parseFloat(voter_data[h]["Grand Total"]);
                    munis[loc].voter_18_24 = parseFloat(voter_data[h]["18-24"]);
                }

                var muni_list = d3.entries(munis);
                var getAges = function (d) { return d.value.voter_18_24; };
                color.domain(d3.map(muni_list, getAges).keys());
            });


            d3.json("ri_muni.geojson", function (geo_data) {

                for (var i = 0; i < geo_data.features.length; i++) {

                    var muni_name = geo_data.features[i].properties.MUNI_CAPS;

                    for (p in munis[muni_name]) {
                        geo_data.features[i].properties[p] = munis[muni_name][p];
                    }
                }


                svg.selectAll("path")
                    .data(geo_data.features, function (d) { return d.properties.MUNI_CAPS; })
                    .enter()
                    .append("path")
                    .attr("d", path)
                    // .style('fill', '#ccc')
                    .style("fill", function (d) {
                        var value = d.properties.voter_18_24;
                        return color(value);
                    })
                    // .style('fill', function (d) {
                    //     var value = d.properties.voter_18_24;
                    //     return (value > 2000) ? 'black' : '#ccc';
                    // })
                    .style("stroke", "white")
                    .style("stroke-width", 2);
            });

        </script>
    </body>
</html>