Black History Month ActivityResources: Black in Data# Black History Month - Harriet TubmanJuneteenth: History and ResourcesAfrican American WritersThe Great MigrationBlack Lives Matter in the MediterraneanLynching Victims, Methods, and AccusationsThe Racial Wealth Gap“The Georgia Negro: A Social Study” by W.E.B. Du Bois“Conjugal condition of American Negroes according to age periods” by W.E.B. Du Bois“American Negro newspapers and periodicals” by W.E.B. Du BoisW.E.B. Du Bois - "Number of Negro students taking the various courses of study offered in Georgia schools""Proportion of Freemen and Slaves Among American Negroes" by W.E.B. Du BoisDay four: Radial Chart with Styling
African American Achievements - Black History Month
chart = {
const svg = d3.select(DOM.svg(width, 1750));
const tooltip = d3.select("body").append("div").attr("class", "tooltip");
const path = svg
.append("path")
.attr(
"d",
`m110 80 ${lineWidth},0 0,80 -${lineWidth},0 0,80 ${lineWidth}, 0 0,80 -${lineWidth},0 0, 80 ${lineWidth},0 0,80 -${lineWidth},0 0,80 ${lineWidth}, 0 0,80 -${lineWidth},0 0, 80 ${lineWidth},0 0,80 -${lineWidth},0 0,80 ${lineWidth}, 0 0,80 -${lineWidth},0 0, 80 ${lineWidth},0 0,80 -${lineWidth},0 0,80 ${lineWidth}, 0 0,80 -${lineWidth},0 0, 80 ${lineWidth},0 0,80 -${lineWidth},0 0,80 ${lineWidth}, 0 0,80 -${lineWidth},0 0, 80 ${lineWidth}, 0`
)
.attr("stroke", "#ededed")
.attr("fill", "none")
.attr("stroke-width", 2);
const pathLength = path.node().getTotalLength();
const pathNode = path.node();
const t = svg.transition().duration(500);
const x = d3
.scaleLinear()
.domain(d3.extent(data, (d) => d.year))
.range([0, pathLength]);
const xYears = d3.scaleLinear().domain(years).range([0, pathLength]);
const dataNew = _.map(dataRaw, (d) => {
return {
...d,
year: +d.year,
xPos: pathNode.getPointAtLength(x(d.year)).x,
yPos: pathNode.getPointAtLength(x(d.year)).y,
color: colorScale(d.cat)
};
});
const uniqueDataCalc = _.map(uniqueData, (d) => {
return {
...d,
year: +d.year,
xPos: pathNode.getPointAtLength(x(d.year)).x,
yPos: pathNode.getPointAtLength(x(d.year)).y
};
});
const r = 5;
const simulation = d3
.forceSimulation(dataNew)
.force(
"x",
d3
.forceX()
.x((d) => d.xPos)
.strength(1)
)
.force(
"y",
d3
.forceY()
.y((d) => d.yPos)
.strength(0.8)
)
.force("collide", d3.forceCollide(r + 1))
.stop();
_.times(1000, () => {
simulation.tick();
});
// years
svg
.selectAll("text")
.data(uniqueDataCalc)
.join("text")
.attr("fill", "#cfcccc")
.attr("x", (d) => d.xPos - 17)
.attr("y", (d) => (d.year > 1939 ? d.yPos + 38 : d.yPos + 30))
.text((d) => d.year);
const circles = svg
.selectAll("circle")
.data(dataNew)
.join("circle")
.attr("cx", (d) => d.x)
.attr("cy", (d) => d.y)
.attr("r", r)
.attr("fill", (d) => d.color)
.attr("stroke", (d) =>
d.gender === "Female African American Firsts" ? "#3e1a24" : "#F8F8F8"
);
//tooltips
circles.on("mouseover", (event, d) => {
const current = event.currentTarget;
d3.select(current)
.raise()
.transition()
.attr("r", r + 3);
tooltip
.style("visibility", "visible")
.style("top", event.y + "px")
.style("left", event.x + "px")
.html(`<div>${d.person} </div> <div>..........<div/> <div>${d.accomplishment} </div>
`);
});
circles.on("mouseout", (event, d) => {
const current = event.currentTarget;
d3.select(current).transition().attr("r", r);
tooltip.style("visibility", "hidden");
});
return svg.node();
}
colorScale = d3.scaleOrdinal().domain(categories).range(colors)
categories = _.chain(data)
.map('cat')
.uniq('cat')
.value()
colors = ["#26192b", "#a770a0", "#d66e70", "#7376d0", "#89d3ab"]
lineWidth = width - 220
uniqueData = _.uniqBy(data, "year")
years = d3.range(1738, 2020)
data = _.map(dataRaw, (d) => {
return {
...d,
year: +d.year
};
})
// data source https://github.com/rfordatascience/tidytuesday/tree/master/data/2020/2020-06-09
dataRaw = FileAttachment("data@7.csv").csv({ typed: true })
style = html`
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montaga&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Montserrat&display=swap" rel="stylesheet">
<style>
body, select, option, text {
font-family: 'Montserrat', sans-serif;
line-height: 1.5;
}
circle {
cursor: pointer;
}
h1, h2 {
font-family: 'Montaga', serif;
}
svg {
background: #F8F8F8;
}
.tooltip {
text-align: center;
color: #878787;
font-family: 'Montserrat', sans-serif;
font-size: 0.9rem;
max-width: 250px;
position: fixed;
background-color: #F8F8F8;
padding: 5px;
pointer-events: none;
transform: translate(-50%, -110%);
box-shadow: 1px 1px 5px rgb(204, 205, 207);
}
.tooltip.main-title {
color: "red"
}
img {
}
</style>
`
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.