2b:null 2c:["$","title",null,{"children":"Animated bubble chart | Yuanjie (Tukey) Tu | Observable"}] 31:T10a8,finalChart = { const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto;"); svg .append("g") .attr("transform", `translate(0, ${height - margins.bottom})`) .call(d3.axisBottom(x)) .append("text") .text("Fertility") .attr("x", width) .attr("y", -10) .attr("fill", "black") .attr("font-size", "12px") .attr("font-weight", "bold") .attr("text-anchor", "end"); svg .append("g") .attr("transform", `translate(${margins.left}, 0)`) .call(d3.axisLeft(y)) .append("text") .text("Life expectancy") .attr("transform", "translate(20, 40) rotate(-90)") .attr("fill", "black") .attr("font-size", "12px") .attr("font-weight", "bold") .attr("text-anchor", "end"); const countries = svg .selectAll("circle") .data(dataInitial) .join("circle") .sort((a, b) => b.pop - a.pop) .attr("opacity", 0.75) .attr("fill", (d) => color(d.cluster)) .attr("cx", (d) => x(d.fertility)) .attr("cy", (d) => y(d.life_expect)) .attr("r", (d) => size(d.pop)); const legend = svg .append("g") .attr("transform", `translate(${width - 150}, ${margins.top + 10})`) .call(d => colorLegend(d)) const label = svg .append("text") .attr("display", "none") // Add mouse hover interactions, using D3 to update attributes directly. countries // the .on() method registers an event listener function .on("mouseover", function(e, d) { const [xm, ym] = d3.pointer(e) d3.select(e.target) .transition() .duration(50) .attr("r", size(d.pop)*1.3) // tooltip const labelText = `${d.country}` label .attr("display", null) .attr("font-size", 15) .attr("font-weight", "bold") .style("opacity", 1) .attr("transform", `translate(${xm}, ${ym})`) .attr("dx", 9) .attr("dy", -7) .text(d => labelText) }) .on('mousemove', function(e, d){ const [xm, ym] = d3.pointer(e) d3.select(e.target) .transition() .duration(50) .attr("r", size(d.pop)*1.3) // tooltip const labelText = `${d.country}` label .attr("display", null) .attr("font-size", 15) .attr("font-weight", "bold") .style("opacity", 1) .attr("transform", `translate(${xm}, ${ym})`) .attr("dx", 9) .attr("dy", -7) .text(d => labelText) }) .on("mouseout", function(e, d){ // Setting the stroke color to null removes the border entirely. d3.select(e.target) .transition() .duration(50) .attr("r", size(d.pop)) label .attr("display", "none") }); const yearLabel = svg .append("text") .attr("class", "year") .attr("x", 40) .attr("y", height - margins.bottom - 20) .attr("fill", "#ccc") .attr("font-family", "Helvetica Neue, Arial") .attr("font-weight", 500) .attr("font-size", 80) .text(years[0]) // Add a title const title = svg.append("g") .append("text") .attr("x", width / 2) .attr("y", (margins.top / 2)) .attr("text-anchor", "middle") .attr("front-weight", "bold") .attr("font-family", "Helvetica Neue, Arial") .attr("font-size", "20px") .text("Relationship between worldwide fertility and life expectancy") function changeYear(year) { // Update the year label by simply setting it to the new value. yearLabel.text(year); // Update countries and animate the transition: countries .data( gapminder.filter((d) => d.year === year), (d) => d.country ) // <-- 🔑 .sort((a, b) => b.pop - a.pop) .transition() // <-- akin to a D3 selection, but interpolates values .duration(1000) // <-- 1000 ms === 1 sec .ease(d3.easeCubic) // <-- sets pacing; cubic is the default, try some others! .attr("cx", (d) => x(d.fertility)) .attr("cy", (d) => y(d.life_expect)) .attr("r", (d) => size(d.pop)); } // return svg.node() return Object.assign(svg.node(), { changeYear }); }32:T4e6,bubbleChart = { const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto;"); svg .append("g") .attr("transform", `translate(0, ${height - margins.bottom})`) .call(d3.axisBottom(x)) .append("text") .text("Fertility") .attr("x", width) .attr("y", -10) .attr("fill", "black") .attr("font-size", "12px") .attr("font-weight", "bold") .attr("text-anchor", "end"); svg .append("g") .attr("transform", `translate(${margins.left}, 0)`) .call(d3.axisLeft(y)) .append("text") .text("Life expectancy") .attr("transform", "translate(20, 40) rotate(-90)") .attr("fill", "black") .attr("font-size", "12px") .attr("font-weight", "bold") .attr("text-anchor", "end"); const countries = svg .selectAll("circle") .data(dataInitial) .join("circle") // Sort so smaller circles are drawn last .sort((a, b) => b.pop - a.pop) .attr("opacity", 0.75) .attr("fill", (d) => color(d.cluster)) .attr("cx", (d) => x(d.fertility)) .attr("cy", (d) => y(d.life_expect)) .attr("r", (d) => size(d.pop)); return svg.node(); }33:Ta72,tooltipChart = { const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto;"); svg .append("g") .attr("transform", `translate(0, ${height - margins.bottom})`) .call(d3.axisBottom(x)) .append("text") .text("Fertility") .attr("x", width) .attr("y", -10) .attr("fill", "black") .attr("font-size", "12px") .attr("font-weight", "bold") .attr("text-anchor", "end"); svg .append("g") .attr("transform", `translate(${margins.left}, 0)`) .call(d3.axisLeft(y)) .append("text") .text("Life expectancy") .attr("transform", "translate(20, 40) rotate(-90)") .attr("fill", "black") .attr("font-size", "12px") .attr("font-weight", "bold") .attr("text-anchor", "end"); const countries = svg .selectAll("circle") .data(dataInitial) .join("circle") .sort((a, b) => b.pop - a.pop) .attr("opacity", 0.75) .attr("fill", (d) => color(d.cluster)) .attr("cx", (d) => x(d.fertility)) .attr("cy", (d) => y(d.life_expect)) .attr("r", (d) => size(d.pop)); const label = svg .append("text") .attr("display", "none") // Add mouse hover interactions, using D3 to update attributes directly. countries .on("mouseover", function(e, d) { const [xm, ym] = d3.pointer(e) d3.select(e.target) .transition() .duration(50) .attr("r", size(d.pop)*1.3) // tooltip const labelText = `${d.country}` label .attr("display", null) .attr("font-size", 15) .attr("font-weight", "bold") .style("opacity", 1) .attr("transform", `translate(${xm}, ${ym})`) .attr("dx", 9) .attr("dy", -7) .text(d => labelText) }) .on('mousemove', function(e, d){ const [xm, ym] = d3.pointer(e) d3.select(e.target) .transition() .duration(50) .attr("r", size(d.pop)*1.3) // tooltip const labelText = `${d.country}` label .attr("display", null) .attr("font-size", 15) .attr("font-weight", "bold") .style("opacity", 1) .attr("transform", `translate(${xm}, ${ym})`) .attr("dx", 9) .attr("dy", -7) .text(d => labelText) }) .on("mouseout", function(e, d){ // Setting the stroke color to null removes the border entirely. d3.select(e.target) .transition() .duration(50) .attr("r", size(d.pop)) label .attr("display", "none") }); return svg.node(); }34:T57a,function colorLegend(container) { const titlePadding = 14; // padding between title and entries const entrySpacing = 16; // spacing between legend entries const entryRadius = 5; // radius of legend entry marks const labelOffset = 4; // additional horizontal offset of text labels const baselineOffset = 4; // text baseline offset, depends on radius and font size const title = container .append("text") .text("Region") .attr("x", 0) .attr("y", 0) .attr("fill", "black") .attr("font-family", "Helvetica Neue, Arial") .attr("font-weight", "bold") .attr("font-size", "12px"); const entries = container .selectAll("g") .data(regions) .join("g") // we want to organize the s in rows .attr( "transform", (d) => `translate(0, ${titlePadding + d.index * entrySpacing})` ); const symbols = entries .append("circle") .attr("cx", entryRadius) .attr("r", entryRadius) // this is exactly the same as how we set the color for the actual scatter plot points .attr("fill", (d) => color(d.index)); const labels = entries .append("text") .text((d) => d.label) .attr("x", 2 * entryRadius + labelOffset) // to the right of symbols .attr("y", baselineOffset) // alignment adjustment .attr("fill", "black") .attr("font-family", "Helvetica Neue, Arial") .attr("font-size", "11px"); }35:Tb3d,legendChart = { const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto;"); svg .append("g") .attr("transform", `translate(0, ${height - margins.bottom})`) .call(d3.axisBottom(x)) .append("text") .text("Fertility") .attr("x", width) .attr("y", -10) .attr("fill", "black") .attr("font-size", "12px") .attr("font-weight", "bold") .attr("text-anchor", "end"); svg .append("g") .attr("transform", `translate(${margins.left}, 0)`) .call(d3.axisLeft(y)) .append("text") .text("Life expectancy") .attr("transform", "translate(20, 40) rotate(-90)") .attr("fill", "black") .attr("font-size", "12px") .attr("font-weight", "bold") .attr("text-anchor", "end"); const countries = svg .selectAll("circle") .data(dataInitial) .join("circle") .sort((a, b) => b.pop - a.pop) .attr("opacity", 0.75) .attr("fill", (d) => color(d.cluster)) .attr("cx", (d) => x(d.fertility)) .attr("cy", (d) => y(d.life_expect)) .attr("r", (d) => size(d.pop)); const legend = svg .append("g") .attr("transform", `translate(${width - 150}, ${margins.top + 10})`) .call(d => colorLegend(d)) const label = svg .append("text") .attr("display", "none") // Add mouse hover interactions, using D3 to update attributes directly. countries // the .on() method registers an event listener function .on("mouseover", function(e, d) { const [xm, ym] = d3.pointer(e) d3.select(e.target) .transition() .duration(50) .attr("r", size(d.pop)*1.3) // tooltip const labelText = `${d.country}` label .attr("display", null) .attr("font-size", 15) .attr("font-weight", "bold") .style("opacity", 1) .attr("transform", `translate(${xm}, ${ym})`) .attr("dx", 9) .attr("dy", -7) .text(d => labelText) }) .on('mousemove', function(e, d){ const [xm, ym] = d3.pointer(e) d3.select(e.target) .transition() .duration(50) .attr("r", size(d.pop)*1.3) // tooltip const labelText = `${d.country}` label .attr("display", null) .attr("font-size", 15) .attr("font-weight", "bold") .style("opacity", 1) .attr("transform", `translate(${xm}, ${ym})`) .attr("dx", 9) .attr("dy", -7) .text(d => labelText) }) .on("mouseout", function(e, d){ // Setting the stroke color to null removes the border entirely. d3.select(e.target) .transition() .duration(50) .attr("r", size(d.pop)) label .attr("display", "none") }); return svg.node(); }36:Tcb0,titleChart = { const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto;"); svg .append("g") .attr("transform", `translate(0, ${height - margins.bottom})`) .call(d3.axisBottom(x)) .append("text") .text("Fertility") .attr("x", width) .attr("y", -10) .attr("fill", "black") .attr("font-size", "12px") .attr("font-weight", "bold") .attr("text-anchor", "end"); svg .append("g") .attr("transform", `translate(${margins.left}, 0)`) .call(d3.axisLeft(y)) .append("text") .text("Life expectancy") .attr("transform", "translate(20, 40) rotate(-90)") .attr("fill", "black") .attr("font-size", "12px") .attr("font-weight", "bold") .attr("text-anchor", "end"); const countries = svg .selectAll("circle") .data(dataInitial) .join("circle") .sort((a, b) => b.pop - a.pop) .attr("opacity", 0.75) .attr("fill", (d) => color(d.cluster)) .attr("cx", (d) => x(d.fertility)) .attr("cy", (d) => y(d.life_expect)) .attr("r", (d) => size(d.pop)); const legend = svg .append("g") .attr("transform", `translate(${width - 150}, ${margins.top + 10})`) .call(d => colorLegend(d)) const label = svg .append("text") .attr("display", "none") // Add mouse hover interactions, using D3 to update attributes directly. countries // the .on() method registers an event listener function .on("mouseover", function(e, d) { const [xm, ym] = d3.pointer(e) d3.select(e.target) .transition() .duration(50) .attr("r", size(d.pop)*1.3) // tooltip const labelText = `${d.country}` label .attr("display", null) .attr("font-size", 15) .attr("font-weight", "bold") .style("opacity", 1) .attr("transform", `translate(${xm}, ${ym})`) .attr("dx", 9) .attr("dy", -7) .text(d => labelText) }) .on('mousemove', function(e, d){ const [xm, ym] = d3.pointer(e) d3.select(e.target) .transition() .duration(50) .attr("r", size(d.pop)*1.3) // tooltip const labelText = `${d.country}` label .attr("display", null) .attr("font-size", 15) .attr("font-weight", "bold") .style("opacity", 1) .attr("transform", `translate(${xm}, ${ym})`) .attr("dx", 9) .attr("dy", -7) .text(d => labelText) }) .on("mouseout", function(e, d){ // Setting the stroke color to null removes the border entirely. d3.select(e.target) .transition() .duration(50) .attr("r", size(d.pop)) label .attr("display", "none") }); // Add a title const title = svg.append("g") .append("text") .attr("x", width / 2) .attr("y", (margins.top / 2)) .attr("text-anchor", "middle") .attr("front-weight", "bold") .attr("font-family", "Helvetica Neue, Arial") .attr("font-size", "20px") .text("Relationship between worldwide fertility and life expectancy") return svg.node() }37:T10b3,animatedChart = { const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto;"); svg .append("g") .attr("transform", `translate(0, ${height - margins.bottom})`) .call(d3.axisBottom(x)) .append("text") .text("Fertility") .attr("x", width) .attr("y", -10) .attr("fill", "black") .attr("font-size", "12px") .attr("font-weight", "bold") .attr("text-anchor", "end"); svg .append("g") .attr("transform", `translate(${margins.left}, 0)`) .call(d3.axisLeft(y)) .append("text") .text("Life expectancy") .attr("transform", "translate(20, 40) rotate(-90)") .attr("fill", "black") .attr("font-size", "12px") .attr("font-weight", "bold") .attr("text-anchor", "end"); const countries = svg .selectAll("circle") .data(dataInitial) .join("circle") .sort((a, b) => b.pop - a.pop) .attr("opacity", 0.75) .attr("fill", (d) => color(d.cluster)) .attr("cx", (d) => x(d.fertility)) .attr("cy", (d) => y(d.life_expect)) .attr("r", (d) => size(d.pop)); const legend = svg .append("g") .attr("transform", `translate(${width - 150}, ${margins.top + 10})`) .call(d => colorLegend(d)) const label = svg .append("text") .attr("display", "none") // Add mouse hover interactions, using D3 to update attributes directly. countries // the .on() method registers an event listener function .on("mouseover", function(e, d) { const [xm, ym] = d3.pointer(e) d3.select(e.target) .transition() .duration(50) .attr("r", size(d.pop)*1.3) // tooltip const labelText = `${d.country}` label .attr("display", null) .attr("font-size", 15) .attr("font-weight", "bold") .style("opacity", 1) .attr("transform", `translate(${xm}, ${ym})`) .attr("dx", 9) .attr("dy", -7) .text(d => labelText) }) .on('mousemove', function(e, d){ const [xm, ym] = d3.pointer(e) d3.select(e.target) .transition() .duration(50) .attr("r", size(d.pop)*1.3) // tooltip const labelText = `${d.country}` label .attr("display", null) .attr("font-size", 15) .attr("font-weight", "bold") .style("opacity", 1) .attr("transform", `translate(${xm}, ${ym})`) .attr("dx", 9) .attr("dy", -7) .text(d => labelText) }) .on("mouseout", function(e, d){ // Setting the stroke color to null removes the border entirely. d3.select(e.target) .transition() .duration(50) .attr("r", size(d.pop)) label .attr("display", "none") }); const yearLabel = svg .append("text") .attr("class", "year") .attr("x", 40) .attr("y", height - margins.bottom - 20) .attr("fill", "#ccc") .attr("font-family", "Helvetica Neue, Arial") .attr("font-weight", 500) .attr("font-size", 80) .text(years[0]) // Add a title const title = svg.append("g") .append("text") .attr("x", width / 2) .attr("y", (margins.top / 2)) .attr("text-anchor", "middle") .attr("front-weight", "bold") .attr("font-family", "Helvetica Neue, Arial") .attr("font-size", "20px") .text("Relationship between worldwide fertility and life expectancy in 1955") function changeYear(year) { // Update the year label by simply setting it to the new value. yearLabel.text(year); // Update countries and animate the transition: countries .data( gapminder.filter((d) => d.year === year), (d) => d.country ) // <-- 🔑 .sort((a, b) => b.pop - a.pop) .transition() // <-- akin to a D3 selection, but interpolates values .duration(1000) // <-- 1000 ms === 1 sec .ease(d3.easeCubic) // <-- sets pacing; cubic is the default, try some others! .attr("cx", (d) => x(d.fertility)) .attr("cy", (d) => y(d.life_expect)) .attr("r", (d) => size(d.pop)); } // return svg.node() return Object.assign(svg.node(), { changeYear }); }38:[] 2f:{"id":"a096fcadb716dacf","slug":null,"title":"Animated bubble chart","thumbnail":"a5eb6be577d821e70438deded511d358f4c3a68ee10e43433e91dff3db817d30","access_level":"public","create_time":"$D2024-03-12T23:48:18.387Z","update_time":"$D2024-07-29T22:46:12.707Z","view_time":null,"first_public_time":"$D2024-07-19T03:52:55.087Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"38d64ae7e708b9b5","login":"yuanjt2","name":"Yuanjie (Tukey) Tu","avatar_url":"https://avatars-next.observableusercontent.com/34bc1666f6489c9f64e21f0c1ce4779151877d75c3f3c3f065e58f6a9bd14f0e","tier":"starter_2024"},"version":330,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"450fe71eaac7001f","login":"yuanjt2","name":"Yuanjie (Tukey) Tu","avatar_url":"https://avatars-next.observableusercontent.com/ea52f9066051a7ecd9e98037b8a1e1c0cf765011b054117f0758a83f8e870f29","tier":null}],"members":[{"type":"individual","id":"450fe71eaac7001f","login":"yuanjt2","name":"Yuanjie (Tukey) Tu","avatar_url":"https://avatars-next.observableusercontent.com/ea52f9066051a7ecd9e98037b8a1e1c0cf765011b054117f0758a83f8e870f29","tier":null,"role":"editor"},{"type":"team","id":"38d64ae7e708b9b5","login":"yuanjt2","name":"Yuanjie (Tukey) Tu","avatar_url":"https://avatars-next.observableusercontent.com/34bc1666f6489c9f64e21f0c1ce4779151877d75c3f3c3f065e58f6a9bd14f0e","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":{"id":"8feacd2f2ece2457","slug":"intro-to-d3","title":"Intro to D3","owner":{"id":"38d64ae7e708b9b5","login":"yuanjt2","name":"Yuanjie (Tukey) Tu"}},"type":"notebook","body":{"title":"Animated bubble chart","cells":[{"id":0,"value":"# Animated bubble chart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":54,"value":"_This tutorial is derived from [Introduction to D3, part 2](https://observablehq.com/d/87b749f200ee2eca) and is part of the [Intro to D3 Collection](https://observablehq.com/collection/@yuanjt2/intro-to-d3)_.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":58,"value":"md`In this tutorial, we are going to create a bubble chart, representing the relationship between fertility rate and life expectancy across countries in 1955. In our final chart, we will have:\n1. An x-axis positioned by fertility rate\n* An y-axis positioned by life expectancy\n* A list of bubbles indicating different countries, whose size representing population of the country\n* Tooltip, indicating country name for each bubble\n* A legend representing countries\n* A graph title\n\nThe final graph looks like this:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":317,"value":"viewof yearScrubber = Scrubber(\n d3.range(years[0], years[1] + 1, 5),\n { autoplay: false, delay: 1000, loop: false }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"finalChart.changeYear(yearScrubber)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"The steps we are going to take are:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":69,"value":"toc()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"## Load data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":222,"value":"Let's import D3, load and preview our dataset, and then get's get going!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":8,"value":"datasets = require('vega-datasets')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"gapminder = datasets['gapminder.json']()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"We could preview our dataset by using [Table](https://observablehq.com/documentation/inputs/overview) library. Observable writes a lot of helper functions, so it's worth checking if someone has already written a helper for something you want to do before writing it from scratch.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":228,"value":"import { Table } from \"@observablehq/inputs\" ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"Table(gapminder.slice(0, 5))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"years = d3.extent(gapminder, (d) => d.year)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"dataInitial = gapminder.filter((d) => d.year === years[0])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"## Define chart dimensions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":231,"value":"md`Next, let's set up the basic dimensions of our chart. For the width, we will use the built-in \\`width\\` variable provided by Observable (though you should feel free to override this if you want to). We will also set our desired \\`height\\`, plus \\`margins\\` with space to accommodate *x* and *y* axes.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"width","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"height = 500","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"margins = ({ \n top: 50, \n right: 10, \n bottom: 20, \n left: 20 \n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"## Define scales","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":236,"value":"For each variable in the bubble chart (such as *fertility* in the x axis, *life expectancy* in the y axis, *color* of each bubble, and *size* of each bubble), we need a corresponding [_scale_](https://medium.com/@mbostock/introducing-d3-scale-61980c51545f) to map from data values to visual values. For both x and y values, we use a linear scale ([_scaleLinear_](https://observablehq.com/@d3/d3-scalelinear)).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":41,"value":"x = d3\n .scaleLinear()\n .domain([0, d3.max(gapminder, (d) => d.fertility)])\n .range([margins.left, width - margins.right])\n .nice()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"y = d3\n .scaleLinear()\n .domain([0, d3.max(gapminder, (d) => d.life_expect)])\n .range([height - margins.bottom, margins.top])\n .nice()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"We use different colors to represent countries of different regions. In d3, we use an [ordinal scale](https://d3js.org/d3-scale/ordinal).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":48,"value":"color = d3\n .scaleOrdinal()\n .domain(gapminder.map((d) => d.cluster))\n .range(d3.schemeTableau10)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":240,"value":"We use size to represent different population sizes. We might think of using a linear scale intuitively, but here we use a square root scale, to prevent bubble size varies too widely. You are welcome to try out other [continuous scales](https://observablehq.com/@d3/continuous-scales)!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":50,"value":"size = d3\n .scaleSqrt()\n .domain(d3.extent(gapminder, (d) => d.pop))\n // at first, do\n // .range([0, 35])\n .range([4, 35])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"## Draw an SVG container","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":244,"value":"Using our scale definitions, we can generate our base plot. First, we need to create an empty svg container - our canvas to put the graph.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":81,"value":"emptyChart = {\n // Create the SVG container.\n const svg = d3.create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"viewBox\", [0, 0, width, height])\n .attr(\"style\", \"max-width: 100%; height: auto;\")\n\n return svg.node()\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"## Draw the axes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":247,"value":"md`Great! Now we have an empty canvas. Next, we are going to create the *x* and *y* axis by calling d3 [_axis_](https://d3js.org/d3-axis) function. For the *x* axis, we use *d3.axisBottom()* with an input of the *x* scaled defined earlier. We could further format the axis [_ticks_](https://observablehq.com/@d3/axis-ticks). `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"axesChart = {\n const svg = d3.create(\"svg\")\n .attr(\"width\", width)\n .attr(\"height\", height)\n .attr(\"viewBox\", [0, 0, width, height])\n .attr(\"style\", \"max-width: 100%; height: auto;\");\n\n svg\n .append(\"g\")\n .attr(\"transform\", `translate(0, ${height - margins.bottom})`)\n .call(d3.axisBottom(x))\n .append(\"text\")\n .text(\"Fertility\")\n .attr(\"x\", width)\n .attr(\"y\", -10)\n .attr(\"fill\", \"black\")\n .attr(\"font-size\", \"12px\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"text-anchor\", \"end\");\n\n svg\n .append(\"g\")\n .attr(\"transform\", `translate(${margins.left}, 0)`)\n .call(d3.axisLeft(y))\n .append(\"text\")\n .text(\"Life expectancy\")\n .attr(\"transform\", \"translate(20, 40) rotate(-90)\")\n .attr(\"fill\", \"black\")\n .attr(\"font-size\", \"12px\")\n .attr(\"font-weight\", \"bold\")\n .attr(\"text-anchor\", \"end\");\n\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"## Draw bubbles","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":253,"value":"Now we have our axes! Time to add the bubbles. We add bubbles by adding a circle to each country, setting its *x, y*, *size*, and *color*.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":91,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"## Add tooltips","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":255,"value":"While it's nice we have the bubbles, it's not very clear which bubble indicates which country. We could add a tooltip for that. For more details of adding a tooltip, check out my [tooltips: easy to hard](https://observablehq.com/d/3dc322b2ee5c02fc) tutorial!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":97,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"## Add legend","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":261,"value":"Now the chart looks pretty good! One small thing we need to add is a legend that connects bubble color and countries. If you haven't, check out my tutorial [two ways to create a legend](https://observablehq.com/d/de8a4877beb6cf80)!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":166,"value":"regions = [\n { index: 0, label: 'South Asia' },\n { index: 1, label: 'Europe & Central Asia' },\n { index: 2, label: 'Sub-Saharan Africa' },\n { index: 3, label: 'America' },\n { index: 4, label: 'East Asia & Pacific' },\n { index: 5, label: 'Middle East & North Africa' }\n];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"{\n const svg = d3.create('svg')\n .attr('width', 200)\n .attr('height', 110);\n \n const legend = svg.append('g')\n .attr('transform', 'translate(0, 10)')\n .call(colorLegend); // <-- our legend helper is invoked just like an axis generator\n\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"## Add title","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":267,"value":"We also need to add a title.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":174,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":293,"value":"## Add animations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":296,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":299,"value":"viewof yearAnimate = Scrubber(\n d3.range(years[0], years[1] + 1, 5),\n { autoplay: false, delay: 1000, loop: false }\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":303,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":311,"value":"animatedChart.changeYear(yearAnimate)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":315,"value":"Now we have an animated chart! Play with the scrubber and see how things change!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":103,"value":"## There is more 👀","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":105,"value":"D3 is known for its powerful interactions and animations. Check out my [Vanilla scatterplot](https://observablehq.com/d/87292e7e4b7c3ee0) and [bubble map](https://observablehq.com/d/82790b2f18f9d9c6) tutorials!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":107,"value":"## References\n* [Introduction to D3, part 2](https://observablehq.com/d/87b749f200ee2eca), Yuanjie Tu, 2023\n* [Tooltips: easy to hard](https://observablehq.com/d/3dc322b2ee5c02fc), Yuanjie Tu, 2024\n* [Two ways to create a legend](https://observablehq.com/d/de8a4877beb6cf80), Yuanjie Tu, 2024","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":13,"value":"import {textcolor} from \"@observablehq/text-color-annotations-in-markdown\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"import {toc} from \"@jonfroehlich/collapsible-toc\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 30:"$2f:body"