37:null 38:["$","title",null,{"children":"D3 Tutorial (pt 2) | Halden Lin | Observable"}] 3e:[] 3c:{"id":"2884b6d311fc0869","slug":"d3-tutorial-pt-2/2","title":"D3 Tutorial (pt 2)","thumbnail":"7ebcf4ddb3146d4847e348a43ab29127f2e4e20c4b2bc6f0b303382e02c53de8","access_level":"public","create_time":"$D2019-04-25T22:32:44.325Z","update_time":"$D2019-04-26T00:08:51.426Z","view_time":null,"first_public_time":"$D2019-04-25T23:03:26.502Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"f96db6d9aeb27348","login":"haldenl","name":"Halden Lin","avatar_url":"https://avatars-next.observableusercontent.com/fed97888fc5a83c1e11df499bb42d93f395a0111f53f5cc721591577d225e4fb","tier":"starter_2024","bio":"","following":false},"version":177,"publish_version":177,"role":null,"authored":false,"authors":[{"type":"individual","id":"33661b44ffece3d8","login":"haldenl","name":"Halden Lin","avatar_url":"https://avatars-next.observableusercontent.com/fed97888fc5a83c1e11df499bb42d93f395a0111f53f5cc721591577d225e4fb","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"33661b44ffece3d8","login":"haldenl","name":"Halden Lin","avatar_url":"https://avatars-next.observableusercontent.com/fed97888fc5a83c1e11df499bb42d93f395a0111f53f5cc721591577d225e4fb","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"titling":"auto","title":"D3 Tutorial (pt 2)","cells":[{"id":0,"value":"md`# D3 Tutorial (pt 2)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"md`## Hello! A few items to get started.\n\n1. If you do not yet have an observable account, please create one! You can link your github.\n2. Create an empty notebook (such as this one).\n3. If you want to follow this tutorial (text included) you can find it at observablehq.com/@uwdata/introduction-to-d3\n\n### https://observablehq.com/@haldenl/d3-tutorial-pt-2/2\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"import { census } from \"@uwdata/introduction-to-d3\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"width = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"height = 400","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"margin = {\n return {\n top: 50,\n right: 50,\n bottom: 50,\n left: 100\n }\n};","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"container = d3.create(\"svg\")\n .attr(\"width\", width + margin.left + margin.right)\n .attr('height', height + margin.top + margin.bottom)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"chart = container.append(\"g\")\n .attr(\"id\", \"chart\")\n .attr(\"transform\", `translate(${margin.left}, ${margin.right})`);\n// 'translate(' + margin.left + \",\" + margin.right + \")\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"md`## Domain`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"function unique(array) {\n return array.filter((a, i) => array.indexOf(a) === i )\n}\n/*\nfunction (a, i) {\n return array.indexOf(a) === i\n}\n*/","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"ageDomain = unique(census.map((row) => row.age_group))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"peopleDomain = [0, d3.max(census, row => row.people)];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"sexDomain = [1, 2];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"md`## Scale`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"x = d3.scaleBand().rangeRound([0, width])\n .padding(0.1)\n .domain(ageDomain)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"y = d3.scaleLinear()\n .range([height, 0])\n .domain(peopleDomain);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"color = {\n const maleColor = \"#42adf4\";\n const femaleColor = \"#ff96ca\";\n return d3.scaleOrdinal().range([maleColor, femaleColor]).domain(sexDomain)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"md`## Axes`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":76,"value":"container.selectAll(\".axis\").remove()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"xaxis = chart.append(\"g\")\n .attr(\"class\", \"axis axis--x\")\n .attr(\"transform\", `translate(0, ${height})`)\n .call(d3.axisBottom(x))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"yaxis = chart.append('g')\n .attr('class', 'axis axis--y')\n .call(d3.axisLeft(y));","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"md`## Titles`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"container.selectAll('text').style(\"font-family\", \"sans-serif\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"title = container.append(\"text\")\n .attr(\"transform\", `translate(${(width + margin.left + margin.right) /2 }, 20)`)\n .style(\"text-anchor\", \"middle\")\n .style(\"font-weight\", 700)\n .text(\"Census Age GAroup and Population by Sex\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"// text label for the y axis\nytitle = chart.append(\"text\")\n .attr(\"transform\", \"rotate(-90)\")\n .attr(\"y\", 0 - margin.left)\n .attr(\"x\", 0 - (height / 2))\n .attr(\"dy\", \"1em\")\n .style(\"text-anchor\", \"middle\")\n .text(\"Population\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"// text label for the x axis\nxtitle = chart.append(\"text\") \n .attr(\"transform\", `translate(${(width/2)}, ${(height + margin.top - 10)})`)\n .style(\"text-anchor\", \"middle\")\n .text(\"Age Group\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"md`## Legend`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"d3Legend = require(\"d3-svg-legend\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"legend_auto = d3Legend.legendColor()\n .scale(color)\n .labels([\"Male\", \"Female\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":100,"value":"container.append(\"g\")\n .attr(\"class\", \"legend_auto\")\n .style(\"font-size\", 12)\n .attr(\"transform\", \"translate(650, 100)\")\n .call(legend_auto)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"md`## Data Bindings`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"state = {\n return {\n year: 1920,\n sex: 2\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"function isYearAndSex(row, year, sex) {\n return row.year === year && row.sex === sex;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"filteredData = census.filter(row => isYearAndSex(row, state.year, state.sex))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"barElements = chart.selectAll('.bar')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":128,"value":"bars = barElements.data(filteredData)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"bars.enter() // All elements that did not have data bound before","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"bars // implicit update -> All elements that already had data","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"bars.exit() // All data points that no longer have elements","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"bars.enter()\n .append('rect')\n .attr('class', 'bar')\n .attr('x', d => x(d.age_group))\n .attr('y', d => y(d.people))\n .attr('width', x.bandwidth())\n .attr('height', d => height - y(d.people))\n .attr('fill', d => color(d.sex))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":145,"value":"chart.selectAll('.bar').data(filteredData).enter()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"function update(sex, step) {\n state.sex = sex;\n state.year += step;\n \n const newData = census.filter(row => isYearAndSex(row, state.year, state.sex));\n \n const bars = chart.selectAll('.bar').data(newData, d => {\n if (d.year === state.year) { // year im transition to\n return d.age_group - step;\n } else {\n return d.age_group\n }\n });\n \n bars.enter()\n .append('rect')\n .attr('class', 'bar')\n .attr('x', d => x(d.age_group))\n .attr('y', d => y(d.people))\n .attr('width', x.bandwidth())\n .attr('height', d => height - y(d.people))\n .attr('fill', d => color(d.sex))\n \n bars.transition('update')\n .duration(500)\n .attr('x', d => x(d.age_group))\n .attr('y', d => y(d.people))\n .attr('height', d => height - y(d.people))\n .attr('fill', d => color(d.sex));\n \n bars.exit()\n .remove()\n \n document.querySelector('#curr-year').textContent = state.year;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"container.node()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"viewof buttons = {\n const decrement = html``;\n decrement.onclick = () => update(state.sex, -10);\n \n const increment = html``;\n increment.onclick = () => update(state.sex, 10);\n \n const switchSexButton = html``;\n switchSexButton.onclick = () => update(state.sex === 2 ? 1 : 2, 0);\n \n const view = html`\n

\n ${decrement}\n \n ${state.year}\n \n ${increment}\n
\n ${switchSexButton}\n

\n`\n return view;\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3e","stdlib":"1"}} 3d:"$3c:body"