25:["$","title",null,{"children":"The impact of vaccines | marlow deneal | Observable"}] 49: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}}); }4a:[{"id":"b6f6442d639b2aa66deada04456cbba543479325a2e2e22eac7f7dcd0265bc5bff81206b1635fdf775aec6662f2df8605386f5e680c146c1d4c0c11dac5c5851","href":"https://static.observableusercontent.com/files/b6f6442d639b2aa66deada04456cbba543479325a2e2e22eac7f7dcd0265bc5bff81206b1635fdf775aec6662f2df8605386f5e680c146c1d4c0c11dac5c5851","name":"vaccines.json","type":"application/json","lastModified":1697769707254.207,"size":352852}] 29:{"id":"b748b07eaf342697","slug":null,"title":"The impact of vaccines","thumbnail":"cb42ee9a136cf8cff86d282bc2b07c29bc418cc03357a6154cd23710fc978a72","access_level":"public","create_time":"$D2023-10-20T02:41:47.254Z","update_time":"$D2023-10-20T02:41:47.254Z","view_time":null,"first_public_time":"$D2023-10-20T02:41:47.254Z","has_unpublished_edits":null,"fork":{"id":"fdebcb5d0f4890f4","slug":"the-impact-of-vaccines","title":"The impact of vaccines","owner":{"id":"863951e3ebe4c0ae","login":"d3","name":"D3"}},"stars":0,"starred":false,"owner":{"type":"team","id":"1dd8a7f5cbbe3892","login":"marlow","name":"marlow deneal","avatar_url":"https://avatars-next.observableusercontent.com/74c4b6c1dec20f433604141173d89ecbcc00b42c4df6539eb41e5efb2940bb7d","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":331,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"0fd8cc0ebc06ad87","login":"marlow","name":"marlow deneal","avatar_url":"https://avatars-next.observableusercontent.com/74c4b6c1dec20f433604141173d89ecbcc00b42c4df6539eb41e5efb2940bb7d","tier":null,"bio":"Traditional artist digital artist exploring the wonderful world of today through data visualization art ai exploring creating exploring creating more thank you d3 observable you help me to explore new possibilities 😀 ","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"0fd8cc0ebc06ad87","login":"marlow","name":"marlow deneal","avatar_url":"https://avatars-next.observableusercontent.com/74c4b6c1dec20f433604141173d89ecbcc00b42c4df6539eb41e5efb2940bb7d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":245,"value":"import {legend} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 24:null