Public
Edited
May 7
barChart = {
const width = 800;
const height = 500;
const margin = { top: 100, right: 30, bottom: 100, left: 60 };
const svg = d3.create("svg")
.attr("width", width)
.attr("height", height);
const data = [
{ keyword: "superhero", frequency: 8 },
{ keyword: "future", frequency: 5 },
{ keyword: "friendship", frequency: 7 },
{ keyword: "dream", frequency: 2 },
{ keyword: "based on novel", frequency: 5 },
{ keyword: "a.i.", frequency: 2},
{ keyword: "space", frequency: 5 },
{ keyword: "sequel", frequency: 7 },
{ keyword: "new york city", frequency: 6 },
{ keyword: "government", frequency: 4 }
];
const x = d3.scaleBand()
.domain(data.map(d => d.keyword))
.range([margin.left, width - margin.right])
.padding(0.2);
const y = d3.scaleLinear()
.domain([0, d3.max(data, d => d.frequency)])
.nice()
.range([height - margin.bottom, margin.top]);
// Axes
svg.append("g")
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(x))
.selectAll("text")
.attr("text-anchor", "middle");
svg.append("g")
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(y));
// Bars
svg.append("g")
.selectAll("rect")
.data(data)
.join("rect")
.attr("x", d => x(d.keyword))
.attr("y", d => y(d.frequency))
.attr("width", x.bandwidth())
.attr("height", d => y(0) - y(d.frequency))
.attr("fill", "#ffc92f");
// Axis Labels
svg.append("text")
.attr("transform", "rotate(-90)")
.attr("x", -height / 2)
.attr("y", margin.left - 40)
.attr("text-anchor", "middle")
.text("Frequency");
svg.append("text")
.attr("x", width / 2)
.attr("y", height - 40)
.attr("text-anchor", "middle")
.text("Keyword");
// ───── Slider (Non-Interactive) ─────
const sliderX = width / 2 - 100;
const sliderY = margin.top - 40;
const sliderWidth = 200;
const selectedYear = 2015;
// Slider Track
svg.append("line")
.attr("x1", sliderX)
.attr("x2", sliderX + sliderWidth)
.attr("y1", sliderY)
.attr("y2", sliderY)
.attr("stroke", "#999")
.attr("stroke-width", 4);
// Slider Handle (Circle)
const yearRatio = (selectedYear - 2000) / (2025 - 2000); // normalized 0–1
const handleX = sliderX + yearRatio * sliderWidth;
svg.append("circle")
.attr("cx", handleX)
.attr("cy", sliderY)
.attr("r", 8)
.attr("fill", "#333");
// Slider Label
svg.append("text")
.attr("x", handleX)
.attr("y", sliderY - 15)
.attr("text-anchor", "middle")
.style("font-size", "12px")
.text(`Year: ${selectedYear}`);
return svg.node();
}
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.
