2c:null 2d:["$","title",null,{"children":"Introduction to D3.js | Alma Cantu | Observable"}] 32:T4a3, // Draw colour legend var colourLegend = g.selectAll(".colourLegend") .data(islandCat) .enter() .append("g") .attr("class", "colourLegend") .attr("transform", (d, i) => ("translate(" + (width + 20) + "," + (margin.top + i*18) + ")")) colourLegend.append("circle") .attr("r", 5) .attr("fill", d => colorScale(d)) colourLegend.append("text") .attr("transform", "translate(15,0)") .attr("alignment-baseline", "middle") .text(d => d) // Draw size legend var sizeLegend = g.append("g") .attr("transform", (d, i) => ("translate(" + (width + 20) + "," + (margin.top + 4*18) + ")")) // Smallest bubble sizeLegend.append("circle") .attr("r", 1) sizeLegend.append("text") .attr("transform", "translate(15,0)") .attr("alignment-baseline", "middle") .text(d3.min(data, d => d.body_mass_g) + " g") // Largest bubble sizeLegend.append("circle") .attr("transform", "translate(0,18)") .attr("r", 10) sizeLegend.append("text") .attr("transform", "translate(15,18)") .attr("alignment-baseline", "middle") .text(d3.max(data, d => d.body_mass_g) + " g")33:Tf6e,chart = { // Define dimensions, defined globally // var width = 300; // var height = 300; var margin = {top: 5, right: 100, bottom: 50, left: 50}; var data = penguinsNoNan; // Create a svg // DIFFERENT FROM HOMEMADE WEBSITE var svg = d3.create("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom); var g = svg.append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); // Create a x scale, defined globally // var xScale = d3.scaleLinear() // .domain(d3.extent(data, d => d.culmen_depth_mm)) // .range([0, width]); // Create a y scale var yScale = d3.scaleLinear() .domain(d3.extent(data, d => d.culmen_length_mm)) .range([height, 0]); // Create a radius scale var rScale = d3.scaleLinear() .domain(d3.extent(data, d => d.body_mass_g)) .range([0, 10]); // Create a color scale var islandCat = Array.from(d3.group(data, d => d.island)).map(d => d[0]) var colorScale = d3.scaleOrdinal() .domain(islandCat) .range(d3.schemeTableau10) // Draw the x axis g.append("g") .attr("transform", "translate(0," + height + ")") .call(d3.axisBottom(xScale)) // Add x title g.append("text") .attr("text-anchor", "middle") .attr("alignment-baseline", "after-edge") .attr("x", width/2) .attr("y", height + margin.bottom) .text("culmen_depth_mm"); // Draw the y axis g.append("g") .call(d3.axisLeft(yScale)) // Add y title g.append("text") .attr("text-anchor", "middle") .attr("alignment-baseline", "hanging") .attr("transform", "rotate(-90)") .attr("x", -height/2) .attr("y", -margin.left) .text("culmen_length_mm"); // Draw colour legend var colourLegend = g.selectAll(".colourLegend") .data(islandCat) .enter() .append("g") .attr("class", "colourLegend") .attr("transform", (d, i) => ("translate(" + (width + 20) + "," + (margin.top + i*18) + ")")) colourLegend.append("circle") .attr("r", 5) .attr("fill", d => colorScale(d)) colourLegend.append("text") .attr("transform", "translate(15,0)") .attr("alignment-baseline", "middle") .text(d => d) // Draw size legend var sizeLegend = g.append("g") .attr("transform", (d, i) => ("translate(" + (width + 20) + "," + (margin.top + 4*18) + ")")) sizeLegend.append("circle") .attr("r", 1) sizeLegend.append("text") .attr("transform", "translate(15,0)") .attr("alignment-baseline", "middle") .text(d3.min(data, d => d.body_mass_g) + " g") sizeLegend.append("circle") .attr("transform", "translate(0,18)") .attr("r", 10) sizeLegend.append("text") .attr("transform", "translate(15,18)") .attr("alignment-baseline", "middle") .text(d3.max(data, d => d.body_mass_g) + " g") // Draw a circle for each datum g.selectAll(".point") .data(data) .enter() .append("circle") .attr("class", "point") .attr("cx", d => xScale(d.culmen_depth_mm)) .attr("cy", d => yScale(d.culmen_length_mm)) .attr("r", d => rScale(d.body_mass_g)) .attr("fill", d => colorScale(d.island)) .on("mouseover", (event, d) => onMouseOver(event, d)) .on("mouseout", onMouseOut) var tooltip = d3.select("body").append("div") .style("display", "none") .style("position", "absolute") .style("background-color", "#FFFA") function onMouseOver(event, d) { var mouse = d3.pointer(event, d3.select("body").node()) tooltip.style("display", null) .style("left", (mouse[0] + 20) + "px") .style("top", (mouse[1] + 20) + "px") .html(d.sex) } function onMouseOut() { tooltip.style("display", "none"); } // DIFFERENT FROM HOMEMADE WEBSITE return svg.node(); }34:[{"id":"5583d882e54251524c9693ea40f1731b106bbc7e7606e7615289f506256433a6c958f17c316b4add732d65298aabcfed6d81dc2520d55b4d7cb91deb7f64ebcf","href":"https://static.observableusercontent.com/files/5583d882e54251524c9693ea40f1731b106bbc7e7606e7615289f506256433a6c958f17c316b4add732d65298aabcfed6d81dc2520d55b4d7cb91deb7f64ebcf","name":"image@4.png","type":"image/png","lastModified":1683216908556.086,"size":55652},{"id":"f14191a93ba5dfa449b49bbb783a6ebad193a9045630883c34f66cef8e740d669876ed9eac72503fcbf764bb453899bcec6d34302741e3354495b3d05f206490","href":"https://static.observableusercontent.com/files/f14191a93ba5dfa449b49bbb783a6ebad193a9045630883c34f66cef8e740d669876ed9eac72503fcbf764bb453899bcec6d34302741e3354495b3d05f206490","name":"penguins@1.csv","type":"text/csv","lastModified":1683121380833.045,"size":13506},{"id":"3c289e69c6a0ee14b491c99f4584b96996062b1e058615912f8400b421d034cab673cc4e5cdd578cebbb43a8fb9e3b99af35b75f9ed9e157e030e9ed5cade6c5","href":"https://static.observableusercontent.com/files/3c289e69c6a0ee14b491c99f4584b96996062b1e058615912f8400b421d034cab673cc4e5cdd578cebbb43a8fb9e3b99af35b75f9ed9e157e030e9ed5cade6c5","name":"index.html","type":"text/html","lastModified":1682957621245.684,"size":367},{"id":"67c139e5b3e57ba2e87e3bf524043032fcbed1096a5718fbf5b53e509ee2d33d1a76c36887621f13af135f161933bf2352b1ae2afc85dea02461563b64eed250","href":"https://static.observableusercontent.com/files/67c139e5b3e57ba2e87e3bf524043032fcbed1096a5718fbf5b53e509ee2d33d1a76c36887621f13af135f161933bf2352b1ae2afc85dea02461563b64eed250","name":"main.js","type":"application/javascript","lastModified":1682959263955.373,"size":12},{"id":"61139fd2ac69b30d14cd0e165f19de22404ad5587918198559718611d76a223dbca0669d808e7ebcdfdf6c1a861f58d605fffcdbb6f6dd061bdf340e7e288413","href":"https://static.observableusercontent.com/files/61139fd2ac69b30d14cd0e165f19de22404ad5587918198559718611d76a223dbca0669d808e7ebcdfdf6c1a861f58d605fffcdbb6f6dd061bdf340e7e288413","name":"style.css","type":"text/css","lastModified":1682959267086.887,"size":23},{"id":"f14191a93ba5dfa449b49bbb783a6ebad193a9045630883c34f66cef8e740d669876ed9eac72503fcbf764bb453899bcec6d34302741e3354495b3d05f206490","href":"https://static.observableusercontent.com/files/f14191a93ba5dfa449b49bbb783a6ebad193a9045630883c34f66cef8e740d669876ed9eac72503fcbf764bb453899bcec6d34302741e3354495b3d05f206490","name":"penguins.csv","type":"text/csv","lastModified":1682959725858.832,"size":13506},{"id":"ae5d8f9c5e4541a4c190d017de0206a8b59e31df10fa5f3a66c09aa1f615ba380220e7c666abb96df0ef8eece6411acd9df18e395d3b7df47e26882b28b7ccef","href":"https://static.observableusercontent.com/files/ae5d8f9c5e4541a4c190d017de0206a8b59e31df10fa5f3a66c09aa1f615ba380220e7c666abb96df0ef8eece6411acd9df18e395d3b7df47e26882b28b7ccef","name":"image.png","type":"image/png","lastModified":1683210996057.007,"size":16923},{"id":"b87959a842ffdf8a8a28a9f06bcb6c3191d979c06781080e5c24e4fc7640ecfa36a37478dec9b8464048b78cb951a6eca08eb7ac2330de4f1712ef189c3aa322","href":"https://static.observableusercontent.com/files/b87959a842ffdf8a8a28a9f06bcb6c3191d979c06781080e5c24e4fc7640ecfa36a37478dec9b8464048b78cb951a6eca08eb7ac2330de4f1712ef189c3aa322","name":"image@1.png","type":"image/png","lastModified":1683211967895.889,"size":34066},{"id":"926d40473cfe249bbb5974b2f669d7f9db21e4d04207b79f678a550723bd549f0acc8e6a9e1ef7d273fa0b0254e5a89d5fc5295db5cc0e69e78083bbf1926601","href":"https://static.observableusercontent.com/files/926d40473cfe249bbb5974b2f669d7f9db21e4d04207b79f678a550723bd549f0acc8e6a9e1ef7d273fa0b0254e5a89d5fc5295db5cc0e69e78083bbf1926601","name":"image@2.png","type":"image/png","lastModified":1683211997000.722,"size":32897},{"id":"dce76522b277f0f96745c239b026df479f20c375f84dc0c7a29e1a4085a45cdc135e98ca76a8c07c7098e3ff3cda83f5167a8e4d272ef1a77f7c7891b84ac117","href":"https://static.observableusercontent.com/files/dce76522b277f0f96745c239b026df479f20c375f84dc0c7a29e1a4085a45cdc135e98ca76a8c07c7098e3ff3cda83f5167a8e4d272ef1a77f7c7891b84ac117","name":"image@3.png","type":"image/png","lastModified":1683216877595.449,"size":94203}] 30:{"id":"6d91faffa47b5f98","slug":"introduction-to-d3-js","title":"Introduction to D3.js","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2023-05-01T15:49:43.685Z","update_time":"$D2023-11-22T18:05:17.559Z","view_time":null,"first_public_time":"$D2023-05-01T15:49:43.685Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"656b5f55c2bcb042","login":"almacantu","name":"Alma Cantu","avatar_url":"https://avatars-next.observableusercontent.com/9ea9ebadc0c41a4c830dc44e65bb1f88e11c62ac3bf1cb5317510cc231faffb9","tier":"starter_2024"},"version":746,"publish_version":746,"role":null,"authored":false,"authors":[{"type":"individual","id":"7e10b92452f76f1d","login":"almacantu","name":"Alma Cantu","avatar_url":"https://avatars-next.observableusercontent.com/9ea9ebadc0c41a4c830dc44e65bb1f88e11c62ac3bf1cb5317510cc231faffb9","tier":null}],"members":[{"type":"individual","id":"7e10b92452f76f1d","login":"almacantu","name":"Alma Cantu","avatar_url":"https://avatars-next.observableusercontent.com/9ea9ebadc0c41a4c830dc44e65bb1f88e11c62ac3bf1cb5317510cc231faffb9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Introduction to D3.js","cells":[{"id":0,"value":"# Introduction to D3.js","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"## JavaScript","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"JavaScript is a scripting or programming language that allows you to implement complex features on web pages — every time a web page does more than just sit there and display static information for you to look at — displaying timely content updates, interactive maps, animated 2D/3D graphics, scrolling video jukeboxes, etc. — JavaScript is probably involved.\n\nIt is the third layer of standard web technologies, including HTML (website sketelon) and CSS (website style).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":631,"value":"## Exercises","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":15,"value":"### 1. Create a Simple Webpage","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":622,"value":"Start by downloading and installing **bracket** or use your favourite web development tool.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":590,"value":"https://sourceforge.net/projects/bracketsportable/","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":28,"value":"In a folder create an HTML file _index.html_, a css file _style.css_, and a JavaScript file _main.js_.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":446,"value":"Set the content of _index.html_ as follow:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":72,"value":"\n\n \n \n Simple Webpage\n \n \n \n \n \n \n

Simple Webpage

\n\n \n

Simple Webpage using HTML, css and JavaScript.

\n \n \n \n \n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":456,"value":"Set the content of _style.css_ as follow:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":77,"value":"/* This code will color your title (h1) in blue */\nh1{\n color: blue;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"Add finally set the content of _main.js_ as follow:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"main","database":"$undefined"},{"id":487,"value":"// Functions will be written here","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":643,"value":"Now try to visualisation your webpage by launching _index.html_","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":459,"value":"### 2. Create a Fancy Webpage","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":465,"value":"Add access to a Google font in your HTML file, next to the css link.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":463,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":467,"value":"Mention that you wish to use this new font in your css file.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":469,"value":"body{\n font-family: 'Roboto', sans-serif;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"### 3. Create Your First Chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":472,"value":"Add access to D3.js library in your HTML file, next to you JavaScript reference.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":482,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":478,"value":"Update your title in the HTML file","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":480,"value":"

Webpage with a chart

","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":309,"value":"Initialise the structure","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":299,"value":"// Access the html container\nvar body = d3.select(\"body\")\n\n// Create a svg\n// Note that width, margin and height are not defined yet\nvar svg = body.append(\"svg\")\n .attr(\"width\", width + margin.left + margin.right)\n .attr(\"height\", height + margin.top + margin.bottom)\n\n// Add an inner container\nvar g = svg.append(\"g\")\n .attr(\"transform\", \"translate(\" + margin.left + \",\" + margin.top + \")\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":289,"value":"Define your parameters","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":387,"value":"// Define dimensions\nvar width = 300\nvar height = 300\n\nvar margin = {top: 5, right: 5, bottom: 50, left: 50}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"Create scales","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":407,"value":"// Create a x scale tranforming linearily any number between 0 and 30 to a number between 0 and width\nvar xScale = d3.scaleLinear()\n .domain([0, 30])\n .range([0, width])\n\n// Create a y scale tranforming linearily any number between 0 and 60 to a number between height and 0\nvar yScale = d3.scaleLinear()\n .domain([0, 60])\n .range([height, 0])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":292,"value":"Add axes based on scale axes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":411,"value":"// Draw the x axis by calling the axisBottom function on your x scale\ng.append(\"g\")\n .attr(\"transform\", \"translate(0,\" + height + \")\")\n .call(d3.axisBottom(xScale))\n\n// Draw the y axis by calling the axisLeft function on your y scale\ng.append(\"g\")\n .call(d3.axisLeft(yScale))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":358,"value":"Download _penguins.csv_ from the left panel on this page and add all the content previously written in the following function.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":416,"value":"d3.csv(\"penguins.csv\").then(function(penguins) {\n\n var data = penguins\n \n ...\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":709,"value":"Take few minutes to look at all the parameters.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":711,"value":"await FileAttachment(\"penguins.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":419,"value":"Now, still inside the function, display the data.","pinned":true,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":422,"value":"// Draw a circle for each datum\ng.selectAll(\".point\")\n .data(data)\n .enter()\n .append(\"circle\")\n .attr(\"class\", \"point\")\n .attr(\"cx\", d => xScale(d.culmen_depth_mm))\n .attr(\"cy\", d => yScale(d.culmen_length_mm))\n .attr(\"r\", 2)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":427,"value":"Now try to launch it again. Are you getting an error? Filter the data as follow to avoid NaN values.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":431,"value":"var penguinsNoNan = penguins.filter(function(d){\n return (d.species\n && d.island\n && d.culmen_length_mm\n && d.culmen_depth_mm\n && d.flipper_length_mm\n && d.body_mass_g\n && d.sex)\n })\n \n var data = penguinsNoNan","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":437,"value":"### Expected result","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":435,"value":"![image.png](${await FileAttachment(\"image.png\").url()})","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":491,"value":"### 4. Improve Legends and Axes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":509,"value":"Adjusting the scale range to the dataset","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":495,"value":"// Create a x scale\nvar x = d3.scaleLinear()\n .domain(d3.extent(data, d => d.culmen_depth_mm))\n .range([0, width])\n\n// Create a y scale\nvar y = d3.scaleLinear()\n .domain(d3.extent(data, d => d.culmen_length_mm))\n .range([height, 0])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":511,"value":"Add axes titles","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":497,"value":"// Add x title\ng.append(\"text\")\n .attr(\"text-anchor\", \"middle\")\n .attr(\"alignment-baseline\", \"after-edge\")\n .attr(\"x\", width/2)\n .attr(\"y\", height + margin.bottom)\n .text(\"culmen_depth_mm\")\n\n// Add y title\ng.append(\"text\")\n .attr(\"text-anchor\", \"middle\")\n .attr(\"alignment-baseline\", \"hanging\")\n .attr(\"transform\", \"rotate(-90)\")\n .attr(\"x\", -height/2)\n .attr(\"y\", -margin.left)\n .text(\"culmen_length_mm\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":504,"value":"### Expected result","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":502,"value":"![image@2.png](${await FileAttachment(\"image@2.png\").url()})","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":507,"value":"### 5. Use colour and bubble size","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":525,"value":"Create more scales","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":523,"value":"// Create a radius scale\nvar rScale = d3.scaleLinear()\n .domain(d3.extent(data, d => d.body_mass_g))\n .range([1, 10])\n\n// Create a color scale\n// Identify all the categories of islands\nvar islandCat = Array.from(d3.group(data, d => d.island)).map(d => d[0])\n// Note that for the colour the scale is ordinal and the range refer to a set of existing scheme\nvar colorScale = d3.scaleOrdinal()\n .domain(islandCat)\n .range(d3.schemeTableau10)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"Available colour schemes: https://observablehq.com/@d3/color-schemes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":528,"value":"Update the display function","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":519,"value":"// Draw a circle for each datum\ng.selectAll(\".point\")\n .data(data)\n .enter()\n .append(\"circle\")\n .attr(\"class\", \"point\")\n .attr(\"cx\", d => xScale(d.culmen_depth_mm))\n .attr(\"cy\", d => yScale(d.culmen_length_mm))\n .attr(\"r\", d => rScale(d.body_mass_g))\n .attr(\"fill\", d => colorScale(d.island))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":547,"value":"Draw legends. Start by updating the margins. And draw colour and bubble size legends.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":558,"value":"var margin = {top: 5, right: 100, bottom: 50, left: 50}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":549,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":373,"value":"Result","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":567,"value":"![image@4.png](${await FileAttachment(\"image@4.png\").url()})","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":570,"value":"### 6. Create Interaction","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":688,"value":"Bind your points (bubbles) to the events _mouseover_ and _mouseout_.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":572,"value":"// Draw a circle for each datum\ng.selectAll(\".point\")\n .data(data)\n .enter()\n .append(\"circle\")\n .attr(\"class\", \"point\")\n .attr(\"cx\", d => x(d.culmen_depth_mm))\n .attr(\"cy\", d => y(d.culmen_length_mm))\n .attr(\"r\", d => r(d.body_mass_g))\n .attr(\"fill\", d => color(d.island))\n .on(\"mouseover\", (event, d) => onMouseOver(event, d))\n .on(\"mouseout\", onMouseOut)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":690,"value":"Implement the function triggered when the events occur.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":574,"value":"function onMouseOver(event, d) {\n \n var mouse = d3.pointer(event, d3.select(\"body\").node())\n \n // Create a tooltip that will appear on mouse over and disapear on mouse out.\n tooltip.style(\"display\", null)\n .style(\"left\", (mouse[0] + 20) + \"px\")\n .style(\"top\", (mouse[1] + 20) + \"px\")\n .html(d.sex)\n \n}\n\nfunction onMouseOut() {\n tooltip.style(\"display\", \"none\");\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":694,"value":"Define the tooltip and its initial behaviour.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":576,"value":"var tooltip = d3.select(\"body\").append(\"div\")\n .style(\"display\", \"none\")\n .style(\"position\", \"absolute\")\n .style(\"background-color\", \"#FFFA\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":531,"value":"## Observable","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":699,"value":"The environment used previously is the basis of web development. If you do not wish to create a website but still want to quickly draft D3.js visualizations, you can use _Observable_. It is the platform that you are currently using. It can be seen as the GitHub for D3.js. You can, for example, fork this page or even modify it without affecting the initial content.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":702,"value":"All your variables can now be declared individually to be used in other parts of the page. It is up to you whether you declare them as global (on a page scale) or internally to each of your chart.\n\nNote that there are some slight changes in how data is loaded and how charts are created. Apart from that, everything is similar.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":714,"value":"### Load the data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":125,"value":"penguins = FileAttachment(\"penguins.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"penguinsNoNan = penguins.filter(function(d){\n return (d.species && d.island && d.culmen_length_mm && d.culmen_depth_mm && d.flipper_length_mm && d.body_mass_g && d.sex)\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":716,"value":"### Declare variables","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":595,"value":"width = 500","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":598,"value":"height = 500","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":601,"value":" xScale = d3.scaleLinear()\n .domain(d3.extent(penguinsNoNan, d => d.culmen_depth_mm))\n .range([0, width])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":718,"value":"### Display your chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":229,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":729,"value":"### Standard chart with Plot","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":721,"value":"Previous exercises taught you how to create a chart from scratch but you can use already made chart that you can customise very similarily to Altair.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":582,"value":"Plot.plot({\n marks: [\n Plot.rectY(penguins, Plot.binX({y: \"count\"}, {x: \"body_mass_g\"})),\n Plot.ruleY([0])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":734,"value":"More examples of charts using Plot here: https://observablehq.com/@observablehq/plot-gallery","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":740,"value":"More examples of custom charts here: https://observablehq.com/@d3/gallery?utm_source=d3js-org&utm_medium=nav&utm_campaign=try-observable","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":737,"value":"### Create your own","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":726,"value":"Now try to create your own chart below this text, from scratch or with Plot.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 31:"$30:body"