2d:null 2e:["$","title",null,{"children":"Day 6: Technology Adaption in the US | Priya | Observable"}] 33:Tc6b,function drawPath(svg, category, step) { const defs = svg.append("defs"); const filter = defs .append("filter") .attr("id", "f1") .attr("x", "0") .attr("y", "0"); filter .append("feGaussianBlur") .attr("in", "SourceGraphic") .attr("stdDeviation", "15"); const g = svg.append("g"); const vtbData = variableThicknessBand({ category, line, attempts: iterations, subdivision: 10, smooth: "weighted" }); g.selectAll("path").remove(); g.selectAll("g").remove(); g.selectAll("circle").remove(); g.attr("transform", `translate(${margin}, ${margin})`); // circles to represent the original data // step 0 g.selectAll("circle.datapoint") .data(category) .join("circle") .attr("class", "datapoint") .attr("cx", (d, i) => scaleX(d.year)) .attr("cy", (d, i) => scaleY(d.value)) .attr("r", radius) .style("fill", step === 0 ? colorHighlight : colorDefault); const node = g .selectAll("g.spine-node") .data(vtbData) .join("g") .attr("class", "spine-node") .attr("transform", (d) => `translate(${d.x}, ${d.y})`); // step 1+ if (step >= 1) { g.append("path") .datum(category) .attr("class", "spine-line") .attr("d", line) .style("fill", "none") .style("stroke", step === 1 ? colorHighlight : colorDefault); } // step 2+ if (step >= 2) { node .append("circle") .attr("class", "anchor") .attr("cx", 0) .attr("cy", 0) .attr("r", 3) .style("fill", step === 2 ? colorHighlight : colorDefault); } // step 3+ if (step >= 3) { node .append("line") .attr("x1", (d) => d.x - d.x0) .attr("x2", (d) => d.x - d.x1) .attr("y1", (d) => d.y - d.y0) .attr("y2", (d) => d.y - d.y1) .style("stroke-dasharray", "1px 1px") .style("stroke-width", "2px") .style("stroke", step > 2 ? colorHighlight : colorDefault); } // step 4+ if (step >= 4) { node .append("circle") .attr("class", "edge") .attr("cx", (d) => d.x - d.x0) .attr("cy", (d) => d.y - d.y0) .attr("r", 2) .style("fill", step > 3 ? colorHighlight : colorDefault); node .append("circle") .attr("class", "edge") .attr("cx", (d) => d.x - d.x1) .attr("cy", (d) => d.y - d.y1) .attr("r", 2) .style("fill", step > 3 ? colorHighlight : colorDefault); } // step 5+ if (step >= 5) { g.append("path") .attr("class", "vtb vtb-inner") .datum(vtbData) .attr("d", area) .style("fill", colorDefault) .style("filter", "url(#f1)") .style("opacity", 0.33); } if (step >= 6) { g.select(".vtb-inner").remove(); g.append("path") .attr("class", "vtb vtb-outer") .datum(vtbData) .attr("d", area) .style("fill", "none") .style("stroke", colorHighlight) .style("stroke-width", "4px"); g.append("path") .attr("class", "vtb vtb-inner") .datum(vtbData) .attr("d", area) .style("fill", colorDefault); g.selectAll("circle").remove(); g.selectAll("line").remove(); } return svg.node(); }34:T102c,function variableThicknessBand({ category, line, attempts = 10, subdivision = 10, smooth = false }) { if (!category || !category.length || !category) return null; const svg = d3.select("body").append("svg"); let segments = []; let path = null; let pathNode = null; let pathLength = 0; let numPoints = 0; let attempt = 0; const getPointAtLength = (l) => { const xy = pathNode.getPointAtLength(l); return [xy.x, xy.y]; }; const getAngleAtLength = (l) => { const a = getPointAtLength(Math.max(l - 0.01, 0)); const b = getPointAtLength(l + 0.01); return Math.atan2(b[1] - a[1], b[0] - a[0]); }; const getThicknessAtLength = (l) => { const last = segments[segments.length - 1]; if (l >= last.length) return last.thickness; const i = segments.findIndex((d) => d.length > l); const index = Math.max(0, i - 1); // no smoothing, we're done if (!smooth) return segments[index].thickness; // smooth between thicknesses based on offset const dA = Math.abs(segments[index].length - l); const dB = Math.abs(segments[index + 1].length - l); const tA = segments[index].thickness; const tB = segments[index + 1].thickness; // simple if (smooth === "simple") return (tA + tB) / 2; // complex if (smooth === "weighted") return (dA / (dA + dB)) * tB + (dB / (dA + dB)) * tA; }; const computePoint = ({ index }) => { const len = (index / numPoints) * pathLength; const thickness = getThicknessAtLength(len); const angle = getAngleAtLength(len); const [x, y] = getPointAtLength(len); const offset = [ Math.cos(angle - Math.PI / 2) * thickness, Math.sin(angle - Math.PI / 2) * thickness ]; const x0 = x + offset[0]; const x1 = x + offset[0] * -1; const y0 = y + offset[1]; const y1 = y + offset[1] * -1; return { index, x, y, angle, x0, x1, y0, y1 }; }; const distanceBetweenAngles = (a, b) => { const dX = Math.cos(a.angle) - Math.cos(b.angle); const dY = Math.sin(a.angle) - Math.sin(b.angle); return Math.sqrt(dX * dX + dY * dY); }; const createPoints = (points) => { attempt += 1; // used cached results if available const result = points.map((p) => { if (p.angle) return p; return computePoint(p); }); // recursive: check if we there are small deltas between angles // if so, return, otherwise recompute with splits // base case: no big deltas const nextPoints = []; let runAgain = false; for (let i = 0; i < result.length - 1; i++) { const a = result[i]; const b = result[i + 1]; const diffIndex = (b.index - a.index) / 2; const deltaAngle = distanceBetweenAngles(a, b); nextPoints.push(a); // delta angle can be from 0-2 (smaller = more similar) if (deltaAngle > 0.5) { nextPoints.push({ index: a.index + diffIndex }); runAgain = true; } } nextPoints.push(result[result.length - 1]); if (runAgain && attempt < attempts) return createPoints(nextPoints); return result; }; const createThicknessSegments = () => { const s = [{ length: 0, thickness: category[0].thickness }]; category.forEach((d, i) => { if (i === 0) return; const prevData = category[i - 1]; const tempPath = svg.append("path").datum([prevData, d]).attr("d", line); const prevSegment = s[i - 1]; const length = prevSegment.length + tempPath.node().getTotalLength(); s.push({ length, thickness: d.thickness }); tempPath.remove(); }); return s; }; // 1. create the path data for line path = svg.append("path").datum(category).attr("d", line); pathNode = path.node(); pathLength = pathNode.getTotalLength(); numPoints = Math.floor(pathLength / subdivision); // 2. provide a thickness lookup based on data segments = createThicknessSegments(); // 3. recursively generate points until complete const start = d3.range(numPoints + 1).map((index) => ({ index })); const snakePoints = createPoints(start); // 4. clean up svg.remove(); return snakePoints; }35:[{"id":"7ccd73d9db037d5846087961d849c7d41ac6212b60456bdb882d288e6380e7ce9b2f39fb404aad772aa81fb209cd821057a5f7d1ee414aad638c0e26310edb92","href":"https://static.observableusercontent.com/files/7ccd73d9db037d5846087961d849c7d41ac6212b60456bdb882d288e6380e7ce9b2f39fb404aad772aa81fb209cd821057a5f7d1ee414aad638c0e26310edb92","name":"technology-adoption-by-households-in-the-united-states.csv","type":"text/csv","lastModified":1649825335496.496,"size":37530},{"id":"50f831a9e8e135c7407ab6093f5fc97fbfa1a2bb52ae96b22448f66ad16dc24f6313c100ff0abe6f149cadab033892a98eab483cebbef9a3f0cc11b35d0453a1","href":"https://static.observableusercontent.com/files/50f831a9e8e135c7407ab6093f5fc97fbfa1a2bb52ae96b22448f66ad16dc24f6313c100ff0abe6f149cadab033892a98eab483cebbef9a3f0cc11b35d0453a1","name":"day6_dark.png","type":"image/png","lastModified":1649831471242.813,"size":301896},{"id":"9a650f8fd0cdc77e8b7a07d95a17f352d827f796727a822bfb49ccc983dd6db1711185a3a8cc208faf56b555709afac1b6af5abf2813585bebfdb0b09c3dbc35","href":"https://static.observableusercontent.com/files/9a650f8fd0cdc77e8b7a07d95a17f352d827f796727a822bfb49ccc983dd6db1711185a3a8cc208faf56b555709afac1b6af5abf2813585bebfdb0b09c3dbc35","name":"OWID_TechnologyUse.png","type":"image/png","lastModified":1649831399786.785,"size":238110},{"id":"5796ea05c2875957059349ce1539b38589ce280340cb710332db12b01e22d2c59ebd65888f0e8955982426f4b3b703ca229aecf188ca13f5f62b959f6359687b","href":"https://static.observableusercontent.com/files/5796ea05c2875957059349ce1539b38589ce280340cb710332db12b01e22d2c59ebd65888f0e8955982426f4b3b703ca229aecf188ca13f5f62b959f6359687b","name":"Screen Shot 2022-04-13 at 2.40.41 AM.png","type":"image/png","lastModified":1649832065825.599,"size":145380}] 31:{"id":"9a5c3a974789cafd","slug":"day-6-technology-adaption-in-the-us","title":"Day 6: Technology Adaption in the US","thumbnail":"7c68a21771b4209e2f512e0904706d4431fa3cb9e302ab5f7c606fb7e25ccf41","access_level":"public","create_time":"$D2022-04-13T04:40:13.874Z","update_time":"$D2022-04-14T19:43:10.836Z","view_time":null,"first_public_time":"$D2022-04-13T06:35:02.644Z","has_unpublished_edits":null,"fork":{"id":"eef3add9b7583473","slug":"variable-thickness-band","title":"Variable Thickness Band","owner":{"id":"6166fda182072050","login":"russellsamora","name":"Russell Samora"}},"stars":4,"starred":false,"owner":{"type":"team","id":"55e4f5b506df3eb3","login":"pmisner","name":"Priya","avatar_url":"https://avatars-next.observableusercontent.com/0f5c4cef9ffaa3856416deff8fc4d56f5003aa9547ee21b9be46a17eba103c07","tier":"starter_2024"},"version":540,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"bfd761aeef223349","login":"pmisner","name":"Priya","avatar_url":"https://avatars-next.observableusercontent.com/0f5c4cef9ffaa3856416deff8fc4d56f5003aa9547ee21b9be46a17eba103c07","tier":null}],"members":[{"type":"individual","id":"bfd761aeef223349","login":"pmisner","name":"Priya","avatar_url":"https://avatars-next.observableusercontent.com/0f5c4cef9ffaa3856416deff8fc4d56f5003aa9547ee21b9be46a17eba103c07","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"9c8233b3741da0d0","slug":"2022-thirty-day-chart-challenge","title":"2022 Thirty Day Chart Challenge","owner":{"id":"55e4f5b506df3eb3","login":"pmisner","name":"Priya"}},"type":"notebook","body":{"title":"Day 6: Technology Adaption in the US","cells":[{"id":0,"value":"# Day 6: Technology Adaption in the US","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":460,"value":"## Background and Inspiration","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":485,"value":"For Day 6 of the #30DayChartChallenge, I was drawn to Our World In Data's chart depicting Share of US Households using specific technologies, 1915-2019.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":489,"value":"\n

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":493,"value":"The chart currently uses color to distinguish the different categories from each other. The styling of the lines, to me, emphasizes how close the technology is to 100% adaption and, as a secondary function, the slope of the line shows how quickly a technology was adapted. \n\nI was really interested in the period of time when a technology was rapidly adopted in the US and wanted to emphasize that on this chart as I redesign it.","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":525,"value":"## Intial Sketches","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":528,"value":"\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":536,"value":"I wanted to change the width of the line as well as the color to emphasize the area of highest change (similar to a heat map) and deemphasize the more stable areas of the line","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":513,"value":"## Posted Chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":509,"value":"I couldn't figure out a quick way to add a gradient of color proportionate to the percent change from the prior year to the path using d3 so, in the interest of time, I did quite a bit of post production in figma to put together the chart I posted:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":497,"value":"\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":503,"value":"## Generated Svgs","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":166,"value":"md`### Chart A: Radio, Color TV and Computers`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":335,"value":"createSvg = {\n const svg = d3.select(DOM.svg(width + margin * 2, height + margin * 2));\n // drawPath(svg, data, 6);\n drawPath(svg, returnData(\"Radio\"), 6);\n drawPath(svg, returnData(\"Colour TV\"), 6);\n // drawPath(svg, returnData(\"Cellular phone\"), 6);\n // drawPath(svg, returnData(\"Landline\"), 6);\n drawPath(svg, returnData(\"Computer\"), 6);\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":481,"value":"md`### Chart B: Landline vs Mobile Phones`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":453,"value":"createSvg2 = {\n const svg = d3.select(DOM.svg(width + margin * 2, height + margin * 2));\n // drawPath(svg, data, 6);\n\n drawPath(svg, returnData(\"Cellular phone\"), 6);\n drawPath(svg, returnData(\"Landline\"), 6);\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":323,"value":"## Style Variables","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":99,"value":"viewof radius = slider({\n title: \"Radius\",\n min: 1, \n max: 10, \n step: 1,\n value: 5\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"viewof minT = slider({\n title: \"Min Thickness\",\n min: 1, \n max: 5, \n step: 1,\n value: 3\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"viewof maxT = slider({\n title: \"Max Thickness\",\n min: 10, \n max: 25, \n step: 1,\n value: 20\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"viewof iterations = slider({\n title: \"Iterations\",\n description: \"Adjust this to smooth out the turns\",\n min: 0, \n max: 10, \n step: 1,\n value: 3\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"viewof colorHighlight = color({\n title: \"Highlight color\",\n value: \"#cccccc\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"viewof colorDefault = color({\n title: \"Default color\",\n value: \"#ff0080\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":319,"value":"## Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":29,"value":"rawData = [0,0,0,0,0,0,0,2,374,526,255,557,889,935,835,563,327,521,550,656,565]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"dataOrig = rawData.map((d) => ({\n value: d,\n thickness: Math.floor(scaleThick(d))\n}))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"dataNew = FileAttachment(\n \"technology-adoption-by-households-in-the-united-states.csv\"\n).csv({ typed: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"data = dataNew\n .map((d) => ({\n value: d[\"Percent Adaption\"],\n thickness: Math.abs(d[\"Percent Change\"]),\n year: d[\"Year\"],\n entity: d[\"Entity\"]\n }))\n .filter((d) => d.entity === tech)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":418,"value":"returnData(\"Automobile\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":414,"value":"function returnData(name) {\n return dataNew\n .map((d) => ({\n value: d[\"Percent Adaption\"],\n thickness: Math.abs(d[\"Percent Change\"]),\n year: d[\"Year\"],\n entity: d[\"Entity\"]\n }))\n .filter((d) => d.entity === name);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":471,"value":"## Scales and Constants","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":71,"value":"scaleY = d3\n .scaleLinear()\n .domain([0, 100])\n .range([height, 0]);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"scaleX = d3.scaleLinear().domain([1900, 2020]).range([0, width])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"scaleThick = d3.scaleLinear().domain(d3.extent(rawData)).range([minT, maxT])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"curve = d3.curveBasis","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"line = d3\n .line()\n .x((d, i) => scaleX(d.year))\n .y((d) => scaleY(d.value))\n .curve(curve)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"area = d3\n .area()\n .x0(d => d.x0)\n .x1(d => d.x1)\n .y0(d => d.y0)\n .y1(d => d.y1)\n .curve(curve);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"height = 420","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"width = 640","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"margin = maxT * 1.5","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"import {slider, color} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":466,"value":"## Housekeeping","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":463,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"