43:["$","title",null,{"children":"Negro Population of Georgia By Counties | Kuhu Gupta | Observable"}] 4b:Tfa2,chart = { const svg = d3 .create("svg") .attr("viewBox", [0, 0, svgWidth, svgHeight]) .attr("aria-label", "") .attr("tabindex", 0); svg .append("rect") .attr("width", svgWidth) .attr("height", svgHeight) .attr("fill", "#e5cfbf") .attr("rx", 20) .attr("ry", 20); const centerX = svgWidth / 2; const projection = d3 .geoIdentity() .reflectY(true) .fitWidth(svgWidth / 2, georgiaCounties); const pathGenerator = d3.geoPath(projection); const map1870g = svg .append("g") .attr("transform", (d) => `translate(30,100)rotate(7)`); const map1880g = svg .append("g") .attr( "transform", (d) => `translate(${svgWidth - 370},${svgHeight - 470})rotate(7)` ); const legendGroup1 = svg .append("g") .attr("transform", (d) => `translate(400,160)`); const legendGroup2 = svg .append("g") .attr("transform", (d) => `translate(70,650)`); svg .append("text") .attr("x", centerX) .attr("y", 50) .attr("text-anchor", "middle") .attr("dominant-baseline", "middle") .style("font-family", "myFont") .style("font-size", "24px") .style("font-weight", 500) .style("word-spacing", "5px") // .style("letter-spacing", "0.5px") .text("NEGRO POPULATION OF GEORGIA BY COUNTIES ."); svg .append("text") .attr("x", 475) .attr("y", 550) .style("font-size", "18px") .style("font-weight", 600) .text("1880"); svg .append("text") .attr("x", 100) .attr("y", 120) .style("font-size", "18px") .style("font-weight", 600) .text("1870"); map1870g .selectAll("path") .data(georgiaCounties.features) .join("path") .attr("d", pathGenerator) .attr("id", (d) => `path-${d.properties["NHGISNAM"]}`) .attr("fill", (d) => { const population = d.properties["data1870 ("]; return population ? categories[population]["color"] : "#e0cfba"; }) .attr("stroke", "black") .attr("stroke-width", 0.5) .on("mouseover", (event, d) => handleMouseOver(event, d, '1870')) .on("mouseout", handleMouseOut); map1880g .selectAll("path") .data(georgiaCounties.features) .join("path") .attr("id", (d) => `path-${d.properties["NHGISNAM"]}`) .attr("d", pathGenerator) .attr("fill", (d) => { const population = d.properties["data1880_P"]; return population ? categories[population]["color"] : "#e0cfba"; }) .attr("stroke", "black") .attr("stroke-width", 0.5) .on("mouseover",(event, d) => handleMouseOver(event, d, '1880')) .on("mouseout", handleMouseOut); legendGroup1 .selectAll(".legend") .data(categoryArray.slice(0, 3)) .enter() .append("g") .attr("class", "legend") .attr("transform", function (d, i) { return "translate(0," + i * 70 + ")"; }) .each(function (d, i) { d3.select(this) .append("circle") .attr("r", 15) .attr("fill", d.color) .attr("stroke", "black") .attr("stroke-width", 0.5); d3.select(this) .append("text") .attr("x", 35) .attr("y", 7) .text(d.label.toUpperCase()) .style("font-family", "myFont") .style("font-size", "18px") .style("font-weight", 100); }); legendGroup2 .selectAll(".legend") .data(categoryArray.slice(3, 7)) .enter() .append("g") .attr("class", "legend") .attr("transform", function (d, i) { return "translate(0," + i * 70 + ")"; }) .each(function (d, i) { d3.select(this) .append("circle") .attr("r", 15) .attr("fill", d.color) .attr("stroke", "black") .attr("stroke-width", 0.5); d3.select(this) .append("text") .attr("x", 35) .attr("y", 7) .text(d.label.toUpperCase()) .style("font-family", "myFont") .style("font-size", "18px") .style("font-weight", 100); }); return svg.node(); }4c:T54d,function showBothTooltips(event, d, year) { const countyName = d.properties?.["NHGISNAM"]; const population1870 = d.properties?.["data1870 ("]; const population1880 = d.properties?.["data1880_P"]; const tooltip1870Position = year === "1870" ? { x: event.pageX + 10, y: event.pageY + 30 } : { x: event.pageX - 520, y: event.pageY - 600 }; const tooltip1880Position = year === "1880" ? { x: event.pageX + 10, y: event.pageY + 30 } : { x: event.pageX + 550, y: event.pageY + 650 }; tooltip1870 .html( `

${countyName.toUpperCase()}

` + `
` + `

1870: ${population1870}

` + `

1880: ${population1880}

` ) .style("opacity", 1) .style("left", `${tooltip1870Position.x}px`) .style("top", `${tooltip1870Position.y}px`); tooltip1880 .html( `

${countyName.toUpperCase()}

` + `
` + `

1870: ${population1870}

` + `

1880: ${population1880}

` ) .style("opacity", 1) .style("left", `${tooltip1880Position.x}px`) .style("top", `${tooltip1880Position.y}px`); }4d:[{"id":"f7769de5640b225063b1600282fc02d085fa83d5c43de940b34814b89a9f3a612931878bd6d1f9fd914acec0d1b11973b5f3f25284d834bc0353c5e4375b87d9","href":"https://static.observableusercontent.com/files/f7769de5640b225063b1600282fc02d085fa83d5c43de940b34814b89a9f3a612931878bd6d1f9fd914acec0d1b11973b5f3f25284d834bc0353c5e4375b87d9","name":"georgiaCounties.json","type":"application/json","lastModified":1707542728923.368,"size":17208408},{"id":"61951646b118fd481c8f9b0f85fb85d117f5c5905a74b71296cf56d01f813de97c9b96050ff915e2b2ec9350f11246ebc35b0ba291a59786f53bd9baa4655cc9","href":"https://static.observableusercontent.com/files/61951646b118fd481c8f9b0f85fb85d117f5c5905a74b71296cf56d01f813de97c9b96050ff915e2b2ec9350f11246ebc35b0ba291a59786f53bd9baa4655cc9","name":"RobotoSlab@1.ttf","type":"font/ttf","lastModified":1707703768419.522,"size":249868}] 47:{"id":"17bfba5071ed923a","slug":"negro-population-of-georgia-by-counties","title":"Negro Population of Georgia By Counties","thumbnail":"6f22f9b7b77865c80348d701b4e1c8f29375065f9ead000bdb599c47a8f7507c","access_level":"public","create_time":"$D2024-02-10T05:10:05.660Z","update_time":"$D2024-02-14T23:41:04.737Z","view_time":null,"first_public_time":"$D2024-02-14T23:48:31.689Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"48992f7d0bd4697a","login":"kuhugupta","name":"Kuhu Gupta","avatar_url":"https://avatars-next.observableusercontent.com/7bd52b13072df38d1ddf86260f282ade88aedc450b04576a6d5ff2d3526195b1","tier":"starter_2024","bio":"Data Visualization Engineer","followed_by_you":false,"follows_you":false},"version":399,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"cfc44847aefa41e1","login":"kuhugupta","name":"Kuhu Gupta","avatar_url":"https://avatars-next.observableusercontent.com/7bd52b13072df38d1ddf86260f282ade88aedc450b04576a6d5ff2d3526195b1","tier":null,"bio":"Data Visualization Engineer","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"cfc44847aefa41e1","login":"kuhugupta","name":"Kuhu Gupta","avatar_url":"https://avatars-next.observableusercontent.com/7bd52b13072df38d1ddf86260f282ade88aedc450b04576a6d5ff2d3526195b1","tier":null,"role":"editor"},{"type":"team","id":"48992f7d0bd4697a","login":"kuhugupta","name":"Kuhu Gupta","avatar_url":"https://avatars-next.observableusercontent.com/7bd52b13072df38d1ddf86260f282ade88aedc450b04576a6d5ff2d3526195b1","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"d04b40e5bff8722b","slug":"du-bois-challenge-2024","title":"Du Bois Challenge 2024","owner":{"id":"48992f7d0bd4697a","login":"kuhugupta","name":"Kuhu Gupta"}},"type":"notebook","body":{"titling":"auto","title":"Negro Population of Georgia By Counties","cells":[{"id":0,"value":"# Negro Population of Georgia By Counties\n## My Digital Recreation of a maps presented by [W.E.B. Du Bois](https://en.wikipedia.org/wiki/W._E._B._Du_Bois) at the _Paris Exposition Universelle_ in 1900. [The original plate](https://github.com/ajstarks/dubois-data-portraits/blob/master/challenge/2024/challenge01/original-plate-06.jpg) was drawn with ink and watercolors.\n### Data Source: [Du Bois Challenge Github Repository](https://github.com/ajstarks/dubois-data-portraits/tree/master/challenge/2024/challenge01)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":15,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":299,"value":"function handleMouseOut(d) {\n tooltip1870.style(\"opacity\", 0);\n tooltip1880.style(\"opacity\", 0);\n d3.selectAll(\"path\").attr(\"stroke-width\", 0.5);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":302,"value":"function highlightCorrespondingCounties(countyName, highlight) {\n const selector = `#path-${countyName}`;\n\n d3.selectAll(selector).attr(\"stroke-width\", highlight ? 3 : 0.5);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":236,"value":"function handleMouseOver(event, d, year) {\n const countyName = d.properties[\"NHGISNAM\"];\n\n showBothTooltips(event, d, year);\n highlightCorrespondingCounties(countyName, true);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"tooltip1870 = d3\n .select(\"body\")\n .append(\"div\")\n .attr(\"class\", \"tooltip1870\")\n .style(\"opacity\", 0)\n .style(\"position\", \"absolute\")\n .style(\"background-color\", \"white\")\n .style(\"border\", \"solid\")\n .style(\"border-width\", \"1px\")\n .style(\"border-radius\", \"2px\")\n .style(\"padding\", \"5px\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"tooltip1880 = d3\n .select(\"body\")\n .append(\"div\")\n .attr(\"class\", \"tooltip1880\")\n .style(\"opacity\", 0)\n .style(\"position\", \"absolute\")\n .style(\"background-color\", \"white\")\n .style(\"border\", \"solid\")\n .style(\"border-width\", \"1px\")\n .style(\"border-radius\", \"2px\")\n .style(\"padding\", \"5px\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":17,"value":"## Constants","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":30,"value":"colorMap = ({\n background: \"#e5cfbf\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"svgHeight= 1000;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"svgWidth = 780","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"## Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":12,"value":"georgiaCounties = FileAttachment(\"georgiaCounties.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":137,"value":"categoryArray = Object.values(categories)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"categories = ({\n \"20000 - 30000\": { label: \"BETWEEN 20,000 AND 30,000\", color: \"#342357\" },\n \"15000 - 20000\": { label: \"15,000 TO 20,000\", color: \"#724730\" },\n \"10000 - 15000\": { label: \"10,000 TO 15,000\", color: \"#c39f85\" },\n \"5000 - 10000\": { label: \"5,000 TO 10,000\", color: \"#dd3654\" },\n \"2500 - 5000\": { label: \"2,500 TO 5,000\", color: \"#e59995\" },\n \"1000 - 2500\": { label: \"1,000 TO 2,500\", color: \"#e9b35a\" },\n \"> 1000\": { label: \"UNDER 1,000\", color: \"#5e7060\" }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"## Import","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"1"}} 42:null