chart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
data.sort((b, a) => a.value - b.value);
//Draw the bars
svg.selectAll('rect')
.data(data)
.enter().append('rect')
.style("fill", d => scale.c(d.value))
.attr("x", d => scale.x(d.name))
.attr("width", scale.x.bandwidth())
.attr("y",d => scale.y(d.value))
.attr("height", d => scale.y(0) - scale.y(d.value));
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);
return svg.node();
}
xAxis = g => g
.attr("transform", `translate(0,${height - margin.bottom})`)
.call(d3.axisBottom(scale.x))
.attr("class", "x-axis");
yAxis = g => g
.attr("transform", `translate(${margin.left},0)`)
.call(d3.axisLeft(scale.y))
.attr("class", "t-axis");
scale = {
const x = d3.scaleBand()
.domain(data.map(d => d.name))
.range([margin.left, width - margin.right])
.paddingInner(0.1);
const c = d3.scaleLinear()
.domain([0, d3.max(data, d => d.value)])
.range(['#956BDA', '#DBD532']);
const y = d3.scaleLinear()
.domain([0, d3.max(data, d => d.value)]).nice()
.range([height - margin.bottom, margin.top]);
return { x, c, y }
}
data = (await FileAttachment("movie2.json").json())
.filter(d => d.year === '2019')
height = 400
width = 950
margin = ({ top: 30, right: 0, bottom: 20, left: 70});
d3 = require("d3@5")
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.
