33:I[204091,["/_next/static/immutable/chunks/0flq6dgj4r1ua.js"],"IconMark"] 2b:null 2c:["$","title",null,{"children":"Day 18: #30DayChartChallenge. Eurostat Data. Population in Europe | Roman Sverdan | Observable"}] 31:T542,{ const svg = d3 .create("svg") .style("width", width + "px") .style("height", height + "px") .attr("viewBox", [0, 0, width, height]) .style("font", "12px sans-serif"); const group = svg.append("g").attr("stroke-linejoin", "round"); group .selectAll("path") .data(geojson.features) .enter() .append("path") .attr("d", path) .attr("fill", (d, i) => { return mapData[d.id] && mapData[d.id][year] ? colorScale(mapData[d.id][year]) : "#ccc"; }) .attr("class", "country") .on("mousemove", nodeMouseOver) .on("mouseout", nodeMouseOut); svg .append("path") .attr("fill", "none") .attr("stroke", "#333") .attr("opacity", "0.2") .attr("d", path(d3.geoGraticule().step([20, 20])())); function nodeMouseOver(event, d) { let x = event.pageX + 18; let y = event.pageY; x > width - 200 ? (x = x - 170) : x; toolTip .style("left", x + "px") .style("top", y + 2 + "px") .style("display", "block") .html( `${ d.properties.NAME }
Year: ${year}
Population: ${mapData[ d.id ][year].toLocaleString()}` ); } function nodeMouseOut() { toolTip.style("display", "none"); } return svg.node(); }32:[{"id":"291c25a5c92cc11a59a6ebbc29381dab865dcbac77bfa1d0c32447d6ba828e53605a9d2353b40088b8a0c22a5543b41094b998fea6ed199ecf5a31953da22bde","href":"https://static.observableusercontent.com/files/291c25a5c92cc11a59a6ebbc29381dab865dcbac77bfa1d0c32447d6ba828e53605a9d2353b40088b8a0c22a5543b41094b998fea6ed199ecf5a31953da22bde","name":"eurostat.csv","type":"text/csv","lastModified":1681841351004.678,"size":4706},{"id":"4c2cbe18da33c71569cda176074db002e5bfc6090869942c784d8b1db29e3a19af912e497a36ac4e86f5167d688cef73ed3948ee4ad9237f292990412b63af35","href":"https://static.observableusercontent.com/files/4c2cbe18da33c71569cda176074db002e5bfc6090869942c784d8b1db29e3a19af912e497a36ac4e86f5167d688cef73ed3948ee4ad9237f292990412b63af35","name":"europe-no-ru.json","type":"application/json","lastModified":1681841434354.004,"size":195914}] 2f:{"id":"284f0ffef3eb9931","slug":"30daychartchallenge-day-18","title":"Day 18: #30DayChartChallenge. Eurostat Data. Population in Europe","thumbnail":"3a1bb524722108460105936e0ccdaa6f18e11f9609f9f831d660208f5a824818","access_level":"public","create_time":"$D2023-04-18T18:08:43.950Z","update_time":"$D2023-04-18T18:37:29.785Z","view_time":null,"first_public_time":"$D2023-04-18T18:08:43.950Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"36db9f151dbeb3bc","login":"romansverdan","name":"Roman Sverdan","avatar_url":"https://avatars-next.observableusercontent.com/f10a4afffb8f95850eb88bda500106e7c81993daee3682132a6b9dde86884569","tier":"starter_2024"},"version":83,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"2c1ee78e30fade9b","login":"romansverdan","name":"Roman Sverdan","avatar_url":"https://avatars-next.observableusercontent.com/f10a4afffb8f95850eb88bda500106e7c81993daee3682132a6b9dde86884569","tier":null}],"members":[{"type":"individual","id":"2c1ee78e30fade9b","login":"romansverdan","name":"Roman Sverdan","avatar_url":"https://avatars-next.observableusercontent.com/f10a4afffb8f95850eb88bda500106e7c81993daee3682132a6b9dde86884569","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"6909a3a6854e8e08","slug":"30daychartchallenge-2023","title":"#30DayChartChallenge 2023","owner":{"id":"36db9f151dbeb3bc","login":"romansverdan","name":"Roman Sverdan"}},"type":"notebook","body":{"title":"Day 18: #30DayChartChallenge. Eurostat Data. Population in Europe","cells":[{"id":0,"value":"# Day 18: #30DayChartChallenge. Eurostat Data. Population in Europe","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":73,"value":"Data source: Eurostat","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":33,"value":"viewof year = Inputs.range([2011, 2022], {\n value: 2019,\n step: 1,\n label: \"Select Year\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"Legend(d3.scaleSequential([0, 100], colors), {\n title: \"Population Total\",\n ticks: 1,\n tickFormat: (d) => (d === 0 ? \"Less\" : \"More\")\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":15,"value":"margin = ({ top: 20, right: 20, bottom: 60, left: 20 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"height = 600","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"colors = [\"yellow\", \"green\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"colorScale = d3\n .scaleSequential()\n .domain(d3.extent(csv, (d) => d[year]))\n .interpolator(d3.interpolateRgb(colors[0], colors[1]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"geojson = {\n var geojson = topojson.feature(mapShape, mapShape.objects.europe);\n return geojson;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"path = d3.geoPath().projection(projection)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"bounds = path.bounds(geojson)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"projection = d3.geoConicConformal().fitSize([width, height], geojson)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"toolTip = d3.select(\"body\").append(\"div\").attr(\"class\", \"toolTip\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"mapShape = FileAttachment(\"europe-no-ru.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"csv = FileAttachment(\"eurostat.csv\").csv({typed: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"mapData = {\n let result = {};\n csv.forEach((el) => {\n result[el.country_code] = el;\n });\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"import { Legend } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body" 24:null 28:[["$","title","0",{"children":"Day 18: #30DayChartChallenge. Eurostat Data. Population in Europe | Roman Sverdan | Observable"}],["$","meta","1",{"property":"og:title","content":"Day 18: #30DayChartChallenge. Eurostat Data. Population in Europe"}],["$","meta","2",{"property":"og:description","content":"An Observable notebook by Roman Sverdan"}],["$","meta","3",{"property":"og:url","content":"https://observablehq.com/@romansverdan/30daychartchallenge-day-18"}],["$","meta","4",{"property":"og:site_name","content":"Observable"}],["$","meta","5",{"property":"og:image","content":"https://static.observableusercontent.com/thumbnail/3a1bb524722108460105936e0ccdaa6f18e11f9609f9f831d660208f5a824818.jpg"}],["$","meta","6",{"property":"og:image:width","content":"640"}],["$","meta","7",{"property":"og:image:height","content":"400"}],["$","meta","8",{"property":"og:type","content":"article"}],["$","meta","9",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","10",{"name":"twitter:title","content":"Day 18: #30DayChartChallenge. Eurostat Data. Population in Europe"}],["$","meta","11",{"name":"twitter:description","content":"An Observable notebook by Roman Sverdan"}],["$","meta","12",{"name":"twitter:image","content":"https://static.observableusercontent.com/thumbnail/3a1bb524722108460105936e0ccdaa6f18e11f9609f9f831d660208f5a824818.jpg"}],["$","meta","13",{"name":"twitter:image:width","content":"640"}],["$","meta","14",{"name":"twitter:image:height","content":"400"}],["$","link","15",{"rel":"icon","href":"/favicon.ico?favicon.2hqc0rwsy9zm6.ico","sizes":"96x96","type":"image/x-icon"}],["$","link","16",{"rel":"icon","href":"/icon.png?icon.1mhghqfpotdlb.png","sizes":"512x512","type":"image/png"}],["$","$L33","17",{}]]