3f:null 40:["$","title",null,{"children":"Penguin Data Viz | Seyram Butame | Observable"}] 46:Ta53,# Penguin Data Viz This is an exercise based on the Observable livestream with [**Lunch in the D3 Kitchen: Penguin Dataviz**](https://observablehq.com/@observablehq/lunch-the-d3-kitchen-penguin-dataviz). It was helmed by Ian Johnson and Anjana Vakil on August 18, 2020. I built this Notebook while following along with their instructions, based on the principle that the best way to learn both Observable and D3 is by doing, so here we are. I have added some little things such as the style change to move away from the default serif font used by Observable. # Fetch the data We can grab the data from the github repository: penguins.csv a simplified version of the original dataset penguins_raw.csv. We are going to make use of a couple of utilities in the D3 library: 1. d3.csv -- A utility that allows us sot retrieve the csv file via the url 2. d3.autoType -- Another utility that parses the data appropriately ensuring it is placed in an array and that the various objects have the correct designations. You have to be careful with the arbitrary use, but csv formatted files are typically clean and well laid out. 3. d3.select -- Another utility that returns a selection of one or more DOM nodes. # Drawing with SVG When you start with data visualizations you need to start by putting something on the page and making incremental changes to the visualization, as opposed to writing out all of the code, then realising there is an error when the image or chart does not display and then struggling to find the error that is causing the problem. To start, we will create a point/circle for every object (i.e., row) in our dataset. [Additional information on SVG](https://developer.mozilla.org/en-US/docs/Web/SVG) - https://developer.mozilla.org/en-US/docs/Web/SVG SVG is basically HTML, a native browser API for drawing with DOM elements. Consequently, anyway you would write HTML such as using `div` and `

`, so you just need to put it in an svg environment. 1. Give the svg a width and height to create the environment. Note that Observable has a built in width environment to ensure that the work you are doing plays nicely with the Observable notebook. The height will then need to be defined separately (see Appendix). 2. Canvas is an alternative for drawing certain things in the HTML environment. 3. First we draw a single circle by hand. D3 then comes in an automates the process. 4. There is a ``tag that can be used in svg with properties that can be modified, such as radius and the position on the drawing palette (the svg tags create a type of drawing environment. 5. We need to then create a render function 47:[] 44:{"id":"841ae8a3d9c85c3a","slug":"penguin-data-viz","title":"Penguin Data Viz","thumbnail":"a9ea517fbf5e1bb25923214d522c7286dbc38d1d32e0baeff72f25a26d43e23d","access_level":"public","create_time":"$D2022-05-06T19:41:02.324Z","update_time":"$D2022-05-28T05:46:42.597Z","view_time":null,"first_public_time":"$D2022-05-08T06:43:00.600Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"bd2ee60933790597","login":"butames","name":"Seyram Butame","avatar_url":"https://avatars-next.observableusercontent.com/094d60cc20640a9de87742374540a46872427a536f8bbdb6fcf8d80d6f824cb3","tier":"starter_2024","bio":"I am a Program Specialist, currently living and working in Los Angeles","following":false},"version":315,"publish_version":315,"role":null,"authored":false,"authors":[{"type":"individual","id":"598918e83547f5eb","login":"butames","name":"Seyram Butame","avatar_url":"https://avatars-next.observableusercontent.com/094d60cc20640a9de87742374540a46872427a536f8bbdb6fcf8d80d6f824cb3","tier":null,"bio":"I am a Program Specialist, currently living and working in Los Angeles","following":false}],"members":[{"type":"individual","id":"598918e83547f5eb","login":"butames","name":"Seyram Butame","avatar_url":"https://avatars-next.observableusercontent.com/094d60cc20640a9de87742374540a46872427a536f8bbdb6fcf8d80d6f824cb3","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Penguin Data Viz","cells":[{"id":0,"value":"$46","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":297,"value":"mySVG = html`

\n\n\n

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":295,"value":"render(mySVG)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"value":"xProperty = 'flipper_length_mm'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":291,"value":"yProperty = 'bill_length_mm'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":290,"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(5000)\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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"# Appendix\nIn the section below I catalogue the utilities and tools used in the creation of the above.\n1. We require the D3.js library to be able to use it in this Notebook.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":255,"value":"height = 500","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"penguins","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":286,"value":"import {penguins} from \"@enjalot/palmer-penguins\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":272,"value":"import {swatches} from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"d3 = require(\"d3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":301,"value":"