31:Tac5,chart3 = { const width = 600 const height = 400 const margin = 50 const colors = d3.scaleOrdinal(['covid','rest'],['#B22222','#2170B0']) const xScale = d3.scaleBand(data3.map(d => d.group), [0, width]).padding(0.4) const yScale = d3.scaleLinear([0, d3.max(data3, d => d.covid + d.rest)], [height, 0]) const root = d3 .create('svg') .attr('width', width + margin * 2) .attr('height', height + margin * 2) .attr('class', 'covid-chart') const tooltip = d3.select('body') .append('div') .attr('class', 'tooltip tooltip-large') .style('opacity', 0) const svg = root .append('g') .attr('width', width) .attr('height', height) .attr('transform', `translate(${margin}, ${margin})`) const stack = d3.stack().keys(['covid', 'rest']) const chartData = stack(data3) const groups = svg.append('g') .selectAll('g') .data(chartData) .join('g') .style('fill', (d,i) => colors(d.key)) groups.selectAll('rect') .data(d => d) .join('rect') .attr('x', d => xScale(d.data.group)) .attr('y', d => yScale(d[1])) .attr('height', d => yScale(d[0]) - yScale(d[1])) .attr('width', xScale.bandwidth()) .on('mouseover', function(d, i) { d3.select('.tooltip') .style('top', () => { var y = d3.event.y if(i > 100) { return y - 100 + 'px' } else { return y + 20 + 'px' } }) .style('left', d3.event.x + 40 + 'px') .html(`

Group: ${d.data.group}

Due To Covid: ${Math.round((d.data.covid / (d.data.rest + d.data.covid)) * 100)}%

Group: ${d.group}

Deaths: ${d.deaths}

`) .transition() .duration(200) .style('opacity', 1) }) .on('mouseout', function(d, i) { d3.select('.tooltip') .style('opacity', 0) }) var axis = root.append('g').attr('class', 'axis') axis.append('g').attr('class', 'axis x-axis') axis.append('g').attr('class', 'axis y-axis') var xAxis = d3 .axisBottom(xScale) var yAxis = d3 .axisLeft(yScale) .tickPadding(5) var xAxisElements = axis .select('.x-axis') .call(xAxis) .attr('transform', `translate(${margin}, ${height + margin})`) axis .select('.y-axis') .call(yAxis) .attr('transform', `translate(${margin}, ${margin})`) root .append('text') .attr('text-anchor', 'middle') .attr('x', (width + margin * 2) / 2) .attr('y', height + margin * 2 - 10) .style('font-weight', '600') .text(label) return root.node() }33:[] 2f:{"title":"The Impact Of Covid 19 In 2020","cells":[{"id":0,"value":"title = md`# The Impact Of Covid 19 In 2020`","pinned":false,"hidden":false,"mode":"ojs"},{"id":170,"value":"subtitle = md`## Covid 19 Deaths By Age Group`","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"source = md`### [Data Source: CDC Mortality Rates Through 7/18/20](https://www.cdc.gov/nchs/nvss/vsrr/covid_weekly/index.htm#AgeAndSex) `","pinned":false,"hidden":false,"mode":"ojs"},{"id":90,"value":"chart1= simpleBarChart(data1, '#B22222', 'Covid 19 Deaths By Age Group')","pinned":false,"hidden":false,"mode":"ojs"},{"id":117,"value":"chart2 = simpleBarChart(data2, '#2170B0', 'Deaths From Any Cause By Age Group')","pinned":false,"hidden":false,"mode":"ojs"},{"id":141,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"styleDefs = css`\n* {\n box-sizing: border-box;\n}\nbody {\n font-family: Helvetica, Arial, sans-serif;\n}\n.axis path {\n stroke: #DDD;\n}\n.tooltip {\n position: absolute;\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: 70px;\n background: #FFF;\n border: 2px solid #808080;\n border-radius: 4px;\n z-index: 10;\n padding: 5px 10px;\n font-size: 14px;\n}\n.tooltip-small {\n width: 140px;\n}\n.tooltip-small {\n width: 180px;\n}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":99,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"data1 = {\n var url = 'https://gist.githubusercontent.com/benjaminadk/7ef18a883fb8c95142b23c19e4bbd318/raw/1860fb99acf4348c3b722d9774ccc8499ed0d3e1/covid-deaths-by-age-20200724.csv'\n var data = d3.csv(url, ({group, deaths}) => {\n return {\n group: group.replace(' years', '').replace(' year', '').replace('85 and over', 'Over 85').trim(),\n deaths: parseInt(deaths,10)\n }\n })\n return data\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":114,"value":"data2 = {\n var url = 'https://gist.githubusercontent.com/benjaminadk/9461b513719ac63c9ecec1d5ea070e6c/raw/0713da476bc6b64232968ba2488f82bca260cec7/total-deaths-by-age-group.csv'\n var data = d3.csv(url, ({group, deaths}) => {\n return {\n group: group.replace(' years', '').replace(' year', '').replace('85 and over', 'Over 85').trim(),\n deaths: parseInt(deaths,10)\n }\n })\n return data\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":135,"value":"data3 = {\n var data = []\n for(let [i, d] of data1.entries()) {\n data.push({group: d.group, covid: d.deaths, rest: data2[i].deaths - d.deaths})\n }\n return data\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"import {interpolate, css} from '@benjaminadk/the-nba-clutch-gene'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}