Public
Edited
Apr 26
Insert cell
Insert cell
Insert cell
data = [
{ letter: "A", frequency: 0.08167 },
{ letter: "B", frequency: 0.01492 },
{ letter: "C", frequency: 0.02782 },
{ letter: "D", frequency: 0.04253 },
{ letter: "E", frequency: 0.12702 },
{ letter: "F", frequency: 0.02288 },
{ letter: "G", frequency: 0.02015 },
{ letter: "H", frequency: 0.06094 },
{ letter: "I", frequency: 0.06966 },
{ letter: "J", frequency: 0.00153 }
];
Insert cell
Insert cell
Insert cell
Insert cell
chart = {
// Specify the chart’s dimensions.
const width = 640;
const height = 400;
const marginTop = 20;
const marginRight = 0;
const marginBottom = 30;
const marginLeft = 40;

// Define color settings, feel free to modify
const default_color = "steelblue";
const highlight_color = "orange";
// Declare the x (horizontal position) scale and the corresponding axis generator.
const x = d3.scaleBand()
.domain(data.map(d => d.letter))
.range([marginLeft, width - marginRight])
.padding(0.1);

const xAxis = d3.axisBottom(x).tickSizeOuter(0);

// Declare the y (vertical position) scale.
const y = d3.scaleLinear()
.domain([0, d3.max(data, d => d.frequency)]).nice()
.range([height - marginBottom, marginTop]);

// Create the SVG container.
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height])
.attr("style", `max-width: ${width}px; height: auto; font: 10px sans-serif; overflow: visible;`);

// Define tooltip selector
// TODO: Append tooltip style definition after append("div")
const tooltip = d3.select("body").append("div")
.style("position", "absolute")
.style("visibility", "hidden")
.style("background", "rgba(255,255,255,0.8)")
.style("border", "1px solid #ccc")
.style("padding", "5px")
.style("border-radius", "4px")
.style("pointer-events", "none");
const bar = svg.append("g")
.attr("fill", default_color)
.selectAll("rect")
.data(data, d => d.letter)
.join("rect")
.style("mix-blend-mode", "multiply") // Darker color when bars overlap during the transition.
.attr("x", d => x(d.letter))
.attr("y", d => y(d.frequency))
.attr("height", d => y(0) - y(d.frequency))
.attr("width", x.bandwidth())
.classed("clicked", false)
.on("mouseover", function(event, d) {
d3.select(this).attr("fill", highlight_color);
tooltip
.html(`Letter: <strong>${d.letter}</strong><br/>Frequency: ${d.frequency}`)
.style("visibility", "visible");
})
.on("mousemove", function(event) {
tooltip
.style("top", (event.pageY - 10) + "px")
.style("left", (event.pageX + 10) + "px");
})
.on("mouseout", function() {
const b = d3.select(this);
if (!b.classed("clicked")) b.attr("fill", default_color);
tooltip.style("visibility", "hidden");
})
.on("click", function(event) {
const b = d3.select(this);
const wasClicked = b.classed("clicked");
b.classed("clicked", !wasClicked)
.attr("fill", !wasClicked ? highlight_color : default_color);
});

// Create the axes.
const gx = svg.append("g")
.attr("transform", `translate(0,${height - marginBottom})`)
.call(xAxis);
const gy = svg.append("g")
.attr("transform", `translate(${marginLeft},0)`)
.call(d3.axisLeft(y).tickFormat((y) => (y * 100).toFixed()))
.call(g => g.select(".domain").remove());

function update(order) {
// Get selected ordered data mapping
x.domain(data.sort(order).map(d => d.letter));
bar
.transition()
.duration(750)
.delay((d,i) => i * 50)
.attr("x", d => x(d.letter));
gx
.transition()
.duration(750)
.call(xAxis)
.selectAll(".tick")
.delay((d,i) => i * 50);

};

return Object.assign(svg.node(), {update});
}

Insert cell
update = chart.update(order)
Insert cell
Insert cell

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.
Learn more