// prepare clean data for q2
data_q2 = d3.rollup(data, group => group.length, d => d.ZipCodes[0])
minCount = d3.min(data_q3, d => d.Counts)
matrix = {
const cellSize = 60;
const q3Category = Category.length * cellSize;
const q3Borough = Borough.length * cellSize;
const margin = {top: 50, right: 400, bottom: 30 , left: 120};
const svg = d3.create('svg')
.attr('width', q3Borough + margin.left + margin.right)
.attr('height', q3Category + margin.top + margin.bottom);
const g = svg.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`);
// draw circles
const q3X = d3.scalePoint()
.domain(Category)
.range([0, q3Category]);
const q3Y = d3.scalePoint()
.domain(Borough)
.range([0, q3Borough]);
const maxRadius = cellSize/2 - 2;
const radius = d3.scaleSqrt()
.domain([0, maxCount]).nice()
.range([0, maxRadius]);
const xValQ3 = d3.scaleBand()
.domain(Borough)
.range([0,q3Borough]).padding(-1);
const yValQ3 = d3.scaleBand()
.domain(Category)
.range([0,q3Category]).padding(-1);
const xAxisQ3 = d3.axisBottom(xValQ3);
const yAxisQ3 = d3.axisLeft(yValQ3);
const circlesGroup = g.append('g');
circlesGroup.selectAll("circle")
.data(data_q3)
.join("circle")
.attr("cy", d => q3X(d.Category))
.attr("cx", d => q3Y(d.Borough))
.attr("r", d => radius(d.Counts))
.attr("fill", "steelblue");
// legend
const legendGroup = g.append("g")
.attr('font-family', 'sans-serif')
.attr('font-size', 12);
const legendRows = legendGroup.selectAll("g")
.data([10, 1e2, 5e2, 1e3, 5e3, 9e3])
.join("g")
.attr("transform", (d, i) => `translate(${margin.right}, ${20 + i * 2.1 * maxRadius})`);
legendRows.append("circle")
.attr("r", d => radius(d))
.attr("fill", "steelblue")
.attr("opacity", "1");
legendRows.append("text")
.attr("dominant-baseline", "middle")
.attr("x", maxRadius + 5)
.text(d => d);
// axes
g.append("g").attr('transform', `translate(0, ${q3Category})`).call(xAxisQ3);
g.append("g").attr('transform', `translate(-35, 0)`).call(yAxisQ3).call(g => g.select('.domain').remove());
return svg.node();
}
// add cells here
// add cells here
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.
