2b:null 2c:["$","title",null,{"children":"World Map V15: Bubble Map | Final Project | Observable"}] 31:T12d8,chart2 = { const svg = d3.create("svg").attr("viewBox", `0 0 ${width} ${height}`); const tooltip = d3.select("body").append("div") .attr("class", "tooltip") .style("position", "absolute") .style("visibility", "hidden"); // Function to handle click events function handleClick(event, d) { closeModal(); } // function to close modal function closeModal() { const myModal = document.getElementById("myModal"); myModal.style.display = "none"; } const sizeScale = d3.scaleSqrt().domain([0, d3.max(dataJoined, d => d.pop_size)]).range([5, 50]); const colorScale = d3.scaleSequential(d3.interpolateBlues).domain([1, d3.max(dataJoined, d => d.mean_homo)]); svg.selectAll("path") .data(countries.features) .enter() .append("g") .attr("class", "country-group") .each(function (d) { const countryGroup = d3.select(this); // Append path element countryGroup.append("path") .attr("d", path) .attr("stroke", "#111") .attr("stroke-width", 0.5) .attr("fill", "none") // Tooltip functionality .on("mouseover", function (event, d) { let text = d.properties.name const mean_homo = d.properties.dataJoined.get(year)[0].mean_homo const mean_homo_rounded = Math.round((mean_homo + Number.EPSILON) * 100) / 100 text = text + "\nJustifiability: " + mean_homo_rounded const year_to_show = d.properties.dataJoined.get(year)[0].displayed_year text = text + "\nThis value is from: " + year_to_show showToolTip(text, [event.pageX, event.pageY]) }) .on("mousemove", function (event) { d3.select(".tooltip") .style("top", event.pageY - 10 + "px") .style("left", event.pageX + 10 + "px") }) .on("mouseout", function () { d3.select(".tooltip").style("visibility", "hidden") }) .on("click", handleClick) }); svg.selectAll("g") .data(countries.features) .each(function (d) { const countryGroup = d3.select(this); // Append star symbol if when_legal equals the displayed year and not already added const whenLegalYear = d.properties.dataJoined?.get(year) ? d.properties.dataJoined.get(year)[0].when_legal : null; const symbolAdded = whenLegalYear !== null && whenLegalYear <= year; console.log("Symbol Added:", symbolAdded); // Log the presence of the symbolAdded condition const [x, y] = path.centroid(d); const countryArea = path.area(d); // Append circle for population size and color based on rating countryGroup.append("circle") .attr("class", "bubble") .attr("cx", x) .attr("cy", y) .attr("r", sizeScale(d.properties.dataJoined?.get(year)[0].pop_size)) // .attr("fill", colorScale(d.properties.dataJoined.get(year)[0].mean_homo)) .attr("fill", d => d.properties.dataJoined?.get(year) && !isNaN(d.properties.dataJoined?.get(year)[0].mean_homo) ? cScale(d.properties.dataJoined.get(year)[0].mean_homo) : "lightgrey") .style("opacity", 0.5); if (symbolAdded) { const [x, y] = path.centroid(d); const countryArea = path.area(d); const symbolSize = Math.log(countryArea) * 2; // Adjust the scaling factor as needed console.log("Symbol Size:", symbolSize); // Log the symbol size countryGroup.append("text") .attr("class", "symbol") .attr("x", x) .attr("y", y) .text("\u2726") // Unicode for six-pointed star symbol .attr("text-anchor", "middle") .attr("alignment-baseline", "middle") .style("font-size", `${symbolSize}px`) .style("fill", "orange"); } }); svg.selectAll("g") .on("mouseover", function (event, d) { let text = d.properties.name const mean_homo = d.properties.dataJoined.get(year)[0].mean_homo const mean_homo_rounded = Math.round((mean_homo + Number.EPSILON) * 100) / 100 text = text + "\nJustifiability: " + mean_homo_rounded const year_to_show = d.properties.dataJoined.get(year)[0].displayed_year text = text + "\nThis value is from: " + year_to_show showToolTip(text, [event.pageX, event.pageY]) }) .on("mousemove", function (event) { d3.select(".tooltip") .style("top", event.pageY - 10 + "px") .style("left", event.pageX + 10 + "px") }) .on("mouseout", function () { d3.select(".tooltip").style("visibility", "hidden") }); return svg.node(); // function showToolTip(text, [x, y]) { // tooltip.style("visibility", "visible").html(text); // } };32:[{"id":"1f2d63c6cbc44ae0419ac41a20c5a2001d2334ee9fbedaa94ba57b40c271c26378fe5a3748deecdb7508b4559aaa87fccb6600ea9c1b6654f382830c7051ee2b","href":"https://static.observableusercontent.com/files/1f2d63c6cbc44ae0419ac41a20c5a2001d2334ee9fbedaa94ba57b40c271c26378fe5a3748deecdb7508b4559aaa87fccb6600ea9c1b6654f382830c7051ee2b","name":"display_years_2.csv","type":"text/csv","lastModified":1702218845765.911,"size":133180},{"id":"8887efb3b24cdcb07059fdfbe7e0fe678ee42f00af5b3f9fc545b360a2a4eebdfa604075e3004b9924e0de99acd23008b72c20684e43db5b155c90e600d092f5","href":"https://static.observableusercontent.com/files/8887efb3b24cdcb07059fdfbe7e0fe678ee42f00af5b3f9fc545b360a2a4eebdfa604075e3004b9924e0de99acd23008b72c20684e43db5b155c90e600d092f5","name":"legality_3.csv","type":"text/csv","lastModified":1702218845765.911,"size":2104},{"id":"7c6167b65013c12f3978b4d8e85dd28a27e3b5eb580d1e76696ce5b0d399c196de2b02c45e734462931e1af823698e36bb072722253d5e03e7fb61222755bc0c","href":"https://static.observableusercontent.com/files/7c6167b65013c12f3978b4d8e85dd28a27e3b5eb580d1e76696ce5b0d399c196de2b02c45e734462931e1af823698e36bb072722253d5e03e7fb61222755bc0c","name":"countries-110m.json","type":"application/json","lastModified":1702218845765.911,"size":107761},{"id":"9c46153dbfbccc338e637aabdbd9fb58d2bda3395377de19184a75f22c9529147859e5c1f864042ee4ed6258df2955cc9c10a1e0b580e8500d8a761657441653","href":"https://static.observableusercontent.com/files/9c46153dbfbccc338e637aabdbd9fb58d2bda3395377de19184a75f22c9529147859e5c1f864042ee4ed6258df2955cc9c10a1e0b580e8500d8a761657441653","name":"popSize@1.csv","type":"text/csv","lastModified":1702223202487.089,"size":147235},{"id":"d07a32b25c4217b7fdb545a24d0625449146d312b83dc9494f5e90f3f15d2610e9d3e1ba4207101421425c78bf93fa4f78e463598fbc803a94eb8035324f4233","href":"https://static.observableusercontent.com/files/d07a32b25c4217b7fdb545a24d0625449146d312b83dc9494f5e90f3f15d2610e9d3e1ba4207101421425c78bf93fa4f78e463598fbc803a94eb8035324f4233","name":"popSize@2.csv","type":"text/csv","lastModified":1702230656734.679,"size":147246},{"id":"bb12cf76a928a442e8b162bdc199370758c17fac2546fa298310b6eae89ac9a750b936ff8c1eab6733a4d9ccee434ba6c70691ce2ca7290489e00e32501f98aa","href":"https://static.observableusercontent.com/files/bb12cf76a928a442e8b162bdc199370758c17fac2546fa298310b6eae89ac9a750b936ff8c1eab6733a4d9ccee434ba6c70691ce2ca7290489e00e32501f98aa","name":"popSize@4.csv","type":"text/csv","lastModified":1702232065562.233,"size":147234}] 2f:{"id":"945f03a4d59bd578","slug":null,"title":"World Map V15: Bubble Map","thumbnail":"566b4b28a9f70522a5b214e7cbb4e9cd92171dbb373c5e06fa7c31c61468cb6d","access_level":"public","create_time":"$D2023-12-10T14:34:05.765Z","update_time":"$D2023-12-10T18:27:43.873Z","view_time":null,"first_public_time":"$D2023-12-10T14:34:05.765Z","has_unpublished_edits":null,"fork":{"id":"cf6f2465e8f447c8","slug":"world-map-choropleth","title":"World Map V14: Larger Legend","owner":{"id":"2d2998fdab73aba0","login":"finaldataviswvs","name":"Final Project "}},"stars":0,"starred":false,"owner":{"type":"team","id":"2d2998fdab73aba0","login":"finaldataviswvs","name":"Final Project ","avatar_url":"https://avatars-next.observableusercontent.com/6f02def99631cadbfc4ebc825ab915c2065810cd562e906d74593c9dbf0f7791","tier":"starter_2024"},"version":929,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"98cfc7f6e87fb3b0","login":"jeanie-yu","name":"Jeanie Yu","avatar_url":"https://avatars-next.observableusercontent.com/2dfc38310d700c6d88dd871da2dbf915a92f4c426039e8423d5e06aca3995e9c","tier":null}],"members":[{"type":"team","id":"2d2998fdab73aba0","login":"finaldataviswvs","name":"Final Project ","avatar_url":"https://avatars-next.observableusercontent.com/6f02def99631cadbfc4ebc825ab915c2065810cd562e906d74593c9dbf0f7791","tier":"starter_2024","role":"editor"},{"type":"individual","id":"98cfc7f6e87fb3b0","login":"jeanie-yu","name":"Jeanie Yu","avatar_url":"https://avatars-next.observableusercontent.com/2dfc38310d700c6d88dd871da2dbf915a92f4c426039e8423d5e06aca3995e9c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"World Map V15: Bubble Map","cells":[{"id":0,"value":"# World Map V15: Bubble Map","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":100,"value":"viewof year = Scrubber(years, {\n delay: 250,\n loop: false,\n initial: 2022,\n autoplay: false\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"legend({\n color: cScale,\n fontSizeTitle: 24,\n title: \"How Justifiable is Homosexuality?\",\n tickFormat: t => + t ,\n ticks: 10,\n width: 750\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":304,"value":"html``\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":845,"value":"\n\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":858,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":886,"value":"countries110m = FileAttachment(\"countries-110m.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":449,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":456,"value":"\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":39,"value":"showToolTip = (text, coords) => {\n d3.select(\".tooltip\")\n .text(text)\n .style(\"top\", coords[1] + \"px\")\n .style(\"left\", coords[0] + \"px\")\n .style(\"visibility\", \"visible\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"cScale = d3.scaleLinear()\n .domain([ \n 1,\n 10])\n .range([-1, 0, 1])\n .interpolate((a, b) => a < 0 \n ? t => d3.interpolateBlues(t) \n : t => d3.interpolateReds(1-t))\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"outline = ({ type: \"Sphere\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"projection = d3.geoNaturalEarth1()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"path = d3.geoPath(projection)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"height = {\n const [[x0, y0], [x1, y1]] = d3.geoPath(projection.fitWidth(width, outline)).bounds(outline);\n const dy = Math.ceil(y1 - y0), l = Math.min(Math.ceil(x1 - x0), dy);\n projection.scale(projection.scale() * (l - 1) / l).precision(0.2);\n return dy;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"countries = {\n // group entities by name and year\n const entities = d3.group(dataJoined, d => d.country, d => d.year);\n \n // attach data to each country in properties\n const countries = topojson.feature(world, world.objects.countries);\n countries.features.forEach(country => {\n country.properties.dataJoined = entities.get(country.properties.name);\n })\n \n return countries\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"data = d3.csvParse(await FileAttachment(\"display_years_2.csv\").text(), d => {\n if (d.country === \"United States\") {\n d.country = \"United States of America\"\n }\n return {\n country: d.Country,\n year: +d.year,\n wave: +d.Wave,\n country_code: +d.Country_Code,\n mean_homo: +d.mean_homo,\n displayed_year: +d.Displayed_Year,\n actual_boolean: +d.Actual}\n} )\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"// Assuming your second CSV file is named \"legality_1.csv\"\nlegalityData = await FileAttachment(\"legality_3.csv\").csv({typed: true});\n\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":287,"value":"// Merge data from the second CSV into the original data array\ndataJoined = data.map(d => {\n const matchingRow = legalityData.find(row => row.country === d.country);\n const matchingPop = popsize4.find(row => row.country === d.country);\n console.log(matchingRow)\n \n // Add the new property 'when_legal' based on the additional data\n return {\n ...d,\n when_legal: matchingRow ? +matchingRow.year : null, \n pop_size: matchingPop ? +matchingPop[d.year] : null, \n \n }\n});\n\n// Now, each object in the output array has a new 'when_legal' property based on the legality data","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":926,"value":"popsize4 = await FileAttachment(\"popSize@4.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"popsize4","database":"$undefined"},{"id":923,"value":"popsize2 = await FileAttachment(\"popSize@2.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"popsize2","database":"$undefined"},{"id":829,"value":"popsize3[0][data[0].year]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":825,"value":"popsize3 = await FileAttachment(\"popSize@3.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"popsize3","database":"$undefined"},{"id":368,"value":"dataJoined.forEach(d => {\n delete d.Year;\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":349,"value":"// Function to calculate symbol size based on country area\nfunction calculateSymbolSize(area) {\n // You can adjust the scaling factor based on your preference\n const scaleFactor = 50;\n return Math.sqrt(area) * scaleFactor;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"{for (let i = 0; i < data.length; i++) {\n data[i].Year += cars[i] + \"
\";\n}}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"years = Array.from(new Set(data.map(d => d.year).sort()))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":417,"value":"displayed_years = Array.from(new Set(data.map(d => d.displayed_year)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"world = await FileAttachment(\"countries-110m.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"import { legend } from \"@finaldataviswvs/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"import { slider } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":388,"value":"d3Legend = require(\"d3-svg-legend\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"styles = html`\n `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 30:"$2f:body"