2e:["$","title",null,{"children":"D3 Tutorial | Alejandro Benito-Santos | Observable"}] 33:T5b9,function updateChart(sex, step) { state.sex = sex; state.year = state.year + step; const newYear = state.year; const newData = census.filter(row => isYearAndSex(row, state.year, state.sex)); console.log(newData); const bars = chart.selectAll('.bar').data(newData, (d) => { if (d.year === state.year) { // the age for the current year should match the age - step for the previous year. Devuelve siempre 5, aunque el incremento en años sea diferente. if (step < 0) return d.age_group + 5 else return d.age_group - 5 } else { return d.age_group; } }); bars.enter().append('rect') .attr('class', 'bar') .attr('x', d => x(d.age_group)) .attr('y', d => y(0)) .attr('width', x.bandwidth()) .attr('height', 0) .attr('fill', d => color(d.sex)) .transition('enter-transition') .duration(500) .attr('y', d => y(d.people)) .attr('height', d => height - y(d.people)); bars.transition('update').duration(500).attr('x', d => x(d.age_group)) .attr('y', d => y(d.people)) .attr('width', x.bandwidth()) .attr('height', d => height - y(d.people)) .attr('fill', d => color(d.sex)); // Step 5. Exit. bars.exit() .transition('exit-transition') .duration(500) .attr('height', 0) .attr('y', y(0)) .remove(); document.getElementById('curr-year-naive').textContent = state.year; }34:[] 31:{"id":"b8382ba479fb1f83","slug":"d3-tutorial","title":"D3 Tutorial","thumbnail":"6cc479bd08b3f227cba0d416bfabe18eca9e9921285824231c3169719ae08af3","access_level":"public","create_time":"$D2019-10-30T12:36:14.367Z","update_time":"$D2019-10-30T14:57:27.942Z","view_time":null,"first_public_time":"$D2019-10-30T14:59:47.892Z","has_unpublished_edits":null,"fork":{"id":"68f1d227616cd985","slug":"d3-tutorial","title":"D3 Tutorial","owner":{"id":"f96db6d9aeb27348","login":"haldenl","name":"Halden Lin"}},"stars":2,"starred":false,"owner":{"type":"team","id":"66257f7c1d7525fe","login":"alexbensan","name":"Alejandro Benito-Santos","avatar_url":"https://avatars-next.observableusercontent.com/b9bde40a4c4f6f53ee5a7c0bca8a5bc71ed92f6d58c1556eed4a2338c4e959e4","tier":"starter_2024"},"version":227,"publish_version":227,"role":null,"authored":false,"authors":[{"type":"individual","id":"901c0c91b87a136d","login":"alexbensan","name":"Alejandro Benito-Santos","avatar_url":"https://avatars-next.observableusercontent.com/b9bde40a4c4f6f53ee5a7c0bca8a5bc71ed92f6d58c1556eed4a2338c4e959e4","tier":null}],"members":[{"type":"individual","id":"901c0c91b87a136d","login":"alexbensan","name":"Alejandro Benito-Santos","avatar_url":"https://avatars-next.observableusercontent.com/b9bde40a4c4f6f53ee5a7c0bca8a5bc71ed92f6d58c1556eed4a2338c4e959e4","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"D3 Tutorial","cells":[{"id":0,"value":"md`# D3 Tutorial`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"md`## Hola! Sigue las instrucciones para comenzar:\n\n1. Ve a observablehq.com y loguéate o crea una cuenta si no tienes una.\n2. Abre un nuevo notebook vacío.\n\nEl notebook del tutorial para crear esta visualización está en [https://observablehq.com/@ale0xb/introduccion-a-d3](https://observablehq.com/@ale0xb/introduccion-a-d3)\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":182,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"import { census } from \"@ale0xb/introduccion-a-d3\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"md`## Containers`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"width = 600","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"height = 400 ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"margin = {\n return {\n top: 50,\n right: 50, \n bottom: 50, \n left: 100\n }\n\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"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","output":"$undefined","database":"$undefined"},{"id":33,"value":"chart = container.append('g')\n .attr('id', 'chart')\n .attr('transform', `translate(${margin.left}, ${margin.top})`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"md`## Domain`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"function unique(array) {\n return array.filter((v, i) => array.indexOf(v) == i)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"ageDomain = unique(census.map(row => row.age_group))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"peopleDomain = [0, d3.max(census, row => row.people)]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"sexDomain = [1, 2] ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"md`## Scale`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"x = d3.scaleBand().rangeRound([0, width])\n .padding(0.1)\n .domain(ageDomain)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"y = d3.scaleLinear()\n .rangeRound([height, 0])\n .domain(peopleDomain)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"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","output":"$undefined","database":"$undefined"},{"id":62,"value":"md`## Axes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"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","output":"$undefined","database":"$undefined"},{"id":71,"value":"d3.selectAll('.axis_x').remove()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"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","output":"$undefined","database":"$undefined"},{"id":79,"value":"md`## Labels`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"container.selectAll('text').style(\"font-family\", \"sans-serif\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"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 Group and Population by Sex\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"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","output":"$undefined","database":"$undefined"},{"id":87,"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","output":"$undefined","database":"$undefined"},{"id":89,"value":"md`## Legend`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"d3Legend = require('d3-svg-legend')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"legend_auto = d3Legend\n .legendColor()\n .scale(color)\n .labels([\"Male\", \"Female\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"container.append(\"g\")\n .attr(\"class\", \"legend_auto\")\n .attr(\"transform\", `translate(${width - 20}, 65)`)\n .style('font-size', '12px')\n .call(legend_auto)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"md`## State and Data Filtering`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"state = {\n return {\n year: 1971,\n sex: 2\n }\n};","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"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","output":"$undefined","database":"$undefined"},{"id":105,"value":"filteredData = census.filter(row => isYearAndSex(row, state.year, state.sex))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"md`## Creating Bars`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"barElements = chart.selectAll('.bar')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"bars = barElements.data(filteredData)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"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","output":"$undefined","database":"$undefined"},{"id":179,"value":"md`## Updating`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"container.node()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"viewof buttons = {\n const decrement = html``;\n decrement.onclick = () => {\n if (state.year > 1971) {\n if (state.year == 2019)\n updateChart(state.sex, -3);\n else\n updateChart(state.sex, -5);\n }\n };\n \n const increment = html``;\n increment.onclick = () => {\n if (state.year < 2019) {\n if (state.year == 2016)\n updateChart(state.sex, 3);\n else\n updateChart(state.sex, 5);\n }\n }\n \n \n const switchSexButton = html``;\n switchSexButton.onclick = () => updateChart(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 \n return view;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body" 2d:E{"digest":"NEXT_REDIRECT;replace;/@alexbensan/d3-tutorial;307;"}