31: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) `32:[] 2f:{"title":"Lunch in the D3 Kitchen: Penguin Dataviz","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"mySVG = html`

\n\n\n

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":55,"value":"render(mySVG)","pinned":true,"hidden":false,"mode":"ojs"},{"id":114,"value":"xProperty = 'flipper_length_mm'","pinned":true,"hidden":false,"mode":"ojs"},{"id":116,"value":"yProperty = 'bill_length_mm'","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":155,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"height = 500","pinned":true,"hidden":false,"mode":"ojs"},{"id":25,"value":"penguins","pinned":true,"hidden":false,"mode":"ojs"},{"id":23,"value":"import {penguins} from \"@enjalot/palmer-penguins\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":129,"value":"import {swatches} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":21,"value":"d3 = require('d3')","pinned":true,"hidden":false,"mode":"ojs"},{"id":158,"value":"import {twitch} from \"@codingwithfire/twitch\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}