Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- (function() {
- var w = 800
- var h = 600
- var w2 = 1000
- var h2 = 200
- var boundaries = {
- bottom: h2 - 60,
- top: 10,
- left: 60,
- right: w2 - 10
- }
- //Define quantize scale to sort data values into buckets of color
- let color = ['#79A87A', '#E28413', '#00005E', '#DE3C4B', '#C42847', '#08519c']
- // Convert date to YYYY/MM/DD
- var convertDate = date => {
- var D = date.split("/")
- return "" + D[2] + "/" + D[0] + "/" + D[1]
- }
- //For converting Dates to strings
- var hourOfDay = time => {
- var values = time.split(":")
- return +values[0]
- }
- var parseRow = row => ({
- "boro": row.BORO_NM,
- "date": convertDate(row.RPT_DT),
- "hour": +row.CMPLNT_FR_TM,
- "lat": parseFloat(row.Latitude),
- "lon": parseFloat(row.Longitude)
- })
- //Define map projection
- // From http://bl.ocks.org/phil-pedruco/6646844
- var projection = d3.geoMercator()
- .center([-73.94, 40.70])
- .translate([w / 2, h / 2])
- .scale(55 * 1000)
- var circleSize = 4
- //Define path generator
- var path = d3.geoPath()
- .projection(projection)
- //Create SVG element
- var svgGeo = d3.select("body").select("#chart1")
- .append("svg")
- .attr("width", w)
- .attr("height", h)
- var svgLine = d3.select("body").select("#chart2")
- .append("svg")
- .attr("width", w2)
- .attr("height", h2)
- //Load in GeoJSON data
- d3.json("data/boroughs.geojson", (error, json) => {
- if (error) console.log("error fetching data")
- //Bind data and create one path per GeoJSON feature
- svgGeo.selectAll("path")
- .data(json.features)
- .enter()
- .append("path")
- .attr("d", path)
- .style("fill", (d, i) => color[i])
- .style("stroke", "gray")
- d3.csv("data/all_murder.csv", parseRow, parsedData => {
- var data = parsedData.filter(d => d.boro && d.date && d.hour && d.lat && d.lon)
- var nestedData = d3.nest()
- .key(d => d.date)
- .sortKeys(d3.ascending)
- .entries(data)
- var dates = nestedData.map(d => new Date(d.key))
- var xMin = d3.min(dates)
- var xMax = d3.max(dates)
- x = d3.scaleTime()
- .domain([xMin, xMax])
- .range([boundaries.left, boundaries.right])
- xAxis = d3.axisBottom(x)
- y = d3.scaleLinear()
- .domain([1, d3.max(nestedData, d => d.values.length)])
- .range([boundaries.bottom, boundaries.top])
- yAxis = d3.axisLeft(y)
- svgLine.append("g")
- .attr("transform", "translate(0, " + boundaries.bottom + ")")
- .call(xAxis)
- svgLine.append("g")
- .attr("id", "yAxis")
- .attr("transform", "translate(" + boundaries.left + ", 0)")
- .call(yAxis)
- // Text label for the y axis
- svgLine.append("text")
- .attr("transform", "rotate(-90)")
- .style("text-anchor", "middle")
- .attr("y", boundaries.left / 2 - 10)
- .attr("x", -h2 / 2)
- .text("# Murders Committed")
- // Text label for the y axis
- svgLine.append("text")
- .style("text-anchor", "middle")
- .attr("y", boundaries.bottom + 40)
- .attr("x", w2 / 2)
- .text("Date")
- svgLine.append("path")
- .datum(nestedData)
- // .attr("class", selector + " path")
- .attr("stroke-width", "1px")
- .attr("fill", "none")
- .attr("stroke", "steelblue")
- .attr("d", d3.line()
- .x(d => +x(new Date(d.key)))
- .y(d => y(d.values.length))
- )
- // DRAW POINTS ON MAP
- var mapDots = svgGeo.append("g").selectAll("circle")
- .data(data)
- .enter()
- .append("circle")
- .attr("r", circleSize)
- .style("stroke-width", 0.25)
- .style("opacity", 0.75)
- .attr("fill", "purple")
- .attr("cx", d => projection([d.lon, d.lat])[0])
- .attr("cy", d => projection([d.lon, d.lat])[1])
- function brushEnd() {
- var coords = d3.brushSelection(this)
- if (coords) {
- var mapx0 = x.invert(coords[0])
- var mapx1 = x.invert(coords[1])
- // Decide which datapoints to display
- mapDots.style("fill", d => {
- if (mapx0 <= new Date(d.date) && new Date(d.date) <= mapx1) {
- return "purple"
- }
- else {
- return "transparent"
- }
- })
- }
- }
- var brush = d3.brushX()
- .extent([
- [boundaries.left, boundaries.top],
- [boundaries.right, boundaries.bottom]
- ])
- .on("brush", brushEnd)
- svgLine.append("g")
- .call(brush)
- .call(brush.move, // Creates initial Window
- [boundaries.left, boundaries.left + 100]
- )
- })
- })
- })()
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement