Public
Edited
Sep 20, 2023
unemployment-x.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
unemployment = FileAttachment("unemployment-x.csv").csv({typed: true})
{
const margin = {top: 0, right: 0, bottom: 0, left: 0};
const svg_width = 960;
const svg_height = 500;
const width = svg_width - margin.left - margin.right;
const height = svg_height - margin.top - margin.bottom;
const svg = d3.create("svg")
.attr("width", svg_width)
.attr("height", svg_height)
.attr("viewBox", [0, 0, width + margin.left + margin.right, height + margin.top + margin.bottom])
.attr("style", "max-width: 100%; height: auto;");
const chart = svg.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`);
return svg.node();
}
{
const margin = {top: 0, right: 0, bottom: 30, left: 0}; // Need bottom margin to display x-axis
const svg_width = 960;
const svg_height = 500;
const width = svg_width - margin.left - margin.right;
const height = svg_height - margin.top - margin.bottom;
const svg = d3.create("svg")
.attr("width", svg_width)
.attr("height", svg_height)
.attr("viewBox", [0, 0, width + margin.left + margin.right, height + margin.top + margin.bottom])
.attr("style", "max-width: 100%; height: auto;");
const chart = svg.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`);
const bins = d3.bin()
.thresholds(40)
.value((d) => d.rate)
(unemployment);
const x = d3.scaleLinear()
.domain([bins[0].x0, bins[bins.length - 1].x1])
.range([0, width]);
chart.append("g")
.attr("transform", `translate(0, ${height})`)
.call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0));
return svg.node();
}
bins = d3.bin()
.thresholds(40)
.value((d) => d.rate)
(unemployment);
bins[0].length;
{
const margin = {top: 0, right: 0, bottom: 30, left: 40}; // Need left margin to display y-axis
const svg_width = 960;
const svg_height = 500;
const width = svg_width - margin.left - margin.right;
const height = svg_height - margin.top - margin.bottom;
const svg = d3.create("svg")
.attr("width", svg_width)
.attr("height", svg_height)
.attr("viewBox", [0, 0, width + margin.left + margin.right, height + margin.top + margin.bottom])
.attr("style", "max-width: 100%; height: auto;");
const chart = svg.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`);
const bins = d3.bin()
.thresholds(40)
.value((d) => d.rate)
(unemployment);
const x = d3.scaleLinear()
.domain([bins[0].x0, bins[bins.length - 1].x1])
.range([0, width]);
chart.append("g")
.attr("transform", `translate(0, ${height})`)
.call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0));
const y = d3.scaleLinear()
.domain([0, d3.max(bins, (d) => d.length)])
.range([height, 0]);
chart.append("g")
.call(d3.axisLeft(y).ticks(height / 40))
.call((g) => g.select(".domain").remove());
return svg.node();
};
{
const margin = {top: 0, right: 0, bottom: 30, left: 40};
const svg_width = 960;
const svg_height = 500;
const width = svg_width - margin.left - margin.right;
const height = svg_height - margin.top - margin.bottom;
const svg = d3.create("svg")
.attr("width", svg_width)
.attr("height", svg_height)
.attr("viewBox", [0, 0, width + margin.left + margin.right, height + margin.top + margin.bottom])
.attr("style", "max-width: 100%; height: auto;");
const chart = svg.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`);
const bins = d3.bin()
.thresholds(40)
.value((d) => d.rate)
(unemployment);
const x = d3.scaleLinear()
.domain([bins[0].x0, bins[bins.length - 1].x1])
.range([0, width]);
chart.append("g")
.attr("transform", `translate(0, ${height})`)
.call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0));
const y = d3.scaleLinear()
.domain([0, d3.max(bins, (d) => d.length)])
.range([height, 0]);
chart.append("g")
.call(d3.axisLeft(y).ticks(height / 40))
.call((g) => g.select(".domain").remove());
// Add hists
chart.append("g")
.attr("fill", "steelblue")
.selectAll()
.data(bins)
.join("rect")
.attr("x", (d) => x(d.x0) + 1)
.attr("width", (d) => x(d.x1) - x(d.x0)- 1)
.attr("y", (d) => y(d.length))
.attr("height", (d) => y(0) - y(d.length));
return svg.node();
};
{
const margin = {top: 0, right: 0, bottom: 30, left: 40}; // Need top margin since the label on y-axis overlapping the hists
const svg_width = 960;
const svg_height = 500;
const width = svg_width - margin.left - margin.right;
const height = svg_height - margin.top - margin.bottom;
const svg = d3.create("svg")
.attr("width", svg_width)
.attr("height", svg_height)
.attr("viewBox", [0, 0, width + margin.left + margin.right, height + margin.top + margin.bottom])
.attr("style", "max-width: 100%; height: auto;");
const chart = svg.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`);
const bins = d3.bin()
.thresholds(40)
.value((d) => d.rate)
(unemployment);
const x = d3.scaleLinear()
.domain([bins[0].x0, bins[bins.length - 1].x1])
.range([0, width]);
chart.append("g")
.attr("transform", `translate(0, ${height})`)
.call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0))
.call((g) => g.append("text")
.attr("x", width)
.attr("y", margin.bottom - 4)
.attr("fill", "currentColor")
.attr("text-anchor", "end") // Need anchor to display all text
.text("Unemployment rate (%) →"));
chart.append("g")
.attr("transform", `translate(0, ${height})`)
.call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0));
const y = d3.scaleLinear()
.domain([0, d3.max(bins, (d) => d.length)])
.range([height, 0]);
chart.append("g")
.call(d3.axisLeft(y).ticks(svg_height / 40))
.call((g) => g.select(".domain").remove())
.call((g) => g.append("text")
.attr("x", - margin.left)
.attr("y", 10)
.attr("fill", "currentColor")
.attr("text-anchor", "start") // Need anchor to display all text
.text("↑ Frequency (no. of counties)"));
// Add hists
chart.append("g")
.attr("fill", "steelblue")
.selectAll()
.data(bins)
.join("rect")
.attr("x", (d) => x(d.x0) + 1)
.attr("width", (d) => x(d.x1) - x(d.x0)- 1)
.attr("y", (d) => y(d.length))
.attr("height", (d) => y(0) - y(d.length));
return svg.node();
};
Plot.plot({
width: 960,
height: 500,
marks:[
Plot.rectY(unemployment, Plot.binX({y: "count"}, {x: "rate", fill: "steelblue"})),
Plot.ruleY([0])
]
})
Plot.rectY(unemployment, Plot.binX({y: "count"}, {x: "rate"})).plot()
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.
