31:Tad9,chart = { const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); svg .append("rect") .attr("x", 0) .attr("y", 0) .attr("width", width) .attr("height", height) .attr("fill", "#eee"); svg .append("image") .attr("transform", `translate(0, ${(-2 * height) / 2})`) .attr( "href", await FileAttachment("Screen Shot 2020-12-03 at 6.59.46 PM.png").url() ) .attr("width", width * 1.5) .attr("height", height * 3) .style("opacity", 0.4); svg .append("text") .text("I. Unemployment by selected industry") // .attr("font-weight", "bold") .attr("font-size", 24) // .attr("letter-spacing", "0.072em") .attr("text-anchor", "middle") .attr("font-family", "garamond") .attr("transform", `translate(${width / 2}, 72)`); svg .append("g") .selectAll("path.area") .data(series) .join("path") .classed("area", true) // .attr("fill", ({ key }) => color(key)) .attr("fill", (d, i) => text[i].texture.url()) // .attr("fill-opacity", 0.65) // .attr("filter", "url(#roughpaper)") .attr("d", area) .append("title") .text(({ key }) => key); svg .append("g") .selectAll("path.top") .data(series) .join("path") .classed("top", true) // .attr("stroke", ({ key }) => color(key)) .attr("stroke", "#111") .attr("stroke-width", 2) .attr("fill", "none") // .attr("filter", "url(#roughpaper)") .attr("d", line2); svg .append("g") .selectAll("path.drape") .data(series) .join("path") .classed("drape", true) .attr("id", (d, i) => "drape-" + i) .attr("transform", (d, i) => { return `translate(${translations[i].x},${translations[i].y})`; }) // .attr("stroke", ({ key }) => d3.color(color(key)).darker(0.95)) .attr("stroke", "none") .attr("fill", "none") .attr("d", (d, i) => { if (text[i].line == "midline") { return midline(d); } return line(d); }) .append("title") .text(({ key }) => key); let texts = svg .append("g") .selectAll("text.drape") .data(text) .join("text") .classed("drape", true) .attr("word-spacing", (d, i) => text[i].wordspacing) .attr("letter-spacing", (d, i) => text[i].letterspacing); texts .append("textPath") .attr("xlink:href", (d, i) => "#drape-" + i) .attr("startOffset", d => d.offset) .text(d => d.text) .attr("font-weight", "bold") .attr("font-family", "Garamond"); svg .append("g") .classed("x-axis", true) .call(xAxis); svg .append("g") .classed("left-y-axis", true) .call(yAxis); svg .append("g") .classed("right-y-axis", true) .call(yAxis2); return svg.node(); }32:T724,text = [ { column: "Information", text: "Information: selling information in the form of goods or services", offset: "10%", translate: { x: 0, y: -10 }, color: "rgb(82,117,149)", line: "line", wordspacing: 25, texture: textures .lines() .stroke(black) // .background("rgb(82,117,149)") .background(black) .orientation("3/8") .size(lineSize) .strokeWidth(1) // .heavier(1) }, { column: "Construction", text: "Construction: the building of large structures", offset: "20%", translate: { x: 0, y: 50 }, color: lightblue, line: "line", wordspacing: 25, letterspacing: "0.3em", texture: textures .lines() // .stroke("black") // .background("rgb(82,117,149)") .stroke(black) .background(lightblue) .orientation("3/8") .size(lineSize) .strokeWidth(1) // .heavier(1) }, { column: "Manufacturing", text: "Manufacturing: the making of articles on a large scale using machinery", offset: "14%", translate: { x: 20, y: 50 }, color: "rgb(135,164,174)", line: "line", wordspacing: 25, texture: textures .lines() .stroke(black) .background(lightblue) .orientation("3/8") .size(lineSize) .strokeWidth(0) .heavier(1) }, { column: "Self-employed", text: "Self-employed: working for oneself as a freelancer or the owner of a business rather than for an employer", offset: "4%", translate: { x: -20, y: -50 }, color: "rgb(203,209,200)", line: "line", wordspacing: 9, letterspacing: "0.05em", texture: textures .lines() .stroke(lightblue) .orientation("3/8") .size(lineSize) .strokeWidth(1) // .heavier(1) } ]33:[{"id":"7cbdbc28fc4f3b5cb40e26cdf411c88807dd134ad13cac7576ee0abe81f834d1fc9d8dcddca522d9f52d329396319a5c7e61e43c83074080c3e3f97189909ee3","href":"https://static.observableusercontent.com/files/7cbdbc28fc4f3b5cb40e26cdf411c88807dd134ad13cac7576ee0abe81f834d1fc9d8dcddca522d9f52d329396319a5c7e61e43c83074080c3e3f97189909ee3","name":"unemployment-2.csv","type":"application/octet-stream","lastModified":1607049602351.384,"size":8503},{"id":"177ea560dbc2b1f5436a150b09fc99d7e5f11da2fee80ae92a61b6010a7b396291a8b27c8d23106e9dae401580c6e11528237c9efa4a4fc7cc03d16ab6905da2","href":"https://static.observableusercontent.com/files/177ea560dbc2b1f5436a150b09fc99d7e5f11da2fee80ae92a61b6010a7b396291a8b27c8d23106e9dae401580c6e11528237c9efa4a4fc7cc03d16ab6905da2","name":"Screen Shot 2020-12-03 at 6.59.46 PM.png","type":"image/png","lastModified":1607050822071.542,"size":3159102},{"id":"46398abb2296cf7ee909c23e8d80798731c71ee41119693efc1f95aea17b4ca192b7d6bf7ba06a0c4f86e9a8ebb674fa405e90d8fe8439c0d785941b6cd59e4f","href":"https://static.observableusercontent.com/files/46398abb2296cf7ee909c23e8d80798731c71ee41119693efc1f95aea17b4ca192b7d6bf7ba06a0c4f86e9a8ebb674fa405e90d8fe8439c0d785941b6cd59e4f","name":"Screen Shot 2020-12-03 at 7.16.35 PM.png","type":"image/png","lastModified":1607051838677.988,"size":4442659}] 2f:{"title":"Annotated Stacked Area Chart","cells":[{"id":0,"value":"md`# Annotated Stacked Area Chart\nInspired by this [classic data visualization](https://www.davidrumsey.com/luna/servlet/detail/RUMSEY~8~1~309724~90079628:Statistical-Diagram--Resultats-Gene?qvq=q%3Acheysson%3Bsort%3APub_List_No_InitialSort%2CPub_Date%2CPub_List_No%2CSeries_No%3Blc%3ARUMSEY%7E8%7E1&sort=Pub_List_No_InitialSort%2CPub_Date%2CPub_List_No%2CSeries_No&mi=522&trs=587):\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":577,"value":"html`

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":588,"value":"md`Recreated with Unemployed persons by industry, 2005–2010. Data: [BLS](https://www.bls.gov/)\n\nbuilt with [RJ Andrews](https://twitter.com/infowetrust) and [EJ Fox](https://twitter.com/mrejfox).\n\n### Nice little touches\n+ Vertical axes\n+ Grid\n+ Spacing between words\n+ Coloring with patterns\n+ Thick bar on top\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":280,"value":"key = swatches({color, marginLeft: margin.left, columns: \"180px\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":893,"value":"black = \"#333\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":841,"value":"lightblue = \"rgb(71,110,147)\" //\"rgb(71,104,141)\" //\"rgb(203,209,200)\" // \"rgb(135,164,174)\" //\"rgb(82,117,149)\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":549,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":61,"value":"yAxis = g =>\n g\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(\n d3.axisLeft(\n d3\n .scaleLinear()\n .domain([0, minimum])\n .range([y(0), y(minimum)])\n )\n )\n .call(g => g.select(\".domain\").remove())\n// .call(g =>\n// g\n// .select(\".tick:last-of-type text\")\n// .clone()\n// .attr(\"x\", 3)\n// .attr(\"text-anchor\", \"start\")\n// .attr(\"font-weight\", \"bold\")\n// .text(data.y)\n// )","pinned":true,"hidden":false,"mode":"ojs"},{"id":600,"value":"yAxis2 = g =>\n g\n .attr(\"transform\", `translate(${width - margin.right},0)`)\n .call(\n d3.axisRight(\n d3\n .scaleLinear()\n .domain([0, maximum])\n .range([y(0), y(maximum)])\n )\n )\n .call(g => g.select(\".domain\").remove())","pinned":true,"hidden":false,"mode":"ojs"},{"id":652,"value":"minimum = series[2][0][1]","pinned":true,"hidden":false,"mode":"ojs"},{"id":654,"value":"maximum = d3.max(series[2], d => d[1])","pinned":true,"hidden":false,"mode":"ojs"},{"id":450,"value":"columns = text.map(d => d.column)","pinned":true,"hidden":false,"mode":"ojs"},{"id":468,"value":"translations = text.map(d => d.translate)","pinned":true,"hidden":false,"mode":"ojs"},{"id":510,"value":"colors = text.map(d => d.color)","pinned":true,"hidden":false,"mode":"ojs"},{"id":913,"value":"hellonearthiscolors = [\"#2C4E68\", \"#457399\", \"#85A6B2\", \"#ACB8B9\", \"#EEE1D3\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":917,"value":"swatches({\n color: d3\n .scaleOrdinal()\n .domain(hellonearthiscolors)\n .range(hellonearthiscolors)\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":525,"value":"svg``","pinned":true,"hidden":false,"mode":"ojs"},{"id":499,"value":"svg``","pinned":true,"hidden":false,"mode":"ojs"},{"id":504,"value":"md`Example from [alligator.io](https://alligator.io/svg/textpath/)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"data = Object.assign(d3.csvParse(await FileAttachment(\"unemployment-2.csv\").text(), d3.autoType), {y: \"Unemployment\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":448,"value":"filtered = data.filter(d => {\n return d.date > new Date(\"2008-01-01\");\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":258,"value":"series = d3.stack().keys(columns)(filtered)","pinned":true,"hidden":false,"mode":"ojs"},{"id":50,"value":"area = d3\n .area()\n .x(d => x(d.data.date))\n .y0(d => y(d[0]))\n .y1(d => y(d[1]))\n .curve(d3.curveStep)","pinned":true,"hidden":false,"mode":"ojs"},{"id":462,"value":"line = d3\n .line()\n .x(d => x(d.data.date))\n .y(d => y(d[1]))\n .curve(d3.curveBasis)","pinned":true,"hidden":false,"mode":"ojs"},{"id":701,"value":"midline = d3\n .line()\n .x(d => x(d.data.date))\n .y(d => y(d[0] + (d[1] - d[0]) / 2))\n .curve(d3.curveBasis)","pinned":true,"hidden":false,"mode":"ojs"},{"id":665,"value":"line2 = d3\n .line()\n .x(d => x(d.data.date))\n .y(d => y(d[1]))\n .curve(d3.curveStep)","pinned":true,"hidden":false,"mode":"ojs"},{"id":40,"value":"x = d3\n .scaleUtc()\n .domain(d3.extent(filtered, d => d.date))\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs"},{"id":42,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(series, d => d3.max(d, d => d[1]))]).nice()\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs"},{"id":65,"value":"color = d3\n .scaleOrdinal()\n .domain(columns)\n .range(colors)","pinned":true,"hidden":false,"mode":"ojs"},{"id":59,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x).ticks(width / 80).tickSizeOuter(0))","pinned":true,"hidden":false,"mode":"ojs"},{"id":37,"value":"height = width * .92","pinned":true,"hidden":false,"mode":"ojs"},{"id":38,"value":"margin = ({ top: 100, right: 50, bottom: 30, left: 50 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":430,"value":"import {swatches} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":720,"value":"textures = require(\"textures\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":727,"value":"lineSize = 7","pinned":true,"hidden":false,"mode":"ojs"},{"id":740,"value":"texture = textures\n .lines()\n .stroke(\"black\")\n .background(\"red\")\n .orientation(\"3/8\")\n .size(lineSize * 2)\n .strokeWidth(1)\n .heavier(1)","pinned":true,"hidden":false,"mode":"ojs"},{"id":725,"value":"textureURL = texture.url()","pinned":true,"hidden":false,"mode":"ojs"},{"id":763,"value":"legend2 = {\n const svg = d3\n .create(\"svg\")\n .attr(\"viewBox\", [-5, 0, width, 60])\n .style(\"background-color\", \"#111\");\n\n // svg.append(\"g\").attr(\"transform\", \"translate(${height},20)\");\n // .append(() => legend({ ramp, title: data.title, width: 260 }));\n\n // for (let item of ramp) {\n // svg.insert(() => item);\n // }\n\n text.forEach((d, i) => {\n svg.call(text[i].texture);\n });\n\n // svg\n // .append(\"g\")\n // .selectAll(\"rect\")\n // .data(d3.range(0, 10).map(d => (d / 10) * signalMap[signal].extent[1]))\n // .join(\"rect\")\n // .attr(\"fill\", (d, i) => q(d).url())\n // .attr(\"stroke\", \"#fff\")\n // .attr(\"width\", width)\n // .attr(\"height\", 100)\n // .attr(\"x\", (d, i) => i * (100 + 5))\n // .attr(\"y\", 5);\n\n return html`

${svg.node()}

`;\n}","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}