data viz + front end development
Published
Edited
Sep 21, 2019
1 star
{
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
let data = by_type.find(t => t.key == inc_type).values.sort((a,b) => d3.ascending(a.key,b.key))
let x = d3.scaleBand()
.domain(data.map(d => d.key))
.range([margin.left, width - margin.right])
.padding(0.1)
let xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x)).selectAll("text")
.attr("y", 0)
.attr("x", 9)
.attr("dy", ".35em")
.attr("transform", "rotate(90)")
.style("text-anchor", "start");
let y = d3.scaleLinear()
.domain([0,d3.extent(data, d => d.value)[1]]).nice()
.range([height - margin.bottom, margin.top])
let yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y))
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);
svg.append("g")
.attr("fill", "#933")
.selectAll("rect")
.data(data)
.join("rect")
.attr("x", d => x(d.key))
.attr("y", d => y(d.value))
.attr("height", d => y(0) - y(d.value))
.attr("width", x.bandwidth());
svg.append("g")
.selectAll("text")
.data(data)
.join("text")
.attr("font-size", "12px")
.attr("text-anchor", "middle")
.attr("x", d => x(d.key) + x.bandwidth()/2)
.attr("y", d => y(d.value) - 5).text(d => d.value);
// r, slope, regression ans sd lines
let xSeries = data.map(d => x(d.key));
let ySeries = data.map(d => y(d.value));
let {slope, intercept} = leastSquares(xSeries, ySeries);
const ptAx = d3.min(xSeries);
const ptAy = slope * d3.min(xSeries) + intercept;
const ptBx = d3.max(xSeries);
const ptBy = intercept + slope * d3.max(xSeries);
svg.append("line")
.attr("stroke", "orange")
.attr("stroke-width", 3)
.attr("x1", ptAx + x.bandwidth()/2)
.attr("y1", ptAy)
.attr("x2", ptBx + x.bandwidth()/2)
.attr("y2", ptBy);
return svg.node();
}
by_type = {
var json = await d3.json("https://data.boston.gov/api/3/action/datastore_search_sql?sql=SELECT%20%22YEAR%22,%22MONTH%22,%22OFFENSE_CODE_GROUP%22,%20count(*)%20from%20%2212cb3883-56f5-47de-afa5-3b1cf61b257b%22%20GROUP%20BY%20%22YEAR%22,%22MONTH%22,%22OFFENSE_CODE_GROUP%22&$format=json")
var by_groups = d3.nest().key(d => d.OFFENSE_CODE_GROUP).key(d => `${d.YEAR.slice(-2)}/${d.MONTH < 10 ? 0 : ''}${d.MONTH}`).rollup(g => d3.sum(g, v => +v.count)).entries(json.result.records)
return by_groups
}
incidents = d3.json('https://data.boston.gov/datastore/odata3.0/12cb3883-56f5-47de-afa5-3b1cf61b257b?&$format=json&$top=3000')
ma_geo = d3.json("https://raw.githubusercontent.com/filipemir/police-incident-dashboard/master/data/bmc.geojson")
height = 600
projection = d3.geoMercator().fitExtent([[20, 20], [width, height]], ma_geo);
path = d3.geoPath().projection(projection);
d3 = require('d3@v5')
margin = ({top: 20, right: 30, bottom: 50, left: 40})
d3Tip = require("d3-tip")
import {pointInPolygon} from '@tarte0/points-inside-a-polygon'
leastSquares = (xSeries, ySeries) => {
const reduceSumFunc = function (prev, cur) { return prev + cur; }
const xBar = xSeries.reduce(reduceSumFunc) * 1.0 / xSeries.length;
const yBar = ySeries.reduce(reduceSumFunc) * 1.0 / ySeries.length;
const ssXX = xSeries.map(function (d) { return Math.pow(d - xBar, 2); })
.reduce(reduceSumFunc);
const ssYY = ySeries.map(function (d) { return Math.pow(d - yBar, 2); })
.reduce(reduceSumFunc);
const sdRatio = Math.sqrt(ssYY / ssXX);
const ssXY = xSeries.map(function (d, i) { return (d - xBar) * (ySeries[i] - yBar); })
.reduce(reduceSumFunc);
const slope = ssXY / ssXX;
const intercept = yBar - (xBar * slope);
const rSquare = Math.pow(ssXY, 2) / (ssXX * ssYY);
return {slope, intercept, rSquare, xBar, yBar, sdRatio};
}
import {select} from "@jashkenas/inputs"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
