31:Tae6,chart = { const svg = d3 .create("svg") .attr("width", chartWidth) .attr("height", height) .attr("viewBox", [0, 0, chartWidth, height]) .style("overflow", "visible") .style("display", "block"); const thresholds = tier.domain(); const x = d3 .scaleLinear() .domain(selectedXRange) .rangeRound([margin.left, chartWidth - margin.right]); svg .append("g") .selectAll("rect") .data(color.domain()) .join("rect") .classed("tier-bar", true) .attr("data-tier", d => d) .attr("data-min", d => tier.invertExtent(d)[0] || 0) .attr("data-max", d => tier.invertExtent(d)[1] || selectedTicks[4]) .attr("x", (d, i) => x(tier.invertExtent(d)[0] || 0)) .attr("y", margin.top) .attr( "width", (d, i) => x(tier.invertExtent(d)[1] || selectedTicks[4]) - x(tier.invertExtent(d)[0] || 0) ) .attr("height", height - margin.top - margin.bottom) .attr("fill", color); if (annoList.includes("Tiers")) { const tierLabels = svg .append("g") .attr("class", "tier-labels") .selectAll("g.tier-label") .data([4, 3, 2, 1]) .join("g") .classed("tier-label", true) .attr( "transform", d => `translate(${x(tier.invertExtent(d)[0] || 0) + 4.5}, ${margin.top + 16.5})` ) .append("text") .text(d => (chartWidth > 400 ? `Tier ${d}` : d)); } if (annoList.includes("Value")) { const topAnno = svg .append("g") .attr("data-value", selectedData[metric]) .attr("class", "top-anno") .attr( "transform", `translate(${x(selectedData[metric])}, ${margin.top * 0.33})` ) .datum(selectedData[metric]); topAnno .append("text") .attr("transform", `translate(0, -5)`) .text(`${selectedMetricFormatter(selectedData[metric])}`); topAnno .append("path") .attr( "d", d3 .symbol() .type(d3.symbolTriangle) .size(symbolSize) ) .attr("transform", `translate(0, 4) rotate(-180)`) .attr("fill", "black"); } const tickAdjust = g => g.selectAll(".tick line").attr("y1", margin.top + margin.bottom - height); svg .append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call( d3 .axisBottom(x) .tickFormat( annoList.includes("Thresholds") ? selectedTickFormatter : '' ) .tickSize(0) .tickValues(selectedTicks) ) .call(tickAdjust) .call(g => g.select(".tick:first-of-type").attr("text-anchor", "start")) .call(g => g.select(".tick:last-of-type").attr("text-anchor", "end")) .call(g => g.select(".domain").remove()); yield svg.node(); }32:[{"id":"e0abcd18008e0306ac61495361efc53a8a3250c8436e21d6f7fda5be427153620cf62ee0290d032d4e489ec9d445d872a40b15f7aecc062a24e970103ce7c54f","href":"https://static.observableusercontent.com/files/e0abcd18008e0306ac61495361efc53a8a3250c8436e21d6f7fda5be427153620cf62ee0290d032d4e489ec9d445d872a40b15f7aecc062a24e970103ce7c54f","name":"2020-10-03.csv","type":"text/csv","lastModified":1601784912171.566,"size":4651}] 2f:{"title":"California coronavirus reopening gauge","cells":[{"id":0,"value":"md`# California coronavirus reopening gauge\n\nThe status of each county in the state’s framework for reopening. Developed for use in the _Los Angeles Times_ piece \"[Tracking coronavirus in California](https://www.latimes.com/projects/california-coronavirus-cases-tracking-outbreak/los-angeles-county/).\"`","pinned":false,"hidden":false,"mode":"ojs"},{"id":532,"value":"md`## ${selectedData.area} County\n\nThe current ${metricNames[metric].toLowerCase()} is ${selectedMetricFormatter(\n selectedData[metric]\n)}, which puts the area in Tier ${tier(selectedData[metric])}. ${getNextStep()}.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":152,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":769,"value":"md`Source: [California Department of Public Health](https://covid19.ca.gov/safer-economy/)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":259,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":276,"value":"md`### Options`","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"viewof area = select({\n options: data.map(d => d.area),\n value: \"Los Angeles\",\n title: \"Area\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"viewof metric = radio({\n options: metricList,\n title: \"Metric\",\n value: \"adjusted_case_rate\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":729,"value":"viewof annoList = checkbox({\n options: [\"Value\", \"Tiers\", \"Thresholds\"],\n title: \"Annotations\",\n value: [\"Value\", \"Tiers\", \"Thresholds\"]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"viewof height = slider({\n min: 60,\n max: 200,\n value: 65,\n step: 1,\n title: \"Height\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":295,"value":"viewof chartWidth = slider({\n min: 150,\n max: width,\n value: Math.min(600, width),\n step: 1,\n title: \"Width\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":479,"value":"viewof symbolSize = slider({\n min: 0,\n max: 200,\n value: 80,\n step: 1,\n title: \"Symbol size\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":776,"value":"viewof barOpacity = slider({\n value: .7,\n title: \"Bar opacity\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":262,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":279,"value":"md`### Code`","pinned":false,"hidden":false,"mode":"ojs"},{"id":107,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":173,"value":"margin = ({ top: 20, left: 0, bottom: 20, right: 5 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":589,"value":"getNextStep = () => {\n const tierNum = tier(selectedData[metric]);\n if (tierNum == 4) {\n return `It must keep the statistic below ${selectedMetricFormatter(\n selectedThreshold[0]\n )} to avoid stricter lockdowns.`;\n } else {\n return `It needs to push that statistic below ${selectedMetricFormatter(\n tier.invertExtent(tierNum)[0]\n )} to advance to Tier ${tierNum + 1}`;\n }\n return tierNum;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":352,"value":"selectedTickFormatter = tickFormatters[metric]","pinned":false,"hidden":false,"mode":"ojs"},{"id":368,"value":"selectedTicks = ticks[metric]","pinned":false,"hidden":false,"mode":"ojs"},{"id":126,"value":"selectedMetricFormatter = metricFormatters[metric]","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"selectedThreshold = thresholds[metric]","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"selectedData = data.find(d => d.area == area)","pinned":false,"hidden":false,"mode":"ojs"},{"id":348,"value":"tickFormatters = ({\n adjusted_case_rate: t => t.toFixed(0),\n positivity_rate: t => `${(t * 100).toFixed(0)}%`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":418,"value":"selectedXRange = xRanges[metric]","pinned":false,"hidden":false,"mode":"ojs"},{"id":501,"value":"metricNames = ({\n adjusted_case_rate: \"Adjusted case rate\",\n positivity_rate: \"Positivity rate\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":363,"value":"ticks = ({\n adjusted_case_rate: [0]\n .concat(tier.domain())\n .concat([selectedData[metric] < 10 ? 10 : Math.ceil(selectedData[metric])]),\n positivity_rate: [0].concat(tier.domain()).concat(0.1)\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":117,"value":"metricFormatters = ({\n adjusted_case_rate: v => `${v.toFixed(1)}`,\n positivity_rate: v => `${(v * 100).toFixed(1)}%`\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"color = d3\n .scaleOrdinal()\n .domain([1, 2, 3, 4])\n .range([\"#802f67\", \"#c43d53\", \"#d97641\", \"#e6b735\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":79,"value":"tier = d3\n .scaleThreshold()\n .domain(selectedThreshold)\n .range([4, 3, 2, 1])","pinned":false,"hidden":false,"mode":"ojs"},{"id":72,"value":"thresholds = ({\n adjusted_case_rate: [1, 4, 7],\n positivity_rate: [0.02, 0.05, 0.08]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":413,"value":"xRanges = ({\n adjusted_case_rate: [\n 0,\n selectedData[metric] < 10 ? 10 : Math.ceil(selectedData[metric])\n ],\n positivity_rate: [\n 0,\n selectedData[metric] > 0.1 ? Math.ceil10(selectedData[metric], -1) : 0.1\n ]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":629,"value":"(Math.ceil10 = function(value, exp) {\n return decimalAdjust('ceil', value, exp);\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":622,"value":"function decimalAdjust(type, value, exp) {\n // If the exp is undefined or zero...\n if (typeof exp === 'undefined' || +exp === 0) {\n return Math[type](value);\n }\n value = +value;\n exp = +exp;\n // If the value is not a number or the exp is not an integer...\n if (isNaN(value) || !(typeof exp === 'number' && exp % 1 === 0)) {\n return NaN;\n }\n // Shift\n value = value.toString().split('e');\n value = Math[type](+(value[0] + 'e' + (value[1] ? +value[1] - exp : -exp)));\n // Shift back\n value = value.toString().split('e');\n return +(value[0] + 'e' + (value[1] ? +value[1] + exp : exp));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":285,"value":"md`### Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"metricList = [\"adjusted_case_rate\", \"positivity_rate\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"data = {\n const csv = await FileAttachment(\"2020-10-03.csv\").csv();\n return csv\n .filter(d => d.area_type == 'county')\n .map(d => {\n metricList.forEach(m => (d[m] = +d[m]));\n return d;\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":282,"value":"md`### Dependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"import { select, slider, checkbox, radio } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"journalize = require(\"journalize\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}