29:null 2a:["$","title",null,{"children":"COVID-19: Imprisoned or In Prisons? | Columbia Dataviz | Observable"}] 2f:T335d,newStateMapChart = { //--------------------------------------Init Information-------------------------------------- const width = 1000; const height = 630; //--------------------------------------Prisons' Projection-------------------------------------- const projection = d3.geoAlbersUsa() .scale(1200) .translate([width/2, height/2]); const radius = d3.scaleSqrt() .domain([0, d3.max(facilities_data_1, d => +d.latest_inmate_population)]) .range([0, 6]); //--------------------------------------Scale Information-------------------------------------- const inputDomain = [0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9]; const legendDomain = ["<10%","10-20%","20-30%","30-40%","50-60%","60-70%","70-80%","80-90%",">90%"] const colorScale = d3.scaleThreshold() .domain(inputDomain) .range(d3.schemeReds[9]); // calculate prison type var arr = [] facilities_data_1.forEach(type => { arr.push(type.facility_type); }); var uniqueSet = new Set(arr); var prisonTypeArr = Array.from(uniqueSet); //const prisonColorScale = d3.scaleOrdinal() //.domain(prisonTypeArr) //.range(d3.schemeCategory10); const path = d3.geoPath().projection(projection); const valuemap = new Map(state_data.map(d => [namemap.get(d.system), d.total_inmate_cases/d.latest_inmate_population])); const floatFormatter=d3.format('.2f') //--------------------------------------Map Information-------------------------------------- const us_map = await d3.json("https://unpkg.com/us-atlas@3.0.0/states-10m.json"); const states = topojson.feature(us_map, us_map.objects.states); const statemap = new Map(states.features.map(d => [d.id, d])); const statemesh = topojson.mesh(us_map, us_map.objects.states, (a, b) => a !== b); const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto;"); //--------------------------------------Hashmap-------------------------------------- const stateNameMap = {}; states.features.forEach(state => { stateNameMap[state.properties.name] = state.id; }); const statePrisonMap = {"-1":[]};// key: state id, value: Array[nyt_id] const prisonInfoMap = {};// key: nyt_id, value: Prison Info facilities_data_1.forEach(prison => { const stateId = stateNameMap[prison.facility_state]; const nyt_id = prison.nyt_id; if(!statePrisonMap.hasOwnProperty(stateId)){ statePrisonMap[stateId] = []; } statePrisonMap[stateId].push(nyt_id);// create state to prison map prisonInfoMap[nyt_id] = prison;// store prison info }); //--------------------------------------Compute BBox-------------------------------------- const bboxInfo = {}; bboxInfo["-1"] = {x:width/2, y:height/2, r:Math.min(width/2, height/2)}; const stateFeature = states.features; const blockStateList = ["American Samoa", "Guam", "Commonwealth of the Northern Mariana Islands", "Puerto Rico", "United States Virgin Islands"] stateFeature.forEach(feature => { let minX = Infinity; let minY = Infinity; let maxX = -Infinity; let maxY = -Infinity; const coordinatesArray = feature.geometry.coordinates coordinatesArray.forEach(coordinate => { // some of US land can not be projected to current map correctly // we need to exclude them from our calculation. Otherwise, the projection function will collapse if (blockStateList.includes(feature.properties.name)){ return; } if (coordinatesArray.length == 1){ coordinate.forEach(point => { const x = projection(point)[0]; const y = projection(point)[1]; minX = Math.min(minX, x); minY = Math.min(minY, y); maxX = Math.max(maxX, x); maxY = Math.max(maxY, y); }) }else{ coordinate[0].forEach(point => { const x = projection(point)[0]; const y = projection(point)[1]; minX = Math.min(minX, x); minY = Math.min(minY, y); maxX = Math.max(maxX, x); maxY = Math.max(maxY, y); }) } }) let centerX = (maxX-minX)/2+minX; let centerY = (maxY-minY)/2+minY; let maxR = Math.max(maxX-minX, maxY-minY)/2; bboxInfo[feature.id] = {x:centerX, y:centerY, r:maxR, id:feature.id}; // Store bbox info }); //--------------------------------------Legend-------------------------------------- // svg.append("g") // .attr("transform", "translate(510,10)") // .append(() => Legend(d3.scaleOrdinal() // .domain(legendDomain) // .range(d3.schemeReds[9]), {title: "Infection Rate", width: 400})); //--------------------------------------Map-------------------------------------- // Create map const mapComponents = svg.append("g") .selectAll("path") .data(topojson.feature(us_map, us_map.objects.states).features) .join("path") .attr("fill", d => { return colorScale(valuemap.get(d.id)); }) .attr("id", d => d.id) .attr("stroke", "black") .attr("stroke-weight", 1) .attr("d", path) .on("click", (event, d)=> { // Dispatch click event to bar chart dispatcher.call("clickState", this, d); // Reset previous state & zoom in if (curFocus.x != bboxInfo[d.id].x || curFocus.y != bboxInfo[d.id].y) { resetState(curFocus.id) zoom(event, d); event.stopPropagation(); }else{// click the same state (Go back to the root) resetState(curFocus.id) zoom(event, {id:-1});// go back to root focus event.stopPropagation(); } }) .on("mouseover", function(d) { // --------------------------------------Highlight Border-------------------------------------- d3.select(this).attr("stroke", "black"); d3.select(this).attr("stroke-width", 3); // --------------------------------------Tooltip-------------------------------------- let [x,y] = d3.pointer(d); var xpos = x+20; var ypos = d.offsetY+45; xpos = Math.max(0, xpos); xpos = Math.min(xpos, width - 145); var tgrp = svg.append("g") .attr("id", "tooltip") .attr("transform", (d, i) => `translate(${xpos},${ypos})`); tgrp.append("rect") .attr("width", "145px") .attr("height", "62px") .attr("fill", "white") .attr("stroke", "black") .attr("stroke-weight", 1) tgrp.append("text") .attr("x", 10) .attr("y", 20) .attr("text-anchor", "left") .attr("font-family", "sans-serif") .attr("font-size", "18px") .attr("font-weight", "bold") .attr("fill", "black") .text(`${d.target.__data__.properties.name}`) .append("tspan") .attr("x", 10) .attr("dy", "1.2em") .attr("font-size", "12px") .attr("font-weight", "regular") .text(`Infection Rate: ${floatFormatter(100*valuemap.get(namemap.get(d.target.__data__.properties.name)))+"%"}`); }) .on("mouseout", function(d) { d3.select("#tooltip").remove(); d3.select(this).attr("stroke-width", 1); }); // Create Path // const mapPath = svg.append("path") // .datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b)) // .attr("fill", "none") // .attr("stroke", "yellow") // .attr("stroke-linejoin", "round") // .attr("d", path); // --------------------------------------Zoom-------------------------------------- // svg.on("click", (event) => { // resetState(curFocus.id); // zoom(event, rootFocus); // event.stopPropagation(); // d3.select("#tooltip").remove(); // }); const rootFocus = {x:width/2, y:height/2, r:Math.min(width/2, height/2), id:-1}; let curFocus = rootFocus; let view; zoomTo([rootFocus.x, rootFocus.y, rootFocus.r], -1); function zoomTo(v, id) { const k = width / v[2]; view = v; // Change ViewBox svg.attr("viewBox", [v[0]-v[2], v[1]-v[2], 2*v[2], 2*v[2]]); showPrison(id); } function zoom(event, d){ const focus0 = curFocus; const id = d.id; curFocus = bboxInfo[id]; // update focus // change state color var zoomState = svg.select("path#"+CSS.escape(id)); zoomState.transition() .duration(750) .attrTween("fill", () => d3.interpolateRgb(colorScale(valuemap.get(id)), "lightgray")); // zoom in const transition = svg.transition() .duration(event.altKey ? 6000 : 750) .tween("zoom", d => { const i = d3.interpolateZoom(view, [curFocus.x, curFocus.y, curFocus.r]); return t => zoomTo(i(t), id); }) } // Reset graph when going back to the root view function resetState(id){ // reset color var zoomState = svg.select("path#"+CSS.escape(id)); zoomState.transition() .duration(350) .attr("fill", colorScale(valuemap.get(id))); // remove prison circles svg.selectAll("circle#PrisonCircle").remove(); } // --------------------------------------Show Prison Circles-------------------------------------- function getTextWidth(text, fontSize, fontFamily) { var canvas = document.createElement("canvas"); var context = canvas.getContext("2d"); context.font = fontSize + " " + fontFamily; var metrics = context.measureText(text); return metrics.width; } // Show prison circles for one selected state function showPrison(id){ var statePrisons = statePrisonMap[id]; var prisonData = [] statePrisons.forEach(nyt_id => { prisonData.push(prisonInfoMap[nyt_id]); }); var prisonCircle = svg.selectAll("circle") .data(prisonData) .enter().append("circle") .attr("id", "PrisonCircle") .attr("data", function(d){return JSON.stringify(d);}) .attr("cx", d => projection([d.facility_lng, d.facility_lat])[0]) .attr("cy", d => projection([d.facility_lng, d.facility_lat])[1]) .attr("r", d => radius(d.latest_inmate_population)) .attr("fill", d => colorScale(d.total_inmate_cases/d.latest_inmate_population)) //.attr("fill", d => prisonColorScale(d.facility_type)) .attr("stroke", "black") .attr("stroke-width", 0.5) // --------------------------------------Tooltip-------------------------------------- .on("mouseover", function(d) { // --------------------------------------Highlight Border-------------------------------------- d3.select(this).attr("stroke", "black"); d3.select(this).attr("stroke-width", 1); // --------------------------------------Tooltip-------------------------------------- var data = JSON.parse(d3.select(this).attr("data")); var titleWidth = getTextWidth(data.facility_name, "6px", "sans-serif"); var textWidth = getTextWidth("Total Inmate Cases: "+data.total_inmate_cases, "4px", "sans-serif"); textWidth = Math.max(textWidth, getTextWidth("Facility Type: "+data.facility_type, "4px", "sans-serif")); textWidth = Math.max(titleWidth, textWidth) + 13; var xpos = parseInt(d3.select(this).attr("cx")) - (textWidth/2); var ypos = parseInt(d3.select(this).attr("cy")) + 4; xpos = Math.max(0, xpos); xpos = Math.min(xpos, width - textWidth); var tgrp = svg.append("g") .attr("id", "tooltip") .attr("transform", (d, i) => `translate(${xpos},${ypos})`); tgrp.append("rect") .attr("width", textWidth) .attr("height", "30px") .attr("fill", "white") .attr("stroke", "black") .attr("stroke-weight", 0.5); tgrp.append("text") .attr("x", 5) .attr("y", 8) .attr("text-anchor", "left") .attr("font-family", "sans-serif") .attr("font-size", "5.5px") .attr("font-weight", "bold") .attr("fill", "black") .text(`${data.facility_name}`) .append("tspan") .attr("x", 5) .attr("dy", "1.2em") .attr("font-size", "4px") .attr("font-weight", "light") .text(`Facility Type: ${data.facility_type}`) .append("tspan") .attr("x", 5) .attr("dy", "1.2em") .attr("font-size", "4px") .attr("font-weight", "light") .text(`Population: ${data.latest_inmate_population}`) .append("tspan") .attr("x", 5) .attr("dy", "1.2em") .attr("font-size", "4px") .attr("font-weight", "light") .text(`Inmate Cases: ${data.total_inmate_cases}`) .append("tspan") .attr("x", 5) .attr("dy", "1.2em") .attr("font-size", "4px") .attr("font-weight", "light") .text(`Inmate Deaths: ${data.total_inmate_deaths}`); }) .on("mouseout", function(d) { d3.select("#tooltip").remove(); d3.select(this).attr("stroke-width", 0.5); }); } return svg.node(); }30:T3ad3,barChart = { // Declare the chart dimensions and margins. const width = 700; const height = 700; const marginTop = 20; const marginRight = 0; const marginBottom = 30; const marginLeft = 43; // only keep the top 8 inmate cases data. let data=state_data.sort((a,b) => +b.total_inmate_cases/+b.latest_inmate_population - +a.total_inmate_cases/+a.latest_inmate_population); data = data.slice(0,8); const inputDomain = [0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9]; const colorScale = d3.scaleThreshold() .domain(inputDomain) .range(d3.schemeReds[9]); const valuemap = new Map(state_data.map(d => [namemap.get(d.system), d.total_inmate_cases/d.latest_inmate_population])); const floatFormatter=d3.format('.2f') //--------------------------------Prison Type Map----------------------------------------- const facilitiesMap = new Map(); facilitiesMap.set("Low-security work release", "Low Security Workforce and Jails"); facilitiesMap.set("State work camp", "Low Security Workforce and Jails"); facilitiesMap.set("Jail", "Low Security Workforce and Jails"); facilitiesMap.set("Detention center", "Low Security Workforce and Jails"); facilitiesMap.set("State rehabilitation center", "Rehabilitation and Juvenile Centers"); facilitiesMap.set("State juvenile detention", "Rehabilitation and Juvenile Centers"); facilitiesMap.set("Juvenile detention at jail", "Rehabilitation and Juvenile Centers"); facilitiesMap.set("State prison", "State Prisons"); facilitiesMap.set("State facility", "State Prisons"); facilitiesMap.set("State halfway house", "State Prisons"); facilitiesMap.set("Federal prison", "Federal Prisons"); facilitiesMap.set("Federal halfway house", "Federal Prisons"); const facilityTypes = [ "State Prisons", "Federal Prisons", "Low Security Workforce and Jails", "Rehabilitation and Juvenile Centers" ]; const typeColorScale = d3.scaleOrdinal() .domain(facilityTypes) .range(d3.schemePastel1) //--------------------------------------Wrap Text Function------------------------------ function wrap(text, width) { text.each(function() { var text = d3.select(this), words = text.text().split(/\s+/).reverse(), word, line = [], lineNumber = 0, lineHeight = 1.1, y = text.attr("y"), dy = parseFloat(text.attr("dy")), tspan = text.text(null) .append("tspan") .attr("x", 0) .attr("y", y) .attr("font-size", "14px") .attr("dy", dy + "em"); while (word = words.pop()) { line.push(word); tspan.text(line.join(" ")); if (tspan.node().getComputedTextLength() > width) { line.pop(); tspan.text(line.join(" ")); line = [word]; tspan = text.append("tspan") .attr("x", 0) .attr("y", y) .attr("dy", ++lineNumber * lineHeight + dy + "em") .text(word); } } }); } //------------------------------draw bar chart---------------------------------- // Create the SVG container. const svg = d3.create("svg") .attr("id", "BarChart") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width+100, height]) .attr("style", "max-width: 100%; height: auto;"); // Legend for bar chart function swatches(scale, items, svg, x, y, curStateId) { const legendX = width - 160; const legendY = marginTop; for (var i = 0; i < items.length; i++) { var tgrp = svg.append("g") .attr("id", `bar-graph-swatches-${i}`) .attr("transform", `translate(${legendX + (100 * (i % 2))}, ${legendY + 68 * Math.floor(i / 2)})`); tgrp.append("rect") .attr("width", "30px") .attr("height", "30px") .attr("fill", scale(items[i])) tgrp.append("text") .attr("x", 0) .attr("y", 35) .attr("text-anchor", "left") .attr("dominant-baseline", "left") .attr("font-family", "sans-serif") .attr("fill", "black") .attr("dy", "1.2em") .attr("font-size", "14px") .attr("font-weight", "regular") .text(items[i]) .call(wrap, 100); } } function renderBarChart(data){ // Declare the x (horizontal position) scale. const x = d3.scaleBand() .domain(d3.groupSort(data, ([d]) => -(+d.total_inmate_cases/+d.latest_inmate_population), (d) => d.system)) // descending frequency .range([marginLeft, width - marginRight]) .padding(0.1); // Declare the y (vertical position) scale. const y = d3.scaleLinear() .domain([0, 1]) .range([height - marginBottom, marginTop]); function getTextWidth(text, fontSize, fontFamily) { var canvas = document.createElement("canvas"); var context = canvas.getContext("2d"); context.font = fontSize + " " + fontFamily; var metrics = context.measureText(text); return metrics.width; } const yAxisFormat = d3.format(".0%"); // Add a rect for each bar. const bars = svg.selectAll("rect") .data(data) .join("rect") .attr("x", (d) => x(d.system)) .attr("width", x.bandwidth()) .attr("data", function(d){return JSON.stringify(d);}) .attr("id", "bar") .attr("fill", d => { // console.log(d); // if(d.hasOwnProperty("facility_type")){ // return typeColorScale(facilitiesMap(d.facility_type)); // }else{ // let value = d.total_inmate_cases / d.latest_inmate_population; // return colorScale(value); // } return typeColorScale(facilitiesMap.get(d.facility_type)); }) .on("mouseover", function(d) { var xpos = parseInt(d3.select(this).attr("x")) + 4; var ypos = parseInt(d3.select(this).attr("y")) + 6; var data = JSON.parse(d3.select(this).attr("data")); if(data.hasOwnProperty("facility_type")){ var titleWidth = getTextWidth(data.facility_name, "20px", "sans-serif"); var textWidth = getTextWidth("Facility Type: "+data.facility_type, "12px", "sans-serif"); textWidth = Math.max(getTextWidth("Facility Type: "+data.facility_type, "12px", "sans-serif")); textWidth = Math.max(titleWidth, textWidth) + 10; xpos = Math.max(0, xpos); xpos = Math.min(xpos, width - textWidth); var tgrp = svg.append("g") .attr("id", "tooltip") .attr("transform", (d, i) => `translate(${xpos},${ypos})`); tgrp.append("rect") .attr("width", textWidth) .attr("height", "82px") .attr("fill", "white") .attr("stroke", "black") .attr("stroke-weight", 1) tgrp.append("text") .attr("x", 10) .attr("y", 20) .attr("text-anchor", "left") .attr("font-family", "sans-serif") .attr("font-size", "16px") .attr("font-weight", "bolder") .attr("fill", "black") .text(`${data.system}`) .append("tspan") .attr("x", 10) .attr("dy", "1.4em") .attr("font-size", "12px") .attr("font-weight", "regular") .text(`Facility Type: ${data.facility_type}`) .append("tspan") .attr("x", 10) .attr("dy", "1.4em") .attr("font-size", "12px") .attr("font-weight", "regular") .text(`Inmate Cases: ${data.total_inmate_cases}`) .append("tspan") .attr("x", 10) .attr("dy", "1.4em") .attr("font-size", "12px") .attr("font-weight", "regular") .text(`Inmate Deaths: ${data.total_inmate_deaths}`); }else{ var titleWidth = getTextWidth(data.facility_name, "18px", "sans-serif"); var textWidth = getTextWidth("Population: "+data.latest_inmate_population, "12px", "sans-serif"); textWidth = Math.max(textWidth, getTextWidth("Inmate Cases: "+data.total_inmate_cases, "12px", "sans-serif")); textWidth = Math.max(titleWidth, textWidth) + 20; xpos = Math.max(0, xpos); xpos = Math.min(xpos, width - textWidth); ypos = Math.min(ypos, height - 26); var tgrp = svg.append("g") .attr("id", "tooltip") .attr("transform", (d, i) => `translate(${xpos},${ypos})`); tgrp.append("rect") .attr("width", textWidth) .attr("height", "82px") .attr("fill", "white") .attr("stroke", "black") .attr("stroke-weight", 1) tgrp.append("text") .attr("x", 10) .attr("y", 20) .attr("text-anchor", "left") .attr("font-family", "sans-serif") .attr("font-size", "16px") .attr("font-weight", "bolder") .attr("fill", "black") .text(`${data.system}`) .append("tspan") .attr("x", 10) .attr("dy", "1.4em") .attr("font-size", "12px") .attr("font-weight", "regular") .text(`Population: ${data.latest_inmate_population}`) .append("tspan") .attr("x", 10) .attr("dy", "1.4em") .attr("font-size", "12px") .attr("font-weight", "regular") .text(`Inmate Cases: ${data.total_inmate_cases}`) .append("tspan") .attr("x", 10) .attr("dy", "1.4em") .attr("font-size", "12px") .attr("font-weight", "regular") .text(`Inmate Deaths: ${data.total_inmate_deaths}`) } }) .on("mouseout", function(d) { d3.select(this).attr("stroke", null); // remove border d3.select("#tooltip").remove(); }) .transition() .duration(1000) .ease(d3.easeLinear) .attr("y", (d) => y(Math.min(1, d.total_inmate_cases / d.latest_inmate_population))) .attr("height", (d) => y(0) - y(Math.min(1, d.total_inmate_cases / d.latest_inmate_population))) if (curStateId !== -1 && curStateId != null) { swatches(typeColorScale, facilityTypes, svg, 180, 10, curStateId); } // Add the x-axis and label. svg.select("#x-axis").remove();// remove the previously added x axis const xaxis = svg.append("g") .attr("id", "x-axis") .attr("transform", `translate(0,${height - marginBottom})`) .call(d3.axisBottom(x).tickSizeOuter(0)) .transition() .duration(1000) .call(d3.axisBottom(x).tickSizeOuter(0)) .attr("font-weight", 500) .attr("font-size", "14px") .on("end", () => { xaxis.selectAll(".tick text").call(wrap, x.bandwidth()) }); // Add the y-axis and label, and remove the domain line. svg.select("#y-axis").remove(); const yaxis = svg.append("g") .attr("id", "y-axis") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y).tickFormat(yAxisFormat)) .attr('font-size', "14px") // .call(g => g.select(".domain").remove()) .call(g => g.append("text") .attr("x", -marginLeft) .attr("y", 10) .attr("fill", "currentColor") .attr("text-anchor", "start") .text("Infection Rate")) .attr("font-weight", 600) .attr('font-size', "14px") .transition() .duration(1000); yaxis.select("text") .attr("x", -marginLeft + 10) .attr("y", marginTop); //Avg US infection rate line: 9% svg.append("line") .attr("x1", marginLeft) .attr("x2", width - marginRight) .attr("y1", y(0.09)) .attr("y2", y(0.09)) .attr("stroke", "#E67C00") .attr("stroke-width", 2) .attr("stroke-dasharray", "5,5"); const textString = "Average U.S. Infection Rate: 9%"; const fontSize = 14; const textWidth = textString.length * (fontSize / 2); const textHeight = fontSize * 1.2; svg.append("rect") .attr("x", marginLeft + 225 - textWidth) .attr("y", y(0.1) - textHeight + 2) .attr("width", textWidth + 8) .attr("height", textHeight) .attr("font-weight", 600) .attr("fill", "white") .attr("opacity", 0.7); // Label for the US average infection rate line svg.append("text") .attr("x", marginLeft + 225) .attr("y", y(0.1)) .attr("text-anchor", "end") .text(textString) .attr("font-family", "sans-serif") .attr("font-size", fontSize + "px") .attr("font-weight", 600) .attr("fill", "#E67C00"); } renderBarChart(data); //---------------------------------update data------------------------------- var curStateId=-1;// -1 indicates the whole country const us_map = await d3.json("https://unpkg.com/us-atlas@3.0.0/states-10m.json"); const states = topojson.feature(us_map, us_map.objects.states); const stateNameMap = {}; states.features.forEach(state => { stateNameMap[state.properties.name] = state.id; }); const statePrisonMap = {"-1":[]};// key: state id, value: Array[nyt_id] const prisonInfoMap = {};// key: nyt_id, value: Prison Info facilities_data_1.forEach(prison => { const stateId = stateNameMap[prison.facility_state]; const nyt_id = prison.nyt_id; if(!statePrisonMap.hasOwnProperty(stateId)){ statePrisonMap[stateId] = []; } statePrisonMap[stateId].push(nyt_id);// create state to prison map prisonInfoMap[nyt_id] = prison;// store prison info }); dispatcher.on("clickState", function(d){ // update data d3.select("#bar-graph-swatches-0").remove(); d3.select("#bar-graph-swatches-1").remove(); d3.select("#bar-graph-swatches-2").remove(); d3.select("#bar-graph-swatches-3").remove(); if(curStateId==d.id){// go back to country part data=state_data.sort((a,b) => b.total_inmate_cases-a.total_inmate_cases); data = data.slice(0,8); curStateId = -1; }else{// show new state prison detail var statePrisons = statePrisonMap[d.id]; var prisonData = [] statePrisons.forEach(nyt_id => { prisonData.push(prisonInfoMap[nyt_id]); }); if(d.id!=-1){ prisonData.forEach(d => { d.system = d.facility_name; }); } data=prisonData.sort((a,b) => b.total_inmate_cases-a.total_inmate_cases); data=data.slice(0,8); curStateId=d.id; } renderBarChart(data); }) svg.append("text") .attr("x", width/2) .attr("y", 0) .attr("text-anchor", "middle") .attr("font-family", "sans-serif") .attr("font-weight", 700) .attr("font-size", "18px") .attr("fill", "black") .text("Top 8 Places by Infection Rate and Prison Type"); // Return the SVG element. return svg.node(); }31:T813,heatMapLegend={ const svg=d3.create("svg") .attr("width", 1000) .attr("height", 100); // Create color legend const legendDomain = ["<10%","10-20%","20-30%","30-40%","50-60%","60-70%","70-80%","80-90%",">90%"] svg.append("g") .attr("transform", "translate(450 ,10)") .append(() => Legend(d3.scaleOrdinal() .domain(legendDomain) .range(d3.schemeReds[9]), {title: "COVID19 Infection Rate (Mar 2020 - 2021)", width: 525})); // Create circle legend const radiusScale = d3.scaleSqrt() .domain([0, d3.max(facilities_data_1, d => +d.latest_inmate_population)]) .range([0, 16]); const legendValues = [100, 500, 1000, 2000, 4000]; const x = 250; const y = 40; legendValues.forEach((value, i) => { var circleSize = radiusScale(value); // Calculate circle size based on the radius scale var tgrp = svg.append("g") .attr("id", `circleLegend${i}`) .attr("transform", `translate(${x + (30 * i)}, ${y})`); tgrp.append("circle") .attr("cx", 0) .attr("cy", 0) .attr("r", circleSize) .attr("fill", "white") .attr("stroke-width", 1) .attr('stroke',"gray"); tgrp.append("text") .attr("x", 0) .attr("y", 20) .attr("text-anchor", "middle") .attr('font-size', "12px") .style("font", "10px sans-serif") .text(value); }); // legend title svg.append("text") .attr("x", 250) .attr("y", 20) .attr("text-anchor", "left") .attr("font-family", "sans-serif") .attr("font-size", "12px") .attr("font-weight", "bold") .attr("fill", "black") .text("Inmate Population"); //hover for more info text svg.append("text") .attr("x", 180) .attr("y", 40) .attr("text-anchor", "end") .attr("font-family", "sans-serif") .attr("font-style", "italic") .attr("font-size", "14px") .attr("fill", "dark grey") .text("Hover and click for more info"); return svg.node(); }32:T550,After choosing to explore COVID-19's impact on U.S. prisons, we conducted exploratory data analysis to record outliers and overall trends. In Tableau, Kentrie examined infection trends by location while Emily experimented with visual encodings and inmate case data. Chengke leveraged Observable to prototype heatmap visualizations across states, counties, and individual prisons. Our decision to examine the infection rate of prisons — calculated by dividing the total number of inmate cases by the latest inmate population — prompted us to clean our dataset by excluding prisons that did not report population data. Sam, who joined our team later, investigated these facilities to determine if there were discernible patterns among prisons with no population data (see after writeup). Our initial static concept, a bubble map with circle size encoding inmate population and color denoting infection rate, proved difficult to interpret due to overlapping elements. Although users thought the red dots effectively symbolized the concept of disease spread, they were confused about the overall infection trends. While people appreciated the specificity of the data represented, the absurdly high COVID19 infection rates in U.S. Prisons compared to the average U.S. infection rate of 9% were obscured by the visual clutter of overlapping and minuscule dots. 33:T9b5,staticViz = { const svg = d3.create("svg") .attr("width", 1000) .attr("height", 700) .attr("viewBox", [100, 100, 1000, 700]) .attr("style", "width: 100%; height: auto; height: intrinsic;"); const projection = d3.geoAlbersUsa() .scale(1200) .translate([650, 450]); const path = d3.geoPath().projection(projection); const us_map = await d3.json("https://unpkg.com/us-atlas@3.0.0/states-10m.json"); const inputDomain = [0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9]; const displayDomain = ["<10%","10-20%","20-30%","30-40%","50-60%","60-70%","70-80%","80-90%",">90%"] const colorScale = d3.scaleThreshold() .domain(inputDomain) .range(d3.schemeReds[9]); const radius = d3.scaleSqrt([d3.min(facilities_data_1, d => +d.latest_inmate_population), d3.max(facilities_data_1, d => +d.latest_inmate_population)], [1, 5]); svg.append("g") .selectAll("path") .data(topojson.feature(us_map, us_map.objects.states).features) .enter().append("path") .attr("d", path) .attr("fill", "lightgray") .attr("stroke", "white") .lower(); svg.append("g") .attr("transform", "translate(610,110)") .append(() => Legend(d3.scaleOrdinal() .domain(displayDomain) .range(d3.schemeReds[9]), {title: "Infection Rate", width: 450})); //potentially add one more shape for state vs federal prisons svg.selectAll("circle") .data(facilities_data_1) .enter().append("circle") .attr("cx", d => { console.log(d.facility_name); return projection([d.facility_lng, d.facility_lat])[0]; }) .attr("cy", d => projection([d.facility_lng, d.facility_lat])[1]) // .attr("r", d => d.latest_inmate_population/300) .attr("r", d => radius(+d.latest_inmate_population)) .attr("fill", d => colorScale(+d.total_inmate_cases/+d.latest_inmate_population)) .attr("stroke", "brown"); // // Create the legend. // const legend = svg.append("g") // .attr("fill", "#777") // .attr("transform", "translate(800,808)") // .attr("text-anchor", "middle") // .style("font", "10px sans-serif") // .selectAll() // .data(radius.ticks(4).slice(1)) // .join("g"); // legend.append("circle") // .attr("fill", "none") // .attr("stroke", "black") // .attr("cy", d => -radius(d)) // .attr("r", 6); return svg.node(); } //inspired by bubble map: https://observablehq.com/@d3/bubble-map/2?intent=fork34:T321e,stateMapChart = { //--------------------------------------Init Information-------------------------------------- const width = 975; const height = 710; //--------------------------------------Prisons' Projection-------------------------------------- const projection = d3.geoAlbersUsa() .scale(1200) .translate([width/2, height/2]); const radius = d3.scaleSqrt([d3.min(facilities_data_1, d => d.latest_inmate_population), d3.max(facilities_data_1, d => d.latest_inmate_population)], [0.2, 2]); //--------------------------------------Scale Information-------------------------------------- const legendDomain = ["<2k", "2k-4k", "4k-6k", "6k-8k", "8k-10k", "10k-12k", "12k-14k", "14k-16k", ">16k"]; const threshold = [2000, 4000, 6000, 8000, 10000, 12000, 14000, 16000]; const inputDomain = [0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9]; const colorScale = d3.scaleThreshold() .domain(threshold) .range(d3.schemeReds[9]); const colorSizeScale = d3.scaleThreshold() .domain(inputDomain) .range(d3.schemeReds[9]); // calculate prison type var arr = [] facilities_data_1.forEach(type => { arr.push(type.facility_type); }); var uniqueSet = new Set(arr); var prisonTypeArr = Array.from(uniqueSet); const prisonColorScale = d3.scaleOrdinal() .domain(prisonTypeArr) .range(d3.schemeCategory10); const path = d3.geoPath().projection(projection); const valuemap = new Map(state_data.map(d => [namemap.get(d.system), d.total_inmate_cases])); //--------------------------------------Map Information-------------------------------------- const us_map = await d3.json("https://unpkg.com/us-atlas@3.0.0/states-10m.json"); const states = topojson.feature(us_map, us_map.objects.states); const statemap = new Map(states.features.map(d => [d.id, d])); const statemesh = topojson.mesh(us_map, us_map.objects.states, (a, b) => a !== b); const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto;"); //--------------------------------------Hashmap-------------------------------------- const stateNameMap = {}; states.features.forEach(state => { stateNameMap[state.properties.name] = state.id; }); const statePrisonMap = {"-1":[]};// key: state id, value: Array[nyt_id] const prisonInfoMap = {};// key: nyt_id, value: Prison Info facilities_data_1.forEach(prison => { const stateId = stateNameMap[prison.facility_state]; const nyt_id = prison.nyt_id; if(!statePrisonMap.hasOwnProperty(stateId)){ statePrisonMap[stateId] = []; } statePrisonMap[stateId].push(nyt_id);// create state to prison map prisonInfoMap[nyt_id] = prison;// store prison info }); //--------------------------------------Compute BBox-------------------------------------- const bboxInfo = {}; bboxInfo["-1"] = {x:width/2, y:height/2, r:Math.min(width/2, height/2)}; const stateFeature = states.features; const blockStateList = ["American Samoa", "Guam", "Commonwealth of the Northern Mariana Islands", "Puerto Rico", "United States Virgin Islands"] stateFeature.forEach(feature => { let minX = Infinity; let minY = Infinity; let maxX = -Infinity; let maxY = -Infinity; const coordinatesArray = feature.geometry.coordinates coordinatesArray.forEach(coordinate => { // some of US land can not be projected to current map correctly // we need to exclude them from our calculation. Otherwise, the projection function will collapse if (blockStateList.includes(feature.properties.name)){ return; } if (coordinatesArray.length == 1){ coordinate.forEach(point => { const x = projection(point)[0]; const y = projection(point)[1]; minX = Math.min(minX, x); minY = Math.min(minY, y); maxX = Math.max(maxX, x); maxY = Math.max(maxY, y); }) }else{ coordinate[0].forEach(point => { const x = projection(point)[0]; const y = projection(point)[1]; minX = Math.min(minX, x); minY = Math.min(minY, y); maxX = Math.max(maxX, x); maxY = Math.max(maxY, y); }) } }) let centerX = (maxX-minX)/2+minX; let centerY = (maxY-minY)/2+minY; let maxR = Math.max(maxX-minX, maxY-minY)/2; bboxInfo[feature.id] = {x:centerX, y:centerY, r:maxR, id:feature.id};// Store bbox info }); //--------------------------------------Legend-------------------------------------- svg.append("g") .attr("transform", "translate(510,10)") .append(() => Legend(d3.scaleOrdinal() .domain(legendDomain) .range(d3.schemeReds[9]), {title: "Infected Population", width: 400})); //--------------------------------------Map-------------------------------------- // Create map const mapComponents = svg.append("g") .selectAll("path") .data(topojson.feature(us_map, us_map.objects.states).features) .join("path") .attr("fill", d => { return colorScale(valuemap.get(d.id)); }) .attr("id", d => d.id) .attr("stroke", "black") .attr("stroke-weight", 1) .attr("d", path) .on("click", (event, d)=> { if (curFocus.x != bboxInfo[d.id].x || curFocus.y != bboxInfo[d.id].y) { resetState(curFocus.id) zoom(event, d); event.stopPropagation(); }else{// click the same state (Go back to the root) resetState(curFocus.id) zoom(event, {id:-1});// go back to root focus event.stopPropagation(); } }) .on("mouseover", function(d) { // --------------------------------------Highlight Border-------------------------------------- d3.select(this).attr("stroke", "#000"); d3.select(this).attr("stroke-width", 3); // --------------------------------------Tooltip-------------------------------------- var xpos = d.offsetX+40; var ypos = d.offsetY+40; var tgrp = svg.append("g") .attr("id", "tooltip") .attr("transform", (d, i) => `translate(${xpos},${ypos})`); tgrp.append("rect") .attr("width", "140px") .attr("height", "62px") .attr("fill", "white") .attr("stroke", "black") .attr("stroke-weight", 1) tgrp.append("text") .attr("x", 10) .attr("y", 20) .attr("text-anchor", "left") .attr("font-family", "sans-serif") .attr("font-size", "18px") .attr("font-weight", "bold") .attr("fill", "black") .text(`${d.target.__data__.properties.name}`) .append("tspan") // second text line .attr("x", 10) .attr("dy", "1.2em") .attr("font-size", "12px") .attr("font-weight", "regular") .text(`Count: ${valuemap.get(namemap.get(d.target.__data__.properties.name))}`); }) .on("mouseout", function(d) { d3.select("#tooltip").remove(); d3.select(this).attr("stroke-width", 1); }); // Create Path // const mapPath = svg.append("path") // .datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b)) // .attr("fill", "none") // .attr("stroke", "yellow") // .attr("stroke-linejoin", "round") // .attr("d", path); // --------------------------------------Zoom-------------------------------------- svg.on("click", (event) => zoom(event, rootFocus)); const rootFocus = {x:width/2, y:height/2, r:Math.min(width/2, height/2), id:-1}; let curFocus = rootFocus; let view; zoomTo([rootFocus.x, rootFocus.y, rootFocus.r], -1); function zoomTo(v, id) { const k = width / v[2]; view = v; // Change ViewBox svg.attr("viewBox", [v[0]-v[2], v[1]-v[2], 2*v[2], 2*v[2]]); // // change state color // var zoomState = svg.select("path#"+CSS.escape(id)); // zoomState.transition() // .duration(500) // .attrTween("fill", () => d3.interpolateRgb(colorScale(valuemap.get(id)), "lightgray")); showPrison(id); } function zoom(event, d){ const focus0 = curFocus; const id = d.id; curFocus = bboxInfo[id]; // update focus // change state color var zoomState = svg.select("path#"+CSS.escape(id)); zoomState.transition() .duration(750) .attrTween("fill", () => d3.interpolateRgb(colorScale(valuemap.get(id)), "lightgray")); // zoom in const transition = svg.transition() .duration(event.altKey ? 6000 : 750) .tween("zoom", d => { const i = d3.interpolateZoom(view, [curFocus.x, curFocus.y, curFocus.r]); return t => zoomTo(i(t), id); }) } // Reset graph when going back to the root view function resetState(id){ // reset color var zoomState = svg.select("path#"+CSS.escape(id)); zoomState.transition() .duration(350) .attr("fill", colorScale(valuemap.get(id))); // remove prison circles svg.selectAll("circle#PrisonCircle").remove(); } // --------------------------------------Show Prison Circles-------------------------------------- function getTextWidth(text, fontSize, fontFamily) { var canvas = document.createElement("canvas"); var context = canvas.getContext("2d"); context.font = fontSize + " " + fontFamily; var metrics = context.measureText(text); return metrics.width; } // Show prison circles for one selected state function showPrison(id){ var statePrisons = statePrisonMap[id]; var prisonData = [] statePrisons.forEach(nyt_id => { prisonData.push(prisonInfoMap[nyt_id]); }); var prisonCircle = svg.selectAll("circle") .data(prisonData) .enter().append("circle") .attr("id", "PrisonCircle") .attr("data", function(d){return JSON.stringify(d);}) .attr("cx", d => projection([d.facility_lng, d.facility_lat])[0]) .attr("cy", d => projection([d.facility_lng, d.facility_lat])[1]) .attr("r", d => radius(d.latest_inmate_population)) // .attr("fill", d => colorSizeScale(d.total_inmate_cases/d.latest_inmate_population)) .attr("fill", d => prisonColorScale(d.facility_type)) // --------------------------------------Tooltip-------------------------------------- .on("mouseover", function(d) { // --------------------------------------Highlight Border-------------------------------------- d3.select(this).attr("stroke", "brown"); d3.select(this).attr("stroke-width", 1); // --------------------------------------Tooltip-------------------------------------- var xpos = parseInt(d3.select(this).attr("cx")) + 4; var ypos = parseInt(d3.select(this).attr("cy")) + 4; var data = JSON.parse(d3.select(this).attr("data")); var titleWidth = getTextWidth(data.facility_name, "6px", "sans-serif"); var textWidth = getTextWidth("Total Inmate Cases: "+data.total_inmate_cases, "4px", "sans-serif"); textWidth = Math.max(textWidth, getTextWidth("Prison Type: "+data.facility_type, "4px", "sans-serif")); textWidth = Math.max(titleWidth, textWidth) + 10; var tgrp = svg.append("g") .attr("id", "tooltip") .attr("transform", (d, i) => `translate(${xpos},${ypos})`); tgrp.append("rect") .attr("width", textWidth) .attr("height", "26px") .attr("fill", "white") .attr("stroke", "black") .attr("stroke-weight", 0.5); tgrp.append("text") .attr("x", 5) .attr("y", 8) .attr("text-anchor", "left") .attr("font-family", "sans-serif") .attr("font-size", "6px") .attr("font-weight", "bold") .attr("fill", "black") .text(`${data.facility_name}`) .append("tspan") // second text line .attr("x", 5) .attr("dy", "1.2em") .attr("font-size", "4px") .attr("font-weight", "light") .text(`Prison Type: ${data.facility_type}`) .append("tspan") // second text line .attr("x", 5) .attr("dy", "1.2em") .attr("font-size", "4px") .attr("font-weight", "light") .text(`Total Inmate Cases: ${data.total_inmate_cases}`) .append("tspan") // second text line .attr("x", 5) .attr("dy", "1.2em") .attr("font-size", "4px") .attr("font-weight", "light") .text(`Total Inmate Death: ${data.total_inmate_deaths}`); }) .on("mouseout", function(d) { d3.select("#tooltip").remove(); d3.select(this).attr("stroke-width", 0); }); } return svg.node(); }35:Tbd0, For our final visualization, we continued using state-level aggregation, providing a clear, initial overview with color-coded states reflecting the infection rate. Users could dive deeper into specific prison data clicking and zooming into states. To complement this, our accompanying bar chart highlighted individual prisons with the highest infection rates, color-coded by facility types and framed against the national average. Emily focused on creating interactive tooltips, axis labeling and legends, and hover effects that invited users to click on the heat map. Chengke worked on zoom features, linking the heat map with the bar graph, and integrating the visual displays. Sam created the swatches legend for the bar graph and fixed bugs while Kentrie supported and recorded our process for the project. ### Challenges After solving the specificity display and the normalized percentage value issues, navigating data presentation and accuracy became the crux of our challenges. A significant hurdle was developing algorithms for the precise positioning of prisons on our heat map, along with the laborious process of data cleaning. We had to exclude prisons that did not report any population to ensure the integrity of our infection rate calculations. Otherwise we would have infinity% infection rates. We also had rigorous discussions on how to group the prison facility types to best show the correlation between levels of security, funding, and management and infection rates. We decided to group by security level, and discovered that state prisons, the highest security level holding the most dangerous criminals, frequently appear among the top eight prisons in every state for infection rates. ### User Feedback Summary - Users loved exploring their own states, which the interactivity features accommodated for very well. - Many users found the zoom features difficult to adjust to, especially in terms of zooming out. If we had another week to improve our visualization, we would implement a more intuitive semantic zoom that lets the user zoom in as close as they want to individual prisons, which would also solve the overlapping prisons issue. To reduce over-plotting, we could lower the opacity of fill, reduce size (attempted), bin (kind of did with state-level view) or add jitter (recently discovered from Thursday reading). - Users are interested in seeing the lowest infected rates of prisons and its correlations with prison type. - See usability test feedback below for more details! ### Resources Used: **Data: ** https://github.com/nytimes/covid-19-data/tree/master/prisons **Avg Infection Rates: ** https://www.nytimes.com/interactive/2021/04/10/us/covid-prison-outbreak.html **Observable / Design: ** https://observablehq.com/@d3/bubble-map/2?intent=fork https://observablehq.com/@observablehq/d3-u-s-map https://faculty.washington.edu/ajko/books/design-methods/how-to-evaluate-empirically.html See the rest of our EDAs and Tests below! Enjoy and thank you for reading!36:Ta52,### Usability Tests Record: 1. _Luana_: She noticed the colors of the heat map first, which led them to inspect our infection rate legend - this is great as that's the first encoding we want users to notice. She immediately asked about the time frame of the data and where the data was from, which encouraged us to add in the time frame in the title of our visualization. After looking at the infection rate legend, she began wondering about our circle size legend and where the circles - a question soon solved after she realized she could interact with the heat map. She liked exploring her own state and remarked that it was difficult to compare prison size across different states. When the bar graph began changing, she was confused on the differences between prison facility types. 2. _Icko_: She first noticed the title and dark red states in the visualization, then was impressed by the tooltips. She found the visualization easy to navigate. She was confused by the varying sizes and colors of circles and thought they represented general COVID hotspots within states until she hovered over them. She tried unsuccessfully to zoom in on circles and bars by pinching the trackpad or double-clicking, and was unsure why we chose to only show eight prisons in the bar chart. She missed reading the label names of the prisons on the bar chart initially and thought that the x-axis of the bar chart was tedious to read. 3. _Zhijing_: He used the interactivity features just as we expected. He clicked on individual prisons, expecting that he could zoom into individual prisons to see even more information. Unfortunately, we didn't have that function. He noticed that he could still see the tooltip of each state when zoomed in, which should probably be obscured when zoomed in. Also, he helped us find a bug of our visualization: the prison circles do not disappear upon zooming out if the user clicks directly on the circle instead of the state area (fixed). 4. _Shivanstra_: He clicked on the state he was from immediately to learn about the infection rates. However, after viewing the bar graph, he noticed that some of the tooltip names were cut off on the bottom as some prisons have very long names that we hadn't noticed previously. He instinctively tried to press “Escape” to zoom out but this didn’t work, and neither did zooming via the trackpad. He did eventually realize you had to click on the state again to zoom out. He liked the animations and the bar graph, but was more critical of the state map, as there is no clear indication of where the bubbles are and some of them overlap which made them difficult to click.37:T78e,countyMapChart = { // const color = d3.scaleQuantize([1, 10], d3.schemeBlues[9]); // const colorScale = d3.scaleOrdinal(d3.schemeReds[9]).range() // const inputDomain = ["<100", "100-200", "200-300", "300-400", "400-500", "500-600", "600-700", "700-800", ">800"]; const inputDomain = [100, 200, 300, 400, 500, 600, 700, 800] const colorScale = d3.scaleThreshold() .domain(inputDomain) .range(d3.schemeReds[9]) const path = d3.geoPath(); const valuemap = new Map(facilities_data.map(d => [d.facility_county_fips, d.total_inmate_cases])); const counties = topojson.feature(us, us.objects.counties); const states = topojson.feature(us, us.objects.states); const statemap = new Map(states.features.map(d => [d.id, d])); const statemesh = topojson.mesh(us, us.objects.states, (a, b) => a !== b); const svg = d3.create("svg") .attr("width", 975) .attr("height", 610) .attr("viewBox", [0, 0, 975, 610]) .attr("style", "max-width: 100%; height: auto;"); svg.append("g") .attr("transform", "translate(510,10)") .append(() => Legend(colorScale, {title: "Infected Population", width: 400})); svg.append("g") .selectAll("path") .data(topojson.feature(us, us.objects.counties).features) .join("path") .attr("fill", d => { if(valuemap.has(d.id)){ return colorScale(valuemap.get(d.id)); } else{ return d3.color("white"); } }) .attr("stroke", "black") .attr("stroke-weight", 1) .attr("d", path) // .append("title") // .text(d => `${d.properties.name}, ${statemap.get(d.id.slice(0, 2)).properties.name}\n${valuemap.get(d.id)}%`); svg.append("path") .datum(topojson.mesh(us, us.objects.states, (a, b) => a !== b)) .attr("fill", "none") .attr("stroke", "black") .attr("stroke-linejoin", "round") .attr("d", path); return svg.node(); }38:T1297,bubbleChart = { const svg = d3.create("svg") .attr("width", 1300) .attr("height", 900) .attr("viewBox", [0, 0, 1300, 900]) .attr("style", "max-width: 100%; height: auto;") const formatter = d3.format(".2s");// format number into K display const bubbleSizeMap = new Map(state_data_lung.map(d => [d.system, d.latest_inmate_population/1100])) const legendDomain = ["<2k", "2k-4k", "4k-6k", "6k-8k", "8k-10k", "10k-12k", "12k-14k", "14k-16k", ">16k"]; const threshold = [2000, 4000, 6000, 8000, 10000, 12000, 14000, 16000] const colorScale = d3.scaleThreshold() .domain(threshold) .range(d3.schemeReds[9]) const lungImage = await (await FileAttachment("hand_painted_lung@2.svg")).url() // ------------------------------- [section 1] this part creates grid and axis to help relocate bubbles ---------------------------- // var x = d3.scaleLinear() // .domain([0, 1300]) // .range([0, 1300]); // var y = d3.scaleLinear() // .domain([0, 900]) // .range([0, 900]); // const xAxisGrid = d3.axisBottom(x).tickSize(-900).tickFormat(''); // const yAxisGrid = d3.axisLeft(y).tickSize(-1300).tickFormat(''); // svg.append('g') // .attr('class', 'x axis-grid') // .attr('transform', 'translate(0,' + 900 + ')') // .call(xAxisGrid); // svg.append('g') // .attr('class', 'y axis-grid') // .call(yAxisGrid); // // Draw the axis // svg // .append("g") // .attr("transform", "translate(0,0)") // .call(d3.axisBottom(x)); // svg // .append("g") // .attr("transform", "translate(40,0)") // .call(d3.axisLeft(y)); // --------------------------------------------[section 1] end --------------------------------------------- // lung image svg.append("image") .attr("xlink:href", d => lungImage) .attr("x", 0) .attr("y", 0) .attr("width", 1300) .attr("height", 900) .attr("transform", "translate(0,100)") // create legend const legend = svg.append("g") .attr("transform", "translate(850,100)") .append(() => Legend(d3.scaleOrdinal() .domain(legendDomain) .range(d3.schemeReds[9]), {title: "Number of Confirmed Cases", width: 400})); // bubbles const bubble = svg.selectAll("circle") .data(state_data_lung) .enter().append("circle") .attr("fill", d => colorScale(d.total_inmate_cases)) .attr("cx", d => d.x) .attr("cy", d => d.y) .attr("r", d => bubbleSizeMap.get(d.system)) .attr("transform", "translate(0,100)") .on("mouseover", function(d) { // add highlight border d3.select(this).attr("stroke", "#000"); d3.select(this).attr("stroke-width", 2); // Get this bubble's x/y values var xpos = d.offsetX+20; var ypos = d.offsetY+100; // Create the tooltip label as an SVG group `tgrp` with a text and a rect inside var tgrp = svg.append("g") .attr("id", "tooltip") .attr("transform", (d, i) => `translate(${xpos},${ypos})`); tgrp.append("rect") .attr("width", "160px") .attr("height", "62px") .attr("fill", "white") .attr("stroke", "black") .attr("stroke-weight", 1) tgrp.append("text") .attr("x", 10) .attr("y", 20) .attr("text-anchor", "left") .attr("font-family", "sans-serif") .attr("font-size", "18px") .attr("font-weight", "bolder") .attr("fill", "black") .text(`${d.target.__data__.system}`) .append("tspan") // second text line .attr("x", 10) .attr("dy", "1.4em") .attr("font-size", "12px") .attr("font-weight", "regular") .text(`Latest Population: ${formatter(d.target.__data__.latest_inmate_population)}`) .append("tspan") // second text line .attr("x", 10) .attr("dy", "1.4em") .attr("font-size", "12px") .attr("font-weight", "regular") .text(`Inmate Cases: ${formatter(d.target.__data__.total_inmate_cases)}`); }) .on("mouseout", function(d) { d3.select(this).attr("stroke", null); // remove border d3.select("#tooltip").remove(); }) .on("click",(event, d) => { }) // svg.selectAll(".state-text") // .data(state_data) // .enter().append("text") // .attr("class", "state-text") // .attr("x", d => d.x) // .attr("y", d => d.y) // .attr("transform", "translate(0,100)") // .attr("text-anchor", "middle") // .attr("dominant-baseline", "middle") // .attr("font-size", "12px") // .attr("font-weight", "regular") // .attr("fill", "white") // .text(d => formatter(d.latest_inmate_population)); return svg.node(); }39:[{"id":"d92a0efebe3f3464e11a0b3aba72570c534abcd8b11984ecabbd8b412d51ad8ba4cc58f17e44c604f7aec0bb03fe8a7b2ec7a9d97f0a036aeeedbde80ffc8fca","href":"https://static.observableusercontent.com/files/d92a0efebe3f3464e11a0b3aba72570c534abcd8b11984ecabbd8b412d51ad8ba4cc58f17e44c604f7aec0bb03fe8a7b2ec7a9d97f0a036aeeedbde80ffc8fca","name":"Scatterplot 2.png","type":"image/png","lastModified":1708619991276.858,"size":406634},{"id":"c953c355b4c2fdbdc3000bfca200ecc430cae78c93ffe7861028b3bba38a4a029cfbc6aeb0048a45b37baa8b43197dd5ad6a4394d56c80ae66eec3951fb0ebdd","href":"https://static.observableusercontent.com/files/c953c355b4c2fdbdc3000bfca200ecc430cae78c93ffe7861028b3bba38a4a029cfbc6aeb0048a45b37baa8b43197dd5ad6a4394d56c80ae66eec3951fb0ebdd","name":"Tableau Heatmap.png","type":"image/png","lastModified":1708619765703.468,"size":773741},{"id":"d4ccb31d19ae35b491075efedd1cc80bd9db5be87876efc12a3ae4234563791b66f8848d0e3a07f708482bd78fba78e9df838e22be640c86fb450b1031e03481","href":"https://static.observableusercontent.com/files/d4ccb31d19ae35b491075efedd1cc80bd9db5be87876efc12a3ae4234563791b66f8848d0e3a07f708482bd78fba78e9df838e22be640c86fb450b1031e03481","name":"hand_painted_lung@2.svg","type":"image/svg+xml","lastModified":1708569155358.012,"size":25063},{"id":"9c03b9b7fc2ea0f87bd0d3dfd488e1e38ba970fe2d84152a130856352d0357d1fc21cd386e1520510023d080662eb63d6d5469363ce4830da8e4a2f61201a8ef","href":"https://static.observableusercontent.com/files/9c03b9b7fc2ea0f87bd0d3dfd488e1e38ba970fe2d84152a130856352d0357d1fc21cd386e1520510023d080662eb63d6d5469363ce4830da8e4a2f61201a8ef","name":"systems-22.csv","type":"text/csv","lastModified":1710882848395.53,"size":2881},{"id":"d7e1148d3c2044b760018ceeb63247419c28bd0b2b4fd1245cac45be02c2b5299b6cb447a69a79bedc74e7df92a077795af89ea4df651cb82839c0625d150169","href":"https://static.observableusercontent.com/files/d7e1148d3c2044b760018ceeb63247419c28bd0b2b4fd1245cac45be02c2b5299b6cb447a69a79bedc74e7df92a077795af89ea4df651cb82839c0625d150169","name":"systems-22@1.csv","type":"text/csv","lastModified":1710884081161.016,"size":2670},{"id":"eea11483cacd4fd737943da6369f114209d0c8a97d59ba1aae7b87145507500dbaedb956fec07382ed1dd2299cf64645c11b36b11dba7f6706146762641c7e6a","href":"https://static.observableusercontent.com/files/eea11483cacd4fd737943da6369f114209d0c8a97d59ba1aae7b87145507500dbaedb956fec07382ed1dd2299cf64645c11b36b11dba7f6706146762641c7e6a","name":"facilities-1@1.csv","type":"text/csv","lastModified":1710948767984.731,"size":208357},{"id":"6b1776f5a0a0e76e6428805c0074a8f262e3f34b1b50944da27903e014b409958dc29b03a1c9cc331949d6a2a404c19dfd0d9d36d9c32274e6ffbc07c11350ee","href":"https://static.observableusercontent.com/files/6b1776f5a0a0e76e6428805c0074a8f262e3f34b1b50944da27903e014b409958dc29b03a1c9cc331949d6a2a404c19dfd0d9d36d9c32274e6ffbc07c11350ee","name":"counties-albers-10m.json","type":"application/octet-stream","lastModified":1708460257000.665,"size":795407},{"id":"7c94aa93283fc02d3c38cdfcc5a02f9b790630c77fcb63685a925cc185459c243c0f6019b3fbc729c6d56dddf89ed14600a15378905da853c8212e476f1b8498","href":"https://static.observableusercontent.com/files/7c94aa93283fc02d3c38cdfcc5a02f9b790630c77fcb63685a925cc185459c243c0f6019b3fbc729c6d56dddf89ed14600a15378905da853c8212e476f1b8498","name":"facilities.csv","type":"text/csv","lastModified":1708460494120.862,"size":331467},{"id":"2b0952d5aa29483c4cc64d96f2d941347cda89252b37ca3efd6e4803af3c8a940cf722073d0b48ee3c575c5cc6957367bf188ea649dc2b4504780d77a58bd26c","href":"https://static.observableusercontent.com/files/2b0952d5aa29483c4cc64d96f2d941347cda89252b37ca3efd6e4803af3c8a940cf722073d0b48ee3c575c5cc6957367bf188ea649dc2b4504780d77a58bd26c","name":"Tableau Boxchart.png","type":"image/png","lastModified":1708619889139.629,"size":267356},{"id":"e3c76b234e45fed896fbb2545fd4d3d87b3465b4439674d9bede44575480ab0b553dd307412be392c05f15706126b35fb098f87994345aeb9575e497ac89b44b","href":"https://static.observableusercontent.com/files/e3c76b234e45fed896fbb2545fd4d3d87b3465b4439674d9bede44575480ab0b553dd307412be392c05f15706126b35fb098f87994345aeb9575e497ac89b44b","name":"Tableau Scatterplot.png","type":"image/png","lastModified":1708619975512.69,"size":411664},{"id":"b26906a1e07c69ad3d371517ceae40c72ff2b589f15fd56862d6e5ccfe854da1c02c2c826ba54e697057f622f9d0208a61f272da4c5689afc9572fcc031ce7d3","href":"https://static.observableusercontent.com/files/b26906a1e07c69ad3d371517ceae40c72ff2b589f15fd56862d6e5ccfe854da1c02c2c826ba54e697057f622f9d0208a61f272da4c5689afc9572fcc031ce7d3","name":"A.4.1 Tableau Symbol Map.png","type":"image/png","lastModified":1708623136709.653,"size":649719},{"id":"1f1b9f59b992240d406ab65e1f9e3831bded1add49a4e1911a1012d18ec4c20666384ed75a2ddd7f6cc5641ef45a676e222cd551d5d090c4c2f5d766564c4dec","href":"https://static.observableusercontent.com/files/1f1b9f59b992240d406ab65e1f9e3831bded1add49a4e1911a1012d18ec4c20666384ed75a2ddd7f6cc5641ef45a676e222cd551d5d090c4c2f5d766564c4dec","name":"A.4.1 Tableau Map.png","type":"image/png","lastModified":1708623144382.796,"size":482924},{"id":"1147af43229227efc19eb1773955d562adf8f6c54d607c18b3fb0ec2477bf96bd11cb057911278858dc56463f35d99c9934e0e8eee11ea8cc6c763b64002465e","href":"https://static.observableusercontent.com/files/1147af43229227efc19eb1773955d562adf8f6c54d607c18b3fb0ec2477bf96bd11cb057911278858dc56463f35d99c9934e0e8eee11ea8cc6c763b64002465e","name":"A.4.1 Tableau Bubble Map.png","type":"image/png","lastModified":1708623160764.897,"size":313146},{"id":"9c439ef31229e0e6820348626e2befc1b617f6b020000e1e16b019d67204fc765825d693080049df12e56b6819fa5e512f3c69a01c9855cc05f43a45193b1e69","href":"https://static.observableusercontent.com/files/9c439ef31229e0e6820348626e2befc1b617f6b020000e1e16b019d67204fc765825d693080049df12e56b6819fa5e512f3c69a01c9855cc05f43a45193b1e69","name":"state_covid_count.png","type":"image/png","lastModified":1708625569729.306,"size":16996},{"id":"15a6c29f453dfc2c27169294be356e10a98396774ca2c656a0340f76d440adc10bea3063a1a91f68298e1f900bf23012bf14c1236b9c52e057fa730134f9d46f","href":"https://static.observableusercontent.com/files/15a6c29f453dfc2c27169294be356e10a98396774ca2c656a0340f76d440adc10bea3063a1a91f68298e1f900bf23012bf14c1236b9c52e057fa730134f9d46f","name":"Userflow.jpeg","type":"image/jpeg","lastModified":1708627936701.318,"size":834705}] 2d:{"id":"89d891cd580c732b","slug":null,"title":"COVID-19: Imprisoned or In Prisons?","thumbnail":"93c5e82f6357984aed6195b40e769f2ffd14d9a4a782edc9184d4565b1223562","access_level":"public","create_time":"$D2024-02-20T20:17:37.000Z","update_time":"$D2025-03-11T19:34:12.125Z","view_time":null,"first_public_time":"$D2024-03-31T00:56:42.925Z","fork":{"id":"e6b14a27aef67561","slug":"d3-u-s-map","title":"D3 U.S. map","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":1,"starred":false,"owner":{"type":"team","id":"7a615336d5b186de","login":"columbia-dataviz","name":"Columbia Dataviz ","avatar_url":"https://avatars-next.observableusercontent.com/bef00fdd2fde3755f8d242e6a6dd04e4535ae9d634d372ec959928e1d95fd9dc","tier":"pro_2024"},"version":2423,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5baeb4a594c1a01f","login":"emily-xia","name":"Emily Xia","avatar_url":"https://avatars-next.observableusercontent.com/0dcab497feb231858cdcfb9dc99fb14c5c6c5d5f46ce2971c2aa2e6d75c3f75e","tier":null}],"members":[{"type":"individual","id":"9c183278c22a18e8","login":"columbiaviz-s22","name":"Columbia Dataviz Labs","avatar_url":"https://avatars-next.observableusercontent.com/1b85e28c29c332ec9fe58275b755c8cd1e52e10997e56fe1d5ad47c0ec8a5eb2","tier":null,"role":"editor"},{"type":"individual","id":"5baeb4a594c1a01f","login":"emily-xia","name":"Emily Xia","avatar_url":"https://avatars-next.observableusercontent.com/0dcab497feb231858cdcfb9dc99fb14c5c6c5d5f46ce2971c2aa2e6d75c3f75e","tier":null,"role":"editor"},{"type":"individual","id":"8a728a7440f448cb","login":"garfield101","name":"GarField","avatar_url":"https://avatars-next.observableusercontent.com/2665f6f8066850fe1cf8339155ed5ca573a0a4e32b76d6573947958b3f353326","tier":null,"role":"editor"},{"type":"individual","id":"8f6f8c7ec8b48c1d","login":"kentrie-tran","name":"Kentrie Tran","avatar_url":"https://avatars-next.observableusercontent.com/9adc54c1f681c1cd0c5aa1242ce4967cad7ca01303fb3adb59f6c3f76e78b0c8","tier":null,"role":"editor"},{"type":"individual","id":"cd6bec750e4a162c","login":"sam674","name":"Sam","avatar_url":"https://avatars-next.observableusercontent.com/fc012c2a503925a828c0b898b3dd97802db490a7d19618e49e2ac59e912584a6","tier":null,"role":"editor"},{"type":"team","id":"7a615336d5b186de","login":"columbia-dataviz","name":"Columbia Dataviz ","avatar_url":"https://avatars-next.observableusercontent.com/bef00fdd2fde3755f8d242e6a6dd04e4535ae9d634d372ec959928e1d95fd9dc","tier":"pro_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"title":"COVID-19: Imprisoned or In Prisons?","cells":[{"id":0,"value":"# COVID-19: Imprisoned or In Prisons?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2240,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2344,"value":"## COVID-19 Infection Rate of Inmates Across U.S. Prisons (Mar 2020-2021)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1274,"value":"twoChart = {\n const width = 1720;\n const height = 710;\n \n const svg = d3.create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"viewBox\", [0, 0, width, height])\n .attr(\"style\", \"max-width: 100%; height: auto;\");\n\n svg.append(()=>heatMapLegend);\n svg.append(()=>newStateMapChart)\n .attr(\"x\", 0)\n .attr('y', 80);\n \n svg.append(()=>barChart)\n .attr(\"x\", 1040)\n .attr(\"y\", 0);\n \n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2168,"value":"Infection Rate = Total Inmate Cases / Latest Prison Population
\n
\nPrison Types are grouped by funding and management, ranked in order of high to low security:
\nState Prisons: State Prison, State Facility, State Halfway House
\nFederal Prisons: Federal Prison, Federal Halfway House
\nLow Security Workforce and Jails: Low Security Work Release, State Work Camp, Low Security Workforce, Jail, Detention Center
\nRehabilitation and Juvenile Centers: State Rehabilitation Center, State Juvenile Detention, Juvenile Detention at Jail
\n
\nIn this interactive visualization, we unearth the drastic effects of COVID-19 on the incarcerated population within the United States, a tale of overlooked vulnerabilities and the human cost of crisis. Compared to the average U.S. COVID-19 infection rate of 9%, the average infection rate in U.S. prisons are 34%, going up to as high as 77% in Arkansas.","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":1262,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1271,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1914,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1269,"value":"dispatcher=d3.dispatch(\"clickState\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":728,"value":"facilities_data_1 = {\n let d = await FileAttachment(\"facilities-1@1.csv\").csv();\n d.latest_inmate_population = +d.latest_inmate_population;\n d.total_inmate_cases = +d.total_inmate_cases; \n d.total_inmate_deaths = +d.total_inmate_deaths;\n d.total_officer_cases = +d.total_officer_cases;\n d.total_officer_deaths = +d.total_officer_deaths;\n \n return d;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2392,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":710,"value":"### Encodings for Heatmap:\n1. **Color** - Infection Rate (Total Inmate Cases / Latest Prison Population)\n2. **Size of Circle** - Latest Inmate Population\n3. **Position** - Longitude and Latitude\n\n### Encodings for Bar Chart:\n1. **X axis** - States, when interacted with becomes Prisons\n2. **Y axis** - Infection Rate\n3. **Color** - When interacted with becomes Facility Types\n \n### Exploratory Questions:\n1. Are prison COVID19 infection rates higher than average US infection rate? We hypothesize that the cramped and often unsanitary US prisons, in which social distancing is not an option and safety is not a priority, will have higher infection rates than average.\n2. How different are the infection rates between different facility types, given that different prison types (e.g. federal vs state) have different security levels, inmate demographics, populations, and treatments?\n3. How correlated are prison infection rates and state infection trends?\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2238,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2246,"value":"## Writeup: Our Journey","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2248,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":872,"value":"### Bubble Map: Infection Rate of Inmates Across U.S. Prisons","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":673,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2271,"value":"\nSo, for our interactive prototype, we decided to retain the specificity but allow for a higher level overview through a state view. Emily drew a user flow graph for possible features, and Chengke implemented the zoom and tooltip features in Observable. However, our use of raw count values instead of infection rate for this prototype was misleading, as it did not accurately represent the severity of outbreaks, particularly in regions with smaller populations. We realized the importance of using normalized percentage values for our choropleth map to provide a clearer and more equitable representation of the data.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":251,"value":"### Interactive State Map Prototype","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":255,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":682,"value":"### User Flow Graph","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":686,"value":"$${await FileAttachment( \"Userflow.jpeg\" ).image()}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2292,"value":"Interactive features our whole group brainstormed could allow user to explore the data on their own and observe trends:
\n1. Infection Rate Toggle (confusing to display and create, so we used a bar graph instead to show the avg U.S. infection rate)
\n2. Filtering for Inmate / Officers (we decided against this since we wanted to focus on inmate data)
\n3. Zoom (implemented)
\n4. Button filters, especially for facility types (changed to brushing and linking with bar graph)
","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":2299,"value":"$35","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2396,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2377,"value":"$36","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2236,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2266,"value":"## EDAs (Chengke): Heatmaps in Observable","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":929,"value":"### Bar Chart: State Count in Each Case Range","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":922,"value":"a41TableauBarChartState = FileAttachment( \"state_covid_count.png\" ).image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":927,"value":"The x-axis indicates the range of confirmed cases. For example, 1000 represents the range [0, 1000], and 2000 represents the range [1000, 2000]. The y-axis represents the number of states with confirmed cases falling into each range. For instance, when x=1000, y=6 indicates that there are 6 states with the number of confirmed cases within the range [0, 1000].
\nThis chart is used to determine the threshold for each color in the legend so that the states are evenly distributed among all colors.","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":677,"value":"### Heatmap: Total Infected Inmates and Officers in Each County","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":145,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2228,"value":"This is a heat map that shows the enitre U.S. but partitions areas based on county. This map shows the total counts of infected inmates and officers combined by county. This is a good visualization for knowing hotspots but may cause the viewer to be overwhelmed by so many areas and become unclear of different state boundaries.","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":47,"value":"path = d3.geoPath()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":104,"value":"states = topojson.mesh(us, us.objects.states, (a, b) => a !== b)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":108,"value":"nation = topojson.feature(us, us.objects.nation)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":101,"value":"counties = topojson.mesh(us, us.objects.counties, (a, b) => a !== b && (a.id / 1000 | 0) === (b.id / 1000 | 0))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13,"value":"us = FileAttachment(\"counties-albers-10m.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"d3_geo = require(\"d3-geo@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":37,"value":"projection = d3_geo.geoAlbersUsa().scale(1300).translate([487.5, 305])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":158,"value":"import {Legend,Swatches} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1777,"value":"import {importjs,importcss} from \"@chomtana/import-external-library\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":163,"value":"us_geo_info = FileAttachment(\"counties-albers-10m.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":161,"value":"facilities_data = {\n let d = await FileAttachment(\"facilities.csv\").csv();\n d.latest_inmate_population = +d.latest_inmate_population; // change to integer type\n d.total_inmate_cases = +d.total_inmate_cases; \n d.total_inmate_deaths = +d.total_inmate_deaths;\n d.total_officer_cases = +d.total_officer_cases;\n d.total_officer_deaths = +d.total_officer_deaths;\n return d;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2054,"value":"state_data_lung = FileAttachment(\"systems-22.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":257,"value":"state_data = FileAttachment(\"systems-22@1.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":261,"value":"namemap = new Map(us_geo_info.objects.states.geometries.map(d => [d.properties.name, d.id]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":328,"value":"### Creative Bubbles Map that Makes Up a Lung: Number of Confirmed COVID Cases for Inmates in Selected States","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":337,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2222,"value":"This visualization was created to show a more creative side, with the lung being drawn out by hand since COVID is a sicknesses that affects the lungs. The circles represent a few select states from the data, becuase using all 50 states would not fit in the visual. The size shows the count of inmates in a state and the color shows the number of COVID cases.","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":2210,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":596,"value":"## EDA (Emily): Interesting Trends and Visual Encodings","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":623,"value":"### Color and Size-Coded Heatmap: Total Inmate COVID Cases within Prison Populations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":599,"value":"$${await FileAttachment( \"Tableau Heatmap.png\" ).image()}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":603,"value":"The size of a circle shows the latest inmate population. The color represents the total inmate cases within the prison. Here is when we realized we wanted to examine infection rate, since infection rate can be shown through size of the circle to encode the population, and the color to show the infection rate (infected cases / total pop). There is a slight issue in being able to clearly show each individual prison due to the similarity of the colors and the overlapping of prisons in a confined area","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":605,"value":"### Box Chart: Inmate vs Officer Cases","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":608,"value":"$${await FileAttachment( \"Tableau Boxchart.png\" ).image()}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":610,"value":"From this visualization, we realized that we wanted to focus on inmate data over officer data, since the correlation between officers and inmate infection rates are unclear and there is more variability in an officer getting infected (since they are not confined in the prison necessarily).\nThe box chart shows the how many inmate cases there are in states by having the count of inmate cases be represented by area. The intensity of color is based on the percentage of officers cases / inmate cases. The size is based on inmate cases. The label shows the name of the state with the total inmate population in the state. ","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":612,"value":"### Scatterplot: Inmate Cases over Deaths","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":615,"value":"$${await FileAttachment( \"Tableau Scatterplot.png\" ).image()}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":621,"value":"After discovering from the boxchart that California has the largest number of inmate cases, I wanted to explore if this number also reflected in the number of inmate deaths. Size = latest inmate population in this county. Color = if this county is in California. State filter and trendline allows you to compare the relationship between inmate cases and deaths in any state.","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":617,"value":"$${await FileAttachment( \"Scatterplot 2.png\" ).image()}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2208,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":661,"value":"## EDA (Kentrie): COVID19 Data over Location ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2202,"value":"### Circle and Heat Map: Total Inmate COVID Cases and Deaths by State","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":630,"value":"a41TableauSymbolMap = FileAttachment(\"A.4.1 Tableau Symbol Map.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2197,"value":"In this graph, both the total number of COVID cases and deaths for inmates were represented. The map of the U.S. serves more of a familiar visual reference of where states are located but can be misleading since states vary in sizes. There is one circle in each state that represents inmate cases based on size and brightness of color based on inmate deaths per state. The brightness of circle color might be a bad choice, since it would be hard to compare light circles of some states to others, and it could be hard to tell the size difference apart from each other.","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":638,"value":"### Heat Map: Total Inmate COVID Cases and Deaths by State","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":631,"value":"a41TableauMap = FileAttachment(\"A.4.1 Tableau Map.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2195,"value":"This is a choropleth map that represents the total number of inmate COVID cases for each state. There are colors from light to dark to represent ranges of raw counts from low to high. A challenge with this was showing raw count values instead of percentages, since large states might have large populations but low infection rates.","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":640,"value":"### Bubble Map: Total Inmate COVID Cases and Deaths by State","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":632,"value":"a41TableauBubbleMap = FileAttachment(\"A.4.1 Tableau Bubble Map.png\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2147,"value":"This is a bubble map that sums up all of the inmate COVID cases and inmate COVID deaths by state. Each bubble represents a state, with its color showing the severity of the total inmate deaths based on the provided legend, and the size of the bubbles showing how many total inmate COVID cases there are in a state. I soon realized that such representation of the data would not be the best, since it is not an effective way to show the severity of the overall infection rate for each state in comparison to one another at a national scale.\n\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":2193,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":2014,"value":"

EDA (Sam): Facilities that Didn't Report Population

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":1419,"value":"facilities_data_original = {\n let d = await FileAttachment(\"facilities.csv\").csv();\n d.latest_inmate_population = +d.latest_inmate_population;\n d.total_inmate_cases = +d.total_inmate_cases; \n d.total_inmate_deaths = +d.total_inmate_deaths;\n d.total_officer_cases = +d.total_officer_cases;\n d.total_officer_deaths = +d.total_officer_deaths;\n d.facility_type = d.facility_type;\n\n d.map(i => i.has_pop_data = i.latest_inmate_population ? 'Reported Inmate Population' : 'No Reported Inmate Population');\n return d;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1641,"value":"facilities_data_no_pop = {\n let d = await FileAttachment(\"facilities.csv\").csv();\n d.latest_inmate_population = +d.latest_inmate_population;\n d.total_inmate_cases = +d.total_inmate_cases; \n d.total_inmate_deaths = +d.total_inmate_deaths;\n d.total_officer_cases = +d.total_officer_cases;\n d.total_officer_deaths = +d.total_officer_deaths;\n d.facility_type = d.facility_type;\n\n d.map(i => i.has_pop_data = i.latest_inmate_population ? 'Reported Inmate Population' : 'No Reported Inmate Population');\n d = d.filter(i => i.has_pop_data === 'No Reported Inmate Population');\n \n return d;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1586,"value":"In the graph below, we plotted the number of prisons that have reported latest inmate population versus those that did not. A sizable portion of the prisons in the data set did not report a latest inmate population. Although we had to remove these outliers in order to calculate infection rate (infected cases / inmate population), we still wanted to visualize the outliers and explore why this non-reporting may have occurred.","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":1682,"value":"Plot.plot({\n marks: [\n Plot.barY(facilities_data_original, {x: \"has_pop_data\", y: 1, sort: {x: \"y\", reverse: false}}),\n Plot.ruleY([0])\n ],\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1725,"value":"The graph below shows the total number of facilities for each facility type, in the subset of data where no latest inmate population was reported.","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":1714,"value":"Plot.plot({\n marks: [\n Plot.barY(facilities_data_original, {x: \"facility_type\", y: 1, sort: {x: \"y\", reverse: false}}),\n Plot.ruleY([0])\n ],\n width: 1900,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1992,"value":"Here are all the facility types of facilities with no reported inmate population:\nInterestingly, although jails are not the largest category, they are missing the most data. State prisons, which are the largest facility category, tend to be well-reported, perhaps due to more funding.","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":1445,"value":"Plot.plot({\n marks: [\n Plot.barY(facilities_data_no_pop, {x: \"facility_type\", y: 1, sort: {x: \"y\", reverse: false}}),\n Plot.ruleY([0])\n ],\n width: 1900,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1707,"value":"The total number of reported deaths and reported cases is much higher in prisons that reported population data. Of course, we have to take into account that the number of prisons that reported population data is a lot higher than those that didn't; however, it is not significantly higher, and the discrepancy is disproportioante. Thus, the unexplained discrepancy leads us to wonder if there is another explanation - perhaps if prisons didn't report population data, they often did not report much else either. It is likely that prisons that did not manage to keep track of the number of inmates would also not be able to have health records for each inmate, as otherwise they could simply count those records.","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":1592,"value":"Plot.plot({\n marks: [\n Plot.barY(facilities_data_original, {x: \"has_pop_data\", y: \"total_inmate_deaths\", sort: {x: \"y\", reverse: false}}),\n Plot.ruleY([0])\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2005,"value":"Plot.plot({\n marks: [\n Plot.barY(facilities_data_original, {x: \"has_pop_data\", y: \"total_inmate_cases\", sort: {x: \"y\", reverse: false}}),\n Plot.ruleY([0])\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2370,"value":"The above graphs show the total inmate cases and deaths for prisons that reported inmate population vs those that did not. As you can see from the first figure in this section, the number of prisons with no reported inmate population is lower than the number of prisons that reported an inmate population; however, this effect is exaggerated in these visualizations. In addition to our above theory, it is also possible that prisons that did not report on their population simply had very low numbers of prisoners.","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"}],"files":"$W39","stdlib":"1","titling":"auto"}} 2e:"$2d:body"