27:null 28:["$","title",null,{"children":"Scatter plot with hover over | Dolley MacDermot's Workspace | Observable"}] 2d:T863,{ const svg = d3.create("svg").attr("width", width).attr("height", height); // Axis svg .append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(xAxis); svg.append("g").attr("transform", `translate(${margin.left}, 0)`).call(yAxis); // Bubbles const bubbles = svg .selectAll("bubbles") .data(data) .enter() .append("circle") .attr("class", "country_bubbles") .attr("cx", (d) => xScale(d["Income per person"])) .attr("cy", (d) => yScale(d["Life expectancy "])) // .attr("r", 4.2) //.attr("r", (d) => radiusScale(d.Population)) .attr("r", 0) .attr("fill", (d) => findColors(d.region)) .style("fill-opacity", 0.74) .attr("stroke", "#555") .on("mousemove", function (event, d, index) { toolTip .style("display", "block") .html( `

Region: ${d.region}
Country: ${d.name}
Population: ${d3.format(".2s")(d.Population)}

` ); let yoffset = 52; let xoffset = 10; toolTip .style("left", event.pageX - d3.select(".toolTip").node().offsetWidth - xoffset + "px") .style("top", event.pageY - yoffset + "px"); d3.select(this) .style("stroke-width", 3) //.style("fill", "#fff") .style("fill-opacity", 0.95); }) .on("mouseout", function () { toolTip .style("display", "none"); d3.select(this) .style("stroke-width", 1) .style("fill", (d) => findColors(d.region)) .style("fill-opacity", 0.74); }); bubbles .transition() .duration(1500) .attr("r", function(d) { console.log(d) return radiusScale(d.Population); }); // Tooltip const toolTip = d3.select("body").append("div").attr("class", "toolTip"); getLegend(svg, "vertical", 16, 7, 5, domains.length) return svg.node(); }2e:T4ba,// Vertical and horizontal Legend function getLegend(svg, direction, key_size, item_padding, text_x_offset, classes){ const legend_height = classes * (key_size + item_padding); // Legend as a group const legend = svg.append("g") // Apply a translation to the entire group .attr("transform", `translate(${width/1.09}, ${legend_height})`) // Boxes legend .selectAll("boxes") .data(domains) .enter() .append("rect") .attr("x", 0) .attr("y", (d, i) => (i * (key_size + item_padding))) .attr("width", key_size) .attr("height", key_size) .style("fill", (d) => findColors(d)); // Labels legend .selectAll("labels") .data(domains) .enter() .append("text") .attr("x", key_size) .attr("y", (d, i) => i * (key_size + item_padding)) .attr("dx", text_x_offset) .attr("dy", ".5em") .text((d) => d) .attr("text-anchor", "left") .style("alignment-baseline", "middle") .style("font-family", "sans-serif") .style("text-transform", "capitalize") .style("font-size", key_size+"px"); } 2f:[{"id":"db53ad39206d1df2b090dc16a45ce39a5fe4a761da2bde891d8cf0e307809633f96e6c00d40712d873c543875da7b5476fa434929ce14e19cc32a8e5ea96ae68","href":"https://static.observableusercontent.com/files/db53ad39206d1df2b090dc16a45ce39a5fe4a761da2bde891d8cf0e307809633f96e6c00d40712d873c543875da7b5476fa434929ce14e19cc32a8e5ea96ae68","name":"gapminder_lifeExpectancy.csv","type":"text/csv","lastModified":1701276558073.541,"size":1428161},{"id":"f1433c139e49431eb276792a2242be4bd16c4fed78c1b5cd41f3345f7735f3fafb26bb4f03a7b4726ebd5fc5b331bf7c68b69fd8588d042705bb38af70ade180","href":"https://static.observableusercontent.com/files/f1433c139e49431eb276792a2242be4bd16c4fed78c1b5cd41f3345f7735f3fafb26bb4f03a7b4726ebd5fc5b331bf7c68b69fd8588d042705bb38af70ade180","name":"gapminder_gdpPerCapita.csv","type":"text/csv","lastModified":1701276558073.541,"size":2002723},{"id":"59e2e5fdc117bc54dcfd7d7ce5443be7e51f1f97128415bd0008c309822a108231af10a392669f478ab15fb8e56978fad17dbf5fefc3db7f7e400363fe94c451","href":"https://static.observableusercontent.com/files/59e2e5fdc117bc54dcfd7d7ce5443be7e51f1f97128415bd0008c309822a108231af10a392669f478ab15fb8e56978fad17dbf5fefc3db7f7e400363fe94c451","name":"gapminder_population.csv","type":"text/csv","lastModified":1701276558073.541,"size":1625412},{"id":"48633b19e2a57eeb543b49b3f7f75130b84760c48e18d2850483f154ba6aab81d001ee9cbad32997472e478f8af09fd1494938a355ed8b40e07528e67a9a453a","href":"https://static.observableusercontent.com/files/48633b19e2a57eeb543b49b3f7f75130b84760c48e18d2850483f154ba6aab81d001ee9cbad32997472e478f8af09fd1494938a355ed8b40e07528e67a9a453a","name":"gapminder_region.csv","type":"text/csv","lastModified":1701276558073.541,"size":29135}] 2b:{"id":"027268f406d4c0f8","slug":null,"title":"Scatter plot with hover over","thumbnail":"02df4c41ce08283e88bf35446a7d9087a3d10a608a87c1b6519705ef318b283d","access_level":"public","create_time":"$D2023-11-29T16:49:18.073Z","update_time":"$D2024-11-12T16:21:49.209Z","view_time":null,"first_public_time":"$D2023-11-29T16:49:18.073Z","has_unpublished_edits":null,"fork":{"id":"f950d2c0aa85d314","slug":null,"title":"Scatter plot","owner":{"id":"10f5a2e550c6a358","login":"dolley-macdermot-ws","name":"Dolley MacDermot's Workspace"}},"stars":0,"starred":false,"owner":{"type":"team","id":"10f5a2e550c6a358","login":"dolley-macdermot-ws","name":"Dolley MacDermot's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/467212815fa1f88b9af8cf1907e35a040c2332a16f1ff00a3ea0c88621eae65e","tier":"starter_2024"},"version":359,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e07f3a1bd39480f0","login":"dolley-macdermot","name":"Dolley MacDermot","avatar_url":"https://avatars-next.observableusercontent.com/a3a7ebf9d3334da8f6120e1a47a2e37fbb3028c516e633eb5df2c8899f6d37e4","tier":null}],"members":[{"type":"individual","id":"e07f3a1bd39480f0","login":"dolley-macdermot","name":"Dolley MacDermot","avatar_url":"https://avatars-next.observableusercontent.com/a3a7ebf9d3334da8f6120e1a47a2e37fbb3028c516e633eb5df2c8899f6d37e4","tier":null,"role":"editor"},{"type":"team","id":"10f5a2e550c6a358","login":"dolley-macdermot-ws","name":"Dolley MacDermot's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/467212815fa1f88b9af8cf1907e35a040c2332a16f1ff00a3ea0c88621eae65e","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Scatter plot with hover over","cells":[{"id":0,"value":"# Scatter plot with hover over","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":44,"value":"$2d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"## Colors","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":136,"value":"findColors = (region) => {\n let color;\n if (region === \"asia\") {\n color = \"#E74F2A\";\n } else if (region === \"europe\") {\n color = \"#FFE473\";\n } else if (region === \"africa\") {\n color = \"#234FBF\";\n } else if (region === \"americas\") {\n color = \"#00835D\";\n }\n return color;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"## Axis\n- Scale\n- Ticks","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":42,"value":"yAxis = d3.axisLeft(yScale) //.ticks(5)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"#### Same distance between ticks \n- log(1000) - log(2), log(1000), log(1000) + log(2), log(1000) + log(2) + log(2)\n- log(1000/2), log(1000), log(1000 x 2), log(1000 x 2 x 2)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":40,"value":"xAxis = d3\n .axisBottom(xScale)\n .tickFormat(d3.format(\"~s\")) \n .tickValues([500, 1000, 2000, 4000, 8000, 16000, 32000, 64000])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"## Scale \n- domain, range\n- scaleLinear\n- scaleLog\n- scaleSqrt\n- SVG coordinates (0, 0)\n- d3.extent","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":31,"value":"yScale = d3\n .scaleLinear()\n .domain(d3.extent(data, (d) => d[\"Life expectancy \"]))\n .range([height - margin.bottom, margin.top])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"xScale = d3\n .scaleLog()\n // .domain(d3.extent(data, (d) => d[\"Income per person\"]))\n .domain([500, d3.max(data, (d) => d[\"Income per person\"])])\n // .domain([0, d3.max(data, (d) => d[\"Income per person\"])])\n .range([margin.left, width - margin.right])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"radiusScale = d3\n .scaleSqrt()\n .domain([0, d3.max(data, (d) => d.Population)])\n .range([0, 50])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"margin = ({ top: 20, right: 100, bottom: 60, left: 60 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"height = 540","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"## Gapminder Data\n- Visualization: https://www.gapminder.org/tools/#$chart-type=bubbles&url=v1\n- GDP per capital (Source: [Gapminder](https://www.gapminder.org/data/documentation/gd001/), [World Bank](https://data.worldbank.org/indicator/NY.GDP.PCAP.PP.KD)) → [Gapminder google sheet](https://docs.google.com/spreadsheets/d/17p7CPobPSyWb5dmVyf_bmZg9Jbh4PjlRPc0G1tJjTUk/edit#gid=1003383399)\n- Life expectancy at birth (Source: [Gapminder](https://www.gapminder.org/data/documentation/gd004/), Period 1970-2016, main source: IHME, Period 2017-2099, main source: UN) → [Gapminder google sheet](https://docs.google.com/spreadsheets/d/1RheSon1-q4vFc3AGyupVPH6ptEByE-VtnjOCselU0PE/edit#gid=176703676)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":143,"value":"#### Regions \n- Get distinct values","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":149,"value":"[...new Set(data.map((d) => d.region))]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":140,"value":"#### Combine data\n- Sort","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":17,"value":"data = life_expectancy\n .map((d) => {\n d[\"Income per person\"] = gdp_per_capita.find((g) => g.name === d.name)[\n \"Income per person\"\n ];\n d.Population = population.find((p) => p.name === d.name).Population;\n d.region = region.find((r) => r.name === d.name).four_regions;\n return d;\n })\n .sort((a, b) => b.Population - a.Population)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"life_expectancy = d3\n .csvParse(\n await FileAttachment(\"gapminder_lifeExpectancy.csv\").text(),\n d3.autoType\n )\n .filter((d) => d.time === 2022)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"gdp_per_capita = d3\n .csvParse(\n await FileAttachment(\"gapminder_gdpPerCapita.csv\").text(),\n d3.autoType\n )\n .filter((d) => d.time === 2022)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"population = d3\n .csvParse(\n await FileAttachment(\"gapminder_population.csv\").text(),\n d3.autoType\n )\n .filter((d) => d.time === 2022)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":138,"value":"region = d3.csvParse(\n await FileAttachment(\"gapminder_region.csv\").text(),\n d3.autoType\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":234,"value":"$2e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"domains = [\"asia\", \"americas\",\"africa\",\"europe\"];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"## Style","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":186,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2c:"$2b:body"