chart = {
// main plot
let plot = Plot.plot({
y: {
tickFormat: "",
tickSize: 0,
label: "",
padding: .4 // Add padding between bars
},
x: {
axis: null
},
style: {
backgroundColor: "#ecded0",
fontWeight: 600
},
marks: [
Plot.barX(parsedData, {
y: "Date",
x: "Land",
fill: "#d93851",
stroke: 'black',
strokeWidth: 0.5,
}),
Plot.text(parsedData.filter((d) => [1874, 1899].includes(d["Date"])), {
y: "Date",
x: (d) => d["Land"]/2,
text: (d) => d3.format(',.0f')(Number(d["Land"])),
}),
],
height: 650,
marginTop: 70,
marginLeft: 100,
marginRight: 100
});
// title
d3.select(plot)
.append("text")
.attr("x", 330)
.attr("y", 50)
.attr("id", "title_text")
.attr("text-anchor", "middle")
.style("font-size", "15px")
.text("ACRES OF LAND OWNED BY NEGROES IN GEORGIA.");
// Interactivity handling
d3.select(plot)
.selectAll("rect")
.on("mouseover", function () {
d3.select(plot)
.selectAll("rect")
.attr("opacity", 0.2)
.attr("stroke-width", 0.5);
d3.select(plot)
.selectAll("text")
.attr("opacity", 0.2);
d3.select("#title_text")
.attr("opacity", 1)
d3.select(this)
.attr("opacity", 1)
.attr("stroke-width", 2.5)
let thisIndex = d3.select(this).data()
let xpos = Number(d3.select(this).attr("x")) + Number(d3.select(this).attr("width"))/2
let ypos = Number(d3.select(this).attr("y")) + Number(d3.select(this).attr("height"))-2
let filltext = d3.format(',.0f')(parsedData[thisIndex]['Land'])
let barYear = d3.format('.0f')(parsedData[thisIndex]['Date'])
d3.selectAll("#hover_text").remove()
d3.select(plot)
.append("text")
.attr("x", xpos)
.attr("y", ypos)
.attr("id", "hover_text")
.attr("text-anchor", "middle")
.style("font-size", "12px")
.text(filltext);
d3.selectAll("text").filter(function () {
return d3.select(this).text() == barYear
}).attr("opacity", 1)
});
d3.select(plot) // Handle mouseleave for the whole plot, rather than each individual rect to avoid flickering effect
.on("mouseleave", function () {
d3.select(plot)
.selectAll("rect")
.attr("opacity", 1)
.attr("stroke-width", 0.5);
d3.select(plot)
.selectAll("text")
.attr("opacity", 1);
d3.selectAll("#hover_text").remove()
});
return 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.
