2d:null 2e:["$","title",null,{"children":"Day One: A line chart | Kelly Tall | Observable"}] 33:T4f9,md` The recent Outlier festival was great, and reminded me to just keep plugging away at d3 to keep it fresh and familiar. I started off last year doing 100 days of code, which was very useful. It was in the middle of lock-down and activity restrictions, so it was a nice thing to make a small chart each day and feel like I'd done someting useful with my time. I got about a third of the way, and then my grandfather fell quite ill, and I was spending a lot of time with him and my grandmother. He passed away in September, and a few weeks later my father in-law passed away too. It wasn't a good time. Around Sept / Oct I was also doing a lot of analytics for a project, so the idea of spending a really long day in R, and messing around with data and then sitting down for an hour and messing around some more with d3 was really unappealing. But at the end of the project I was working on I made a visual essay as a culmination of our work and that meant I had got to use D3 as part of that and it was nice to get back into it again. So, back to outlier! I heard mention a few times about using things like Tidy Tuesday as a way to practice out new tools, and I thought using the data from this each week may be a good way to keep my hand in and try out some new things`34:T44e,md`## Getting Started: How do I drive this thing? I am guessing I need to just start off with a simple line chart In Observable to get started so that is what this first post will be about - just making a simple line chart. ### Get the data To keep my tidy Tuesday theme consistent, I extracted "lifetime wealth" which shows the average lifetime wealth of white Americans versus Black Americans from 1983 to 2016. I noticed that this csv is missing from the larger data dictionary, so I am unsure if this is for households or individuals. If you are reading this - which I sort of doubt - and know what the answer is, leave a message in the side-bar comments. I do think this is adjusted for inflation (as the other data sets that I've been using have been). Ether way it's a pretty stark illustration of how Black Americans have been locked out of creating generational wealth and the gap is increasing at a really exponential rate. The link above to the Tidy Tuesday githb page has soe good links to read more about the systematic approaches made to prevent Black Americans from building wealth. `35:T663,function swatches({ color, columns = null, format = x => x, swatchSize = 15, swatchWidth = swatchSize, swatchHeight = swatchSize, marginLeft = 0 }) { const id = DOM.uid().id; if (columns !== null) return html`

${color.domain().map(value => { const label = format(value); return html`

${document.createTextNode(label)}

`; })}

`; return html`

${color.domain().map(value => html`${document.createTextNode(format(value))}`)}

`; }36:[{"id":"bcfcff61bc29ba021a8a5fdc004936dd941a8d83f558d2b89d51216493f5af9093c216060b85e9164eac36886bf243107734c643760a1880da6d2c684c7dda2c","href":"https://static.observableusercontent.com/files/bcfcff61bc29ba021a8a5fdc004936dd941a8d83f558d2b89d51216493f5af9093c216060b85e9164eac36886bf243107734c643760a1880da6d2c684c7dda2c","name":"lifetime_wealth.csv","type":"text/csv","lastModified":1613281664967.193,"size":662}] 31:{"id":"45167b4966fe303a","slug":"day-one-a-line-chart","title":"Day One: A line chart","thumbnail":"d365bb235641d42aabaa4bccae123b056ee42cc950be3f560019b8092ed48fe9","access_level":"public","create_time":"$D2021-02-14T05:01:54.497Z","update_time":"$D2021-02-22T04:08:03.604Z","view_time":null,"first_public_time":"$D2021-02-14T05:34:00.624Z","has_unpublished_edits":null,"fork":false,"stars":5,"starred":false,"owner":{"type":"team","id":"3bb34aac9bbd2f2c","login":"kellytall","name":"Kelly Tall ","avatar_url":"https://avatars-next.observableusercontent.com/54843f89aac9056fd263b5a165a7b5da90de335c17258b6a65af5664fed43378","tier":"starter_2024"},"version":257,"publish_version":257,"role":null,"authored":false,"authors":[{"type":"individual","id":"22bee35429c28ff7","login":"kellytall","name":"Kelly Tall ","avatar_url":"https://avatars-next.observableusercontent.com/54843f89aac9056fd263b5a165a7b5da90de335c17258b6a65af5664fed43378","tier":null}],"members":[{"type":"individual","id":"22bee35429c28ff7","login":"kellytall","name":"Kelly Tall ","avatar_url":"https://avatars-next.observableusercontent.com/54843f89aac9056fd263b5a165a7b5da90de335c17258b6a65af5664fed43378","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":{"id":"4d30edac71329640","slug":"a-chart-a-day-keeps-the","title":"A chart a Day keeps the doctor away","owner":{"id":"3bb34aac9bbd2f2c","login":"kellytall","name":"Kelly Tall "}},"type":"notebook","body":{"title":"Day One: A line chart","cells":[{"id":223,"value":"md`# Day One: A line chart`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"md `## Lifetime Wealth of Black Americans is significantly lower than white Americans`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"swatch = swatches({\n color: d3.scaleOrdinal([\"White\", \"Black\"], ([\"#eb5e0b\", \"#5eaaa8\"]) ) \n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"chart = {\n \n const svg = d3.select(DOM.svg(width, height))\n\n const g = svg\n .attr('width', width)\n .attr('height', height + margin.top + margin.bottom)\n .append('g')\n // .attr('transform', 'translate(' + margin.left + ',0)')\n \n g\n .append('g')\n .attr('transform', 'translate(0,' + height + ')')\n .call(xAxis)\n g\n .append('g')\n .attr(\"transform\", \"translate(60, 0)\")\t\n .call(yAxis)\n \n \n svg\n\t.selectAll(\".line\")\n .data(group_data)\n\t.enter()\n .append(\"path\")\n \t\t\t.attr(\"class\",(d, i) => {return d[0]})\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", (d, i) => {return color(d[0])})\n .attr(\"stroke-width\", 5)\n .attr(\"stroke-linecap\", \"round\")\n .attr(\"d\", (d, i) => {return line(d[1])})\n \n return svg.node()\n\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"citation = md `Data is from \"Nine Charts about Wealth Inequality in America (Updated)\" \nand published by the The Urban Instuitute. It was part of a larger data set made available here by the Tidy Tuesday people.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"md`So this week I thought I'd tackle a drop down menu. But it became a bit more tricky than I imagined. Part of it is not understanding properly how D3 handles grouped or nested data. So that's my challenge for myself this week - how the flipping heck does d3 handle grouped data with BONUS of not using d3.nest and only using d3.group. I'm going to work through an exaple I found online by Amber Thomas called \"Nesting and Accessing Data in d3v4\" but with the added challenge of not using v4 😬 (oh, and also using Observable for the first time...👍 )`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":227,"value":"md`### Upload and import data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"FileAttachment(\"lifetime_wealth.csv\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"data = {\n const text = await FileAttachment(\"lifetime_wealth.csv\").text();\n // const parseDate = d3.utcParse(\"%Y\");\n return d3.csvParse(text, ({year, race, type, wealth_lifetime}) => ({\n // year: parseDate(year),\n year: +year,\n race: race,\n type: type,\n wealth: +wealth_lifetime\n }));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":230,"value":"md `### Group data, create color scale, and xscale labels`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"group_data = Array.from(d3.group(data, d => d.race))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"color_key = Array.from(d3.group(data, d => d.race).keys())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"year_range = Array.from(d3.group(data, d => d.year).keys())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"md `### Create dimensions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"width = 900","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"margin = ({top: 60, right: 100, bottom: 20, left: 80})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":236,"value":"md `### Create scales (including color scales)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"x = d3.scaleBand()\n .domain(year_range)\n .range([margin.left, width - margin.right])\n .paddingInner(0.04)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"y = d3.scaleLinear()\n .domain([0, d3.max(data, d => d.wealth)])\n .range([height, 0])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"color = d3.scaleOrdinal()\n .domain(color_key)\n .range([\"#eb5e0b\", \"#5eaaa8\"]) \n // .range([\"red\", \"yellow\"]) \n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":240,"value":"md `### Create axis' and line generator`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"xAxis = d3.axisBottom(x)\n\t.tickPadding(5)\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"yAxis = d3.axisLeft(y)\n\t.tickPadding(5)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"line = d3.line()\n .x(d => x(d.year))\n .y(d => y(d.wealth))\n .curve(d3.curveCardinal.tension(.001))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":243,"value":"md `### Creating the legend\nI copied this from Mike Bostock's page about creating colour legends https://observablehq.com/@d3/color-legend`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":191,"value":"function entity(character) {\n return `&#${character.charCodeAt(0).toString()};`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"d3 = require(\"d3@6\")\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 32:"$31:body"