2c:null 2d:["$","title",null,{"children":"New Cases | Adam Chazan | Observable"}] 32:T9db,chart = { const root = d3.create("div") .attr("class", "root"); const svg = root.append("svg") .attr("viewBox", [0, 0, width, height]); const tooltip = root .append("div") .attr("class", "cooltip"); svg.append("g") .call(yAxis); // svg.append("path") // .datum(avg) // .attr("fill", color) // .attr("opacity", 0.15) // .attr("d", area); svg.append("g") .attr("fill", "#F5B48F") .attr("opacity", 1) .selectAll("rect") .data(data) .join("rect") .attr("x", (d, i) => x(i+2)) .attr("y", d => y(d.new_cases)) .attr("height", d => y(0) - y(d.new_cases)) .attr("width", x.bandwidth()) .on('mouseover', function (d) { this.classList.add('hovered') d3.select(this) .attr("fill", "#EC7632") .raise() }) .on('mouseout', function() { this.classList.remove('hovered'); d3.select(this) .attr("fill", "#F5B48F") .lower(); tooltip.style('display', 'none'); }); svg.on('mousemove', function() { const rootBounds = root.node().getBoundingClientRect(); const mouseX = d3.event.pageX - rootBounds.left; const displayWidth = rootBounds.right - rootBounds.left const transformRatio = width / displayWidth; const heightTransformRatio = height / (rootBounds.bottom - rootBounds.top); console.log(heightTransformRatio); let eachBand = x.step(); let i = Math.floor((mouseX * transformRatio - margin.left)/eachBand-2); let a = avg[i]; let d = data[i]; tooltip .style('top', (y(a.new_cases)/heightTransformRatio-100) + 'px') .style('left', (mouseX + 90 <= displayWidth ? (mouseX + 10) : (mouseX - 90)) + 'px') .style('display', 'block') let node = tooltip.node(); node.innerHTML = ""; node.appendChild(getTooltipContents(d)); }); svg.append("path") .datum(avg) .attr("fill", "none") .attr("stroke", color) .attr("stroke-width", 3) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("d", line); svg.append("g") .call(xAxis) .select('.domain').attr("opacity", 0) .select('.tick:first-of-type text').remove() .selectAll('.tick text') .attr('font-size', 15) .attr('font-family', 'Helvetica') .attr('fill', 'gray'); window.addEventListener("resize", () => resized(width, root, svg)); setTimeout(() => resized(width, root, svg), 12); return root.node(); }33:[] 30:{"id":"ed01ed3a4e040344","slug":"new-cases","title":"New Cases","thumbnail":"9278986b8f196a054caf00b361405fc08d6b55b72c434a9f6804491989b03030","access_level":"public","create_time":"$D2020-07-20T05:22:06.257Z","update_time":"$D2020-10-12T02:10:48.832Z","view_time":null,"first_public_time":"$D2020-07-20T21:59:37.971Z","fork":{"id":"33ef1f8b1c7793bb","slug":"colleges","title":"Colleges","owner":{"id":"66b1fb28757b26dc","login":"adamchzn","name":"Adam Chazan"}},"stars":0,"starred":false,"owner":{"type":"team","id":"66b1fb28757b26dc","login":"adamchzn","name":"Adam Chazan","avatar_url":"https://avatars-next.observableusercontent.com/e94e73c3a979df4c4a4f695cbab39b9be67575b46e085ceca4413e319c2fbc21","tier":"starter_2024"},"version":687,"publish_version":687,"role":null,"authored":false,"authors":[{"type":"individual","id":"254eb01f4d862ede","login":"adamchzn","name":"Adam Chazan","avatar_url":"https://avatars-next.observableusercontent.com/e94e73c3a979df4c4a4f695cbab39b9be67575b46e085ceca4413e319c2fbc21","tier":null}],"members":[{"type":"individual","id":"254eb01f4d862ede","login":"adamchzn","name":"Adam Chazan","avatar_url":"https://avatars-next.observableusercontent.com/e94e73c3a979df4c4a4f695cbab39b9be67575b46e085ceca4413e319c2fbc21","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":5,"collection":{"id":"d107462a60fcb0c2","slug":"coronavirus-dashboard","title":"Coronavirus Dashboard","owner":{"id":"66b1fb28757b26dc","login":"adamchzn","name":"Adam Chazan"}},"type":"notebook","body":{"title":"New Cases","cells":[{"id":0,"value":"md`# New Cases`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":20,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":649,"value":"function resized(width, root, svg) {\n let measuredWidth = root.node().getBoundingClientRect().width;\n if (measuredWidth == 0) {\n setTimeout(() => resized(width, root, svg), 12);\n return;\n }\n let scale = width / measuredWidth;\n svg.selectAll(\"line\").attr(\"stroke-width\", scale + \"px\");\n svg.selectAll(\"text\").attr(\"transform\", \"scale(\" + scale + \" \" + scale + \")\");\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":264,"value":"getTooltipContents = d => {\n return html`

\n \n

${d.date.toLocaleDateString(\"en-US\")}

New cases:

${d.new_cases}

`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":266,"value":"html` \n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":359,"value":"area = d3.area()\n .curve(curve)\n .x((d, i) => x(i+2)+3)\n .y0(y(0))\n .y1(d => y(d.new_cases))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":360,"value":"curve = d3.curveLinear","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":175,"value":"line = d3.line()\n .defined(d => !isNaN(d.new_cases))\n .x((d, i) => x(i+2)+3)\n .y(d => y(d.new_cases))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":180,"value":"avg = data.map(rollingAvg).filter(d => d != null)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":21,"value":"data = Object.assign(await d3.csv(\"https://raw.githubusercontent.com/prayaggordy/D3-covid-map/master/data/md_statewide.csv\", d3.autoType)).map(({date, new_cases}) => ({date, new_cases: +new_cases}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":164,"value":"function rollingAvg (b, index, array) {\n let count = 0;\n for (let i = 0; i < 7; ++i) {\n if (index - i < 0)\n return {...b, new_cases: count/i}\n count += array[index - i].new_cases;\n };\n return {...b, new_cases: count/7};\n };","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":570,"value":"xDate = d3.scaleUtc()\n .domain(d3.extent(data, d => d.date))\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":23,"value":"x = d3.scaleBand()\n .domain(d3.range(data.length+2))\n .range([margin.left, width - margin.right])\n .padding(0.1)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":25,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(data, d => d.new_cases)+6]).nice()\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":447,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(xDate).ticks(width / 150).tickSize(0))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":29,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisRight(y)\n .ticks(height / 50, data.format)\n .tickSize(0))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.selectAll(\".tick:not(:first-of-type) line\")\n .attr(\"stroke-dasharray\", \"2,2\")\n .attr(\"stroke-opacity\", d => d === 1 ? null : 0.25)\n .attr(\"x2\", width - margin.left - margin.right))\n .call(g => g.selectAll(\".tick text\")\n .attr(\"x\", 4)\n .attr(\"dy\", -4))\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", 44)\n .attr(\"text-anchor\", \"start\")\n .text(\" \" + \"cases\"))\n .call(g => g.select(\".tick:first-of-type text\").remove())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":31,"value":"color = \"#E05F15\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":33,"value":"height = 200","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":619,"value":"width = 550","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":35,"value":"margin = ({top: 20, right: 10, bottom: 20, left: 0})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":37,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 31:"$30:body"