31:T639,legend = { const svg = d3.select(DOM.svg(width, 30)); svg .append("circle") .attr("cx", 10) .attr("cy", 15) .attr("r", 7) .style("fill", "#26192b"); svg .append("circle") .attr("cx", 110) .attr("cy", 15) .attr("r", 7) .style("fill", "#a770a0"); svg .append("circle") .attr("cx", 233) .attr("cy", 15) .attr("r", 7) .style("fill", "#89d3ab"); svg .append("circle") .attr("cx", 320) .attr("cy", 15) .attr("r", 7) .style("fill", "#d66e70"); svg .append("circle") .attr("cx", 414) .attr("cy", 15) .attr("r", 7) .style("fill", "#7376d0"); svg .append("circle") .attr("cx", 643) .attr("cy", 15) .attr("r", 7) .style("fill", "#F8F8F8") .style("stroke", "black") .style("stroke-width", "2"); svg .append("text") .attr("x", 23) .attr("y", 20) .text("Religion") .style("font-size", "15px"); svg .append("text") .attr("x", 124) .attr("y", 20) .text("Arts, Sience") .style("font-size", "15px"); svg .append("text") .attr("x", 333) .attr("y", 20) .text("Military") .style("font-size", "15px"); svg .append("text") .attr("x", 428) .attr("y", 20) .text("Law, Politics, Social & Jobs") .style("font-size", "15px"); svg .append("text") .attr("x", 246) .attr("y", 20) .text("Sports") .style("font-size", "15px"); svg .append("text") .attr("x", 655) .attr("y", 20) .text("Female") .style("font-size", "15px"); return svg.node(); }32:Tbed,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(`

${d.person}

..........

${d.accomplishment}

`); }); circles.on("mouseout", (event, d) => { const current = event.currentTarget; d3.select(current).transition().attr("r", r); tooltip.style("visibility", "hidden"); }); return svg.node(); }33:[{"id":"67ad8a73ce5e277fb8cf8bceb6f029d95ead06aa7573518b881468c251b6038cd515e84788e87ea3bee4f6692554b481582ade6899e01fd793a7184cb627d4d6","href":"https://static.observableusercontent.com/files/67ad8a73ce5e277fb8cf8bceb6f029d95ead06aa7573518b881468c251b6038cd515e84788e87ea3bee4f6692554b481582ade6899e01fd793a7184cb627d4d6","name":"data@7.csv","type":"text/csv","lastModified":1645834202554.932,"size":81666}] 2f:{"title":"African American Achievements - Black History Month","cells":[{"id":0,"value":"# African American Achievements - Black History Month \n(hover over circles to read more)","pinned":false,"hidden":false,"mode":"md"},{"id":1037,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":905,"value":"colorScale = d3.scaleOrdinal().domain(categories).range(colors)","pinned":true,"hidden":false,"mode":"ojs"},{"id":910,"value":"categories = _.chain(data)\n .map('cat')\n .uniq('cat')\n .value()","pinned":true,"hidden":false,"mode":"ojs"},{"id":906,"value":"colors = [\"#26192b\", \"#a770a0\", \"#d66e70\", \"#7376d0\", \"#89d3ab\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":577,"value":"lineWidth = width - 220","pinned":true,"hidden":false,"mode":"ojs"},{"id":629,"value":"uniqueData = _.uniqBy(data, \"year\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":599,"value":"years = d3.range(1738, 2020)","pinned":true,"hidden":false,"mode":"ojs"},{"id":123,"value":"data = _.map(dataRaw, (d) => {\n return {\n ...d,\n year: +d.year\n };\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":1111,"value":"// data source https://github.com/rfordatascience/tidytuesday/tree/master/data/2020/2020-06-09","pinned":true,"hidden":false,"mode":"ojs"},{"id":398,"value":"dataRaw = FileAttachment(\"data@7.csv\").csv({ typed: true })","pinned":true,"hidden":false,"mode":"ojs"},{"id":416,"value":"style = html`\n\n\n\n\n`","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}