30:Ta4e,chart = { // Declare the chart dimensions and margins. const marginTop = 20; const marginRight = 1; const marginBottom = 40; const marginLeft = 40; const rowHeight = 16; const width = 928; const height = rowHeight * data.names.length + marginTop + marginBottom; // Create the SVG container. const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .attr("viewBox", [0, 0, width, height]) .attr("width", width) .attr("height", height) .attr("style", "max-width: 100%; height: auto;"); // Create the scales. const x = d3.scaleLinear() .domain([d3.min(data.years), d3.max(data.years) + 1]) .rangeRound([marginLeft, width - marginRight]) const y = d3.scaleBand() .domain(data.names) .rangeRound([marginTop, height - marginBottom]) const color = d3.scaleSequentialSqrt([0, d3.max(data.values, d => d3.max(d))], d3.interpolatePuRd); // Append the axes. svg.append("g") .call(g => g.append("g") .attr("transform", `translate(0,${marginTop})`) .call(d3.axisTop(x).ticks(null, "d")) .call(g => g.select(".domain").remove())) .call(g => g.append("g") .attr("transform", `translate(0,${height - marginBottom + 4})`) .call(d3.axisBottom(x) .tickValues([data.year]) .tickFormat(x => x) .tickSize(marginTop + marginBottom - height - 10)) .call(g => g.select(".tick text") .clone() .attr("dy", "2em") .style("font-weight", "bold") .text("Measles vaccine introduced")) .call(g => g.select(".domain").remove())); svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(d3.axisLeft(y).tickSize(0)) .call(g => g.select(".domain").remove()); // Create a cell for each (state, year) value. const f = d3.format(",d"); const format = d => isNaN(d) ? "N/A cases" : d === 0 ? "0 cases" : d < 1 ? "<1 case" : d < 1.5 ? "1 case" : `${f(d)} cases`; svg.append("g") .selectAll("g") .data(data.values) .join("g") .attr("transform", (d, i) => `translate(0,${y(data.names[i])})`) .selectAll("rect") .data(d => d) .join("rect") .attr("x", (d, i) => x(data.years[i]) + 1) .attr("width", (d, i) => x(data.years[i] + 1) - x(data.years[i]) - 1) .attr("height", y.bandwidth() - 1) .attr("fill", d => isNaN(d) ? "#eee" : d === 0 ? "#fff" : color(d)) .append("title") .text((d, i) => `${format(d)} per 100,000 people in ${data.years[i]}`); return Object.assign(svg.node(), {scales: {color}}); }31:[{"id":"b6f6442d639b2aa66deada04456cbba543479325a2e2e22eac7f7dcd0265bc5bff81206b1635fdf775aec6662f2df8605386f5e680c146c1d4c0c11dac5c5851","href":"https://static.observableusercontent.com/files/b6f6442d639b2aa66deada04456cbba543479325a2e2e22eac7f7dcd0265bc5bff81206b1635fdf775aec6662f2df8605386f5e680c146c1d4c0c11dac5c5851","name":"vaccines.json","type":"application/json","lastModified":1580964798257.031,"size":352852}] 2e:{"title":"The impact of vaccines","cells":[{"id":0,"value":"

The impact of vaccines

D3 › Gallery

\n\n# The impact of vaccines\n\nA recreation of [a WSJ graphic](http://graphics.wsj.com/infectious-diseases-and-vaccines/) by Tynan DeBold and Dov Friedman.","pinned":false,"hidden":false,"mode":"md"},{"id":119,"value":"legend({\n color: chart.scales.color,\n title: \"Measles cases per 100,000 people\",\n width: 360\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":3,"value":"data = {\n const names = [\"Alaska\", \"Ala.\", \"Ark.\", \"Ariz.\", \"Calif.\", \"Colo.\", \"Conn.\", \"D.C.\", \"Del.\", \"Fla.\", \"Ga.\", \"Hawaii\", \"Iowa\", \"Idaho\", \"Ill.\", \"Ind.\", \"Kan.\", \"Ky.\", \"La.\", \"Mass.\", \"Md.\", \"Maine\", \"Mich.\", \"Minn.\", \"Mo.\", \"Miss.\", \"Mont.\", \"N.C.\", \"N.D.\", \"Neb.\", \"N.H.\", \"N.J.\", \"N.M\", \"Nev.\", \"N.Y.\", \"Ohio\", \"Okla.\", \"Ore.\", \"Pa.\", \"R.I.\", \"S.C.\", \"S.D.\", \"Tenn.\", \"Texas\", \"Utah\", \"Va.\", \"Vt.\", \"Wash.\", \"Wis.\", \"W.Va.\", \"Wyo.\"];\n const data = await FileAttachment(\"vaccines.json\").json();\n const values = [];\n const year0 = d3.min(data[0].data.values.data, d => d[0]);\n const year1 = d3.max(data[0].data.values.data, d => d[0]);\n const years = d3.range(year0, year1 + 1);\n for (const [year, i, value] of data[0].data.values.data) {\n if (value == null) continue;\n (values[i] || (values[i] = []))[year - year0] = value;\n }\n return {\n values,\n names,\n years,\n year: data[0].data.chart_options.vaccine_year\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":245,"value":"import {legend} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":292,"value":"For a recreation of this chart with [Observable Plot](/plot/)’s concise API, see [this notebook](https://observablehq.com/@observablehq/plot-impact-of-vaccines).","pinned":false,"hidden":false,"mode":"md"}],"files":"$W31","stdlib":"1","titling":"auto"}