Cycling through phases of professionalism and sheer silly
Published
Edited
Jun 26, 2020
chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height])
const g = svg.append("g")
.attr("fill", "steelblue")
.selectAll("rect")
.data(data)
.join("rect")
.attr("x", d => x(d.area))
.attr("y", d => y(d.count))
.attr("height", d => y(0) - y(d.count))
.attr("width", x.bandwidth());
svg.append("g").call(xAxis)
svg.append("g").call(yAxis)
svg.selectAll(".tick").attr("font-size", "8px")
svg.append("text")
.attr("x", (width/2))
.attr("y", margin.top)
.attr("text-anchor", "middle")
.attr("font-size", "24px")
.attr("font-family", "sans-serif")
.text("Simple Assault Crime Reports by LAPD Area, 2017")
svg.append("text")
.attr("x", (width/2))
.attr("y", height - margin.bottom/3)
.attr("text-anchor", "middle")
.attr("font-size", "16px")
.attr("font-family", "sans-serif")
.text("Neighborhoods")
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("x", -(height/2))
.attr("y", margin.left-40)
.attr("text-anchor", "middle")
.attr("font-size", "16px")
.attr("font-family", "sans-serif")
.text("Number of Incidents")
return svg.node()
}
height = 600
x = d3.scaleBand()
.domain(data.map(d => d.area))
.range([margin.left, width - margin.right])
.padding(0.1)
y = d3.scaleLinear()
.domain([0, d3.max(data.map(d => d.count))])
.rangeRound([height - margin.bottom, margin.top])
xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x).tickSizeOuter(0))
.call(g => g.selectAll(".domain").remove())
yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y).ticks(null, "s"))
.call(g => g.selectAll(".domain").remove())
margin = ({top: 50, right: 10, bottom: 50, left: 60})
d3 = require('d3@5')
data = d3.csvParse(await FileAttachment('simple_assault_2017.csv').text(), d3.autoType)
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.
