interactive-vis-course/Week11/rats_in_NYC.html at gh-pages · arnicas/interactive-vis-course · 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
<!DOCTYPE html>

<meta charset="utf-8">
<style>

body {
  font-family: Helvetica, sans-serif;
  background-color: linen;
  padding: 20px;
}

circle.rat {
  fill: lightyellow;
  opacity: .3;
}

.boro {
  stroke: lightslategrey;
  stroke-width: 1px;
  fill: #333;
}


</style>
<body>

<h2>Rat Sightings in NYC</h2>
<p>Source: <a href="https://data.cityofnewyork.us/Social-Services/Rat-Sightings/3q43-55fe">NYC Open Data on 311 calls</a> about rats over several years, via Jeremy Singer-Vine's newsletter. This takes a while to draw.</p>

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

var width = 960,
    height = 500;

 var projection = d3.geo.mercator()
            .center([-73.94, 40.70])
            .scale(50000)
            .translate([(width) / 2, (height)/2]);

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

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

var color = d3.scale.category10();

// we use queue because we have 2 data files to load.
queue()
  .defer(d3.json, "data/geojson/NYCboroughs.geojson")
  .defer(d3.csv, "data/Rat_SightingsNY_extract.csv", typeAndSet) // process
  .await(loaded);

function loaded(error, NYC, rats) {
  if (error) throw error;

  svg.selectAll("path.boro")
    .data(NYC.features)
    .enter().append("path")
    .attr("class", "boro")
    .attr("d", path);

  svg.selectAll("circle.rat")
    .data(rats)
    .enter()
    .append("circle")
    .attr("class", "rat")
    .attr("cx", function(d) {
        return projection([+d.Longitude, +d.Latitude])[0];
    })
    .attr("cy", function(d) {
       return projection([+d.Longitude, +d.Latitude])[1];
    })
    .attr("r", 1);

} // end loaded;

function typeAndSet(d) {
  // not doing anything here yet
  return d;
}

</script>