2e:null 2f:["$","title",null,{"children":"Lunch in the D3 Kitchen: Penguin Dataviz | Observable | Observable"}] 34:T565,md`# Lunch in the D3 Kitchen: Penguin Dataviz An [Observable livestream](https://www.twitch.tv/observablehq) with [Ian Johnson](https://observablehq.com/@enjalot) and [Anjana Vakil](https://observablehq.com/@anjana) - August 18, 2020 Let's [learn D3 basics](https://observablehq.com/collection/@d3/learn-d3) by visualizing some [penguin data](https://observablehq.com/@enjalot/palmer-penguins)! *Links, References & Inspiration* * [Palmer Penguins dataset](https://observablehq.com/@enjalot/palmer-penguins) * [Palmer Penguins scatterplot](https://observablehq.com/@pchabros/palmer-penguins) by [@pchabros](https://observablehq.com/@pchabros) * Examples: [Scatterplot](https://observablehq.com/@d3/scatterplot), [Brushable Scatterplot](https://observablehq.com/@d3/brushable-scatterplot) & [Brushable Scatterplot Matrix](https://observablehq.com/@d3/brushable-scatterplot-matrix) * Documentation: [selection.join](https://observablehq.com/@d3/selection-join), [d3-scale](https://github.com/d3/d3-scale), [d3-axis](https://github.com/d3/d3-axis), [d3-ease](https://github.com/d3/d3-ease) * [Observable Search: colors](https://observablehq.com/search?query=colors) `35:[] 32:{"id":"4865324bd877af2b","slug":"lunch-the-d3-kitchen-penguin-dataviz","title":"Lunch in the D3 Kitchen: Penguin Dataviz","thumbnail":"b2e3651ac02c056749d1b4e45ea7c60e2c137aa64603493e93264d9d0a2897ae","access_level":"public","create_time":"$D2020-08-18T18:34:40.898Z","update_time":"$D2020-09-02T18:55:36.247Z","view_time":null,"first_public_time":"$D2020-08-18T20:24:40.347Z","has_unpublished_edits":null,"fork":false,"stars":12,"starred":false,"owner":{"type":"team","id":"f35c755083683fe5","login":"observablehq","name":"Observable","avatar_url":"https://avatars-next.observableusercontent.com/424c6c1f7794371c9915a160519bdfb34cf34e50069fcd6def38a1a04d4e9702","tier":"enterprise_2024"},"version":169,"publish_version":169,"role":null,"authored":false,"authors":[{"type":"individual","id":"d7d614fa2258860d","login":"anjana","name":"Anjana Vakil","avatar_url":"https://avatars-next.observableusercontent.com/75f0346d6c6908da9b546556f8d223eceb871857b81263c0d62ed549cc492936","tier":null}],"members":[{"type":"team","id":"f35c755083683fe5","login":"observablehq","name":"Observable","avatar_url":"https://avatars-next.observableusercontent.com/424c6c1f7794371c9915a160519bdfb34cf34e50069fcd6def38a1a04d4e9702","tier":"enterprise_2024","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":7,"collection":{"id":"c996f221f0a0767e","slug":"twitch-streams","title":"Twitch Streams","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"type":"notebook","body":{"title":"Lunch in the D3 Kitchen: Penguin Dataviz","cells":[{"id":0,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"mySVG = html`

\n\n\n

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"render(mySVG)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"xProperty = 'flipper_length_mm'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"yProperty = 'bill_length_mm'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"function render(div) {\n // draw on the SVG with D3\n const selection = d3.select(div).select('svg');\n \n const xExtent = d3.extent(penguins, d => d[xProperty]);\n const x = d3.scaleLinear().domain(xExtent).range([30,width-30]);\n const xAxis = d3.axisBottom(x);\n selection.select(\"#xAxis\")\n .call(xAxis);\n \n const yExtent = d3.extent(penguins, d => d[yProperty]);\n const y = d3.scaleLinear().domain(yExtent).range([30,height-30]);\n const yAxis = d3.axisLeft(y);\n selection.select(\"#yAxis\")\n .call(yAxis);\n \n const colorScale = d3.scaleOrdinal(d3.schemeCategory10);\n\n \n selection.selectAll('circle')\n .data(penguins.filter(d => d[xProperty] !== \"NA\"))\n .join('circle')\n .attr('r', 15)\n .style('opacity', 0.2)\n .style('fill', d => colorScale(d.species))\n .transition()\n .duration(3000)\n .attr('cx', d => x(d[xProperty]) )\n .attr('cy', d => y(d[yProperty]) );\n\n const legend = swatches({color: colorScale});\n d3.select(div).select(\"#legend\")\n .append(() => legend);\n \n \n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"height = 500","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"penguins","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"import {penguins} from \"@enjalot/palmer-penguins\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"import {swatches} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"d3 = require('d3')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"import {twitch} from \"@codingwithfire/twitch\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 33:"$32:body"