31:T1131,chart = { /*** init svg plot ***/ const cp = chart_param, container = html`

`, svg = d3.select(container).append("svg") .attr("width", cp.width) .attr("height", cp.height) .style("position", "absolute"), tooltip = d3.select(container).append("div") .classed("tooltip", true) .style("position", "absolute") .style("width", "105px") .style("height", "100px") .style("top", "0") .style("left", "0") .style("display", "none") .style("opacity", 0), tooltip_sub = tooltip.append("div") .style("background-color", "#333") .style("padding", "1px") .style("border-radius", "3px"); /*** fill in text for tool tip ***/ tooltip_sub.selectAll("p.tooltip-text") .data([{ size: 13, label: "MAINE", spacing: -1 }, { size: 11, label: "1 in 4 prisoners has been infected", spacing: 0}]).enter() .append("p") .classed("tooltip-text", true) .style("font-size", d => `${d.size}px`) .style("font-family", "monospace") .style("letter-spacing", d => `${d.spacing}px`) .style("color", "white") .style("text-align", "center") .style("margin", "2px") .text(d => d.label); tooltip.append("div") .style("width", 0) .style("height", 0) .style("position", "absolute") .style("left", "45px") .style("border-top", "4px solid #333") .style("border-left", "4px solid transparent") .style("border-right", "4px solid transparent"); /*** create state group (containing dots, label, etc.) ***/ const states = svg.selectAll("g.state_group") .data(data).enter() .append("g") .classed("state_group", true) .attr("id", d => d.name_abbr) .attr("transform", d => { return `translate(${cp.margin.left + (d.grid_loc_x - 1) * (cp.state_width + cp.margin.state)}, ${cp.margin.top + (d.grid_loc_y - 1) * (cp.state_width + cp.margin.state)})`; }) .on("mouseover", (e, d) => { console.log(d); tooltip .style("display", "initial") .style("top", `${cp.margin.top + (d.grid_loc_y - 1) * (cp.state_width + cp.margin.state) - (76 + cp.margin.state)}px`) .style("left", `${cp.margin.left + (d.grid_loc_x - 1) * (cp.state_width + cp.margin.state) - (105 - cp.state_width) / 2}px`) .transition() .duration(200) .style("opacity", 1); d3.selectAll("p.tooltip-text") .data([{ label: d.name.toUpperCase() }, { label: `${d.prisoner_case_rate} has been infected` }]) .text(d => d.label); }) .on("mouseout", (e, d) => { tooltip.transition() .duration(200) .style("opacity", 0) .transition() .delay(500) .style("display", "none"); }); // create 100 dots per state, coloring based on the fill_arr we created for (let i = 0; i < 10; i++) { for (let j = 0; j < 10; j++) { states.append("circle") .classed("state_dot", true) .attr("id", d => `${d.name_abbr}-${i}-${j}`) .attr("cx", cp.dot_radius + (cp.dot_radius * 2 + cp.margin.dot) * i) .attr("cy", cp.dot_radius + (cp.dot_radius * 2 + cp.margin.dot) * j) .attr("r", cp.dot_radius) .style("fill", d => d.fill_arr[i + j * 10].fill == 1 ? "#e77455" : "#ddd"); } } // create state label states.append("text") .classed("state_label", true) .attr("id", d => d.name_abbr) .attr("x", cp.state_width / 2) .attr("y", cp.state_width / 2 + cp.margin.dot / 2) .style("font-size", "14px") .style("font-family", "monospace") .style("text-anchor", "middle") .style("alignment-baseline", "middle") .text(d => d.name_abbr); // create hover box (for when to show tooltip) states.append("rect") .classed("state_hover_box", true) .attr("id", d => d.name_abbr) .attr("x", 0) .attr("y", 0) .attr("width", cp.state_width + cp.margin.state) .attr("height", cp.state_width + cp.margin.state) .style("fill", "rgba(0, 0, 0, 0)"); return container; }32:T525,data = data_raw.map(d => { // based on the pct of cases, create an array indicating the number of dots to fill const prisoner_cases_pct = d.prisoner_cases_pct; let fill_arr = Array.from({length: 100}, () => Math.random()) .map((d, i) => ({rand_pct: d, fill: i < (prisoner_cases_pct * 100) ? 1 : 0})) .sort((a, b) => d3.ascending(a.rand_pct, b.rand_pct)) .map((d, i) => ({ix: i, fill: d.fill})); // if dots in center (where labels are), swap with other ones // const swap_spots = d.name_abbr === "FED" ? [43, 44, 45, 46, 53, 54, 55, 56] : [44, 45, 54, 55], const swap_spots = [43, 44, 45, 46, 53, 54, 55, 56], to_swap_ix = fill_arr.filter(d => d.fill == 1 & swap_spots.indexOf(d.ix) >= 0).map(d => d.ix), swap_to_ix = fill_arr.filter(d => d.fill == 0 & swap_spots.indexOf(d.ix) == -1).map(d => d.ix); for (let i = 0; i < to_swap_ix.length; i++) { console.log(i, i * Math.floor((swap_to_ix.length - 1) / to_swap_ix.length)); console.log(to_swap_ix[i], swap_to_ix[i * Math.floor((swap_to_ix.length - 1) / to_swap_ix.length)]); fill_arr[to_swap_ix[i]].fill = 0; fill_arr[swap_to_ix[i * Math.floor((swap_to_ix.length - 1) / to_swap_ix.length)]].fill = 1; } console.log(d.name, to_swap_ix, swap_to_ix); return Object.assign(d, {fill_arr: fill_arr}); });33:[{"id":"1fa1f5308b2f60cc772dae846b22b9e1457629a77479f481f95aa21e8ca07630e4ac4ce4b30f63b58851b7dfc180be31bdf092bff8d27157bdfe476067feeaf0","href":"https://static.observableusercontent.com/files/1fa1f5308b2f60cc772dae846b22b9e1457629a77479f481f95aa21e8ca07630e4ac4ce4b30f63b58851b7dfc180be31bdf092bff8d27157bdfe476067feeaf0","name":"covid_prison_rates@1.csv","type":"text/csv","lastModified":1609529489815.395,"size":3896}] 2f:{"title":"1 in 5 Prisoners in the U.S. Has Had COVID-19","cells":[{"id":0,"value":"md`# 1 in 5 Prisoners in the U.S. Has Had COVID-19\n\nA recreation of [a chart from this article](https://www.themarshallproject.org/2020/12/18/1-in-5-prisoners-in-the-u-s-has-had-covid-19) from The Marshall Project. \n\nThis recreation is purely an exercise to work on my D3/Observable chops.\n\n***`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"md`### Where Prisoners Have the Highest COVID-19 Rates\n\nNine months after states first began testing people in prisons for the coronavirus, some states have seen more than half of all prisoners test positive. In South Dakota, which has the highest infection rate, three out of five prisoners have been infected.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":156,"value":"html`

Source: The Marshall Project and Associated Press weekly data collection. Download the data.

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"chart_param_init = ({\n width: width,\n grid_size: [11, 8],\n margin: {\n top: 80,\n right: 20,\n bottom: 0,\n left: 20,\n state: 5,\n dot: 1,\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"// after manually setting parameters in chart_param_init, \n// various other params will be defined based on those params\nchart_param = {\n const cpi = chart_param_init,\n state_width = (width - cpi.margin.left - cpi.margin.right) / cpi.grid_size[0] - cpi.margin.state,\n dot_radius = (state_width / 10 - cpi.margin.dot) / 2,\n height = (state_width + cpi.margin.state) * cpi.grid_size[1] + cpi.margin.top + cpi.margin.bottom;\n \n return Object.assign(\n chart_param_init, \n {\n state_width: state_width,\n dot_radius: dot_radius,\n height: height\n })\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"md` ## Data\n\nThe data originally comes from [The Marshall Project on data.world](https://data.world/associatedpress/marshall-project-covid-cases-in-prisons).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"data_raw = FileAttachment(\"covid_prison_rates@1.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":229,"value":"md`## Notes + Learnings\n\nSince this was an exercise to work on my D3/Observable chops, I wanted to note a few things I learned or found interest or difficult along the way.\n\n- To make the state labels more readable, it seems like The Marshall Project intentionally made the center dots (those under the state label) not filled. I did the same. It's a minor touch but definitely helps with readability.\n- The Marshall Project's tooltips seem to be made with divs + DOM text elements, which makes it a bit easier for handling text wrapping, page resize, etc. I figured out what seems like a hacky way to recreate this in an Observable notebook, but it gets the job done!\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"d3 = require(\"d3@6\");","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}