Cities: ${d.cities}%

29:null 2a:["$","title",null,{"children":"Grid Cartogram of Europe | Joe Davies | Observable"}] 2f:T127c,chart = { const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); const g = svg.append("g").attr("transform", `translate(0, 0)`); // cells and their compositions const cells = g .selectAll("svgs") .data(degurbaData) .enter() .append("svg") .attr("class", "cell-svg") .html((d) => { const [i, j] = position.get(d.countryCode); let citiesWidth = cellScale(d.cities); let townsWidth = cellScale(d.towns); let ruralWidth = cellScale(d.rural); // cell rects return ` //first segment Cities: ${d.cities}% //second segment Towns: ${d.towns}% //third segment Rural: ${d.rural}% //border frame `; }); const texts = g .selectAll("texts") .data(degurbaData) .enter() .append("text") .attr("x", (d, i) => cellSize / 2) .attr("y", (d, i) => cellSize / 2 + 5) .attr("transform", (d) => { const [i, j] = position.get(d.countryCode); return `translate(${i * cellSize + i * cellPadding},${ j * cellSize + j * cellPadding })`; }) .attr("text-anchor", "middle") .attr("font-family", "sans-serif") .attr("font-size", 15) .style("pointer-events", "none") // .attr("fill", (d) => getTextColor(d[type])) .attr("fill", (d) => "white") .text((d) => d.countryCode); //add legend let domains = ["Cities", "Towns/Suburbs", "Rural areas"]; const legend = svg .append("g") // Apply a translation to the entire group .attr("transform", `translate(${Math.max(width - 600, 0)}, 200)`); const size = 20; const borderPadding = 15; const itemPadding = 5; const textOffset = 2; legend.append("text").text("Percentage of the population that lives in..."); // Boxes legend .selectAll("boxes") .data(domains) .enter() .append("rect") .attr("x", borderPadding) .attr("y", (d, i) => borderPadding + i * (size + itemPadding)) .attr("width", size) .attr("height", size) .attr("class", "legend-rect") .style("fill", (d, i) => colors[i]) .on("mouseover", function (event, i) { // Get the color for the hovered legend box const hoveredColor = colors[i]; const allRects = d3.selectAll(".cell-rect"); // Debugging: Output the number of selected elements console.log("Total selected rects:", allRects.size()); // Set all cells to white, except the segments that match the hovered color allRects.each(function () { const rect = d3.select(this); const rectFill = rgbStringToHex(rect.style("fill")); console.log(rectFill, hoveredColor.toUpperCase()); if (rectFill && rectFill !== hoveredColor.toUpperCase()) { rect.style("fill", "white"); } }); }) .on("mouseout", function (event, i) { cells.each(function (d) { const cellRects = d3.select(this).selectAll("rect"); // Restore the color for each segment based on the original data // Assuming that cities, towns, and rural areas correspond to indices 0, 1, and 2 in the colors array cellRects.filter((_, index) => index === 0).style("fill", colors[0]); // Cities cellRects.filter((_, index) => index === 1).style("fill", colors[1]); // Towns cellRects.filter((_, index) => index === 2).style("fill", colors[2]); // Rural }); }); // Labels legend .selectAll("labels") .data(domains) .enter() .append("text") .attr("x", borderPadding + size + itemPadding) .attr( "y", (d, i) => borderPadding + i * (size + itemPadding) + size / 2 + textOffset ) .text((d) => d) .attr("text-anchor", "left") .style("alignment-baseline", "middle"); // .style("font-family", "sans-serif"); return svg.node(); }30:T413,map = { const map = eurostatmap .map("choropleth") .title("Grid cartogram") .subtitle("test") .stat({ eurostatDatasetCode: "nama_10r_3gdp", unitText: "euro per inhabitant", filters: { TIME: "2021", UNIT: "EUR_HAB" } }) .gridCartogram(true) .gridCartogramShape("hexagon") .gridCartogramCellPadding(8) //.gridCartogramMargins(110) .gridCartogramPositions( ` ,IS, , , ,NO,SE,FI, , , , , , , , , , , , ,EE, , , , , , , , , , , ,LV, , , , ,IE,UK, , ,DK, ,LT, , , , , , , , ,NL,DE,PL, , , , , , , , ,BE,LU,CZ,SK,UA, , , , , , ,FR,CH,LI,AT,HU,RO,MD, , , , ,PT,ES, ,IT,SI,HR,RS,BG, , , , , , , , , ,BA,ME,MK, , , , , , , , , , ,AL,EL,TR, , , , , , ,MT, , , , ,CY, , , ` ) .numberOfClasses(6) .nutsLevel(0) .legend({ x: 10, y: 120, title: "Test", boxOpacity: 0, barChart: false }) .build(); }31:T8cf,degurbaData = [ //cities,towns/suburbs,rural { countryCode: "BE", cities: 31.3, towns: 55.6, rural: 13.1 }, { countryCode: "BG", cities: 51.2, towns: 26.2, rural: 22.6 }, { countryCode: "CZ", cities: 30.2, towns: 34.2, rural: 35.6 }, { countryCode: "DK", cities: 32.0, towns: 33.4, rural: 34.6 }, { countryCode: "DE", cities: 36.1, towns: 43.7, rural: 20.3 }, { countryCode: "EE", cities: 47.1, towns: 17.6, rural: 35.2 }, { countryCode: "IE", cities: 37.2, towns: 20.5, rural: 42.3 }, { countryCode: "EL", cities: 47.3, towns: 22.7, rural: 30.0 }, { countryCode: "ES", cities: 54.2, towns: 32.5, rural: 13.3 }, { countryCode: "FR", cities: 38.3, towns: 28.1, rural: 33.6 }, { countryCode: "HR", cities: 33.6, towns: 32.7, rural: 33.7 }, { countryCode: "IT", cities: 35.2, towns: 47.7, rural: 17.1 }, { countryCode: "CY", cities: 59.5, towns: 21.7, rural: 18.7 }, { countryCode: "LV", cities: 43.0, towns: 21.8, rural: 35.2 }, { countryCode: "LT", cities: 43.6, towns: 14.7, rural: 41.8 }, { countryCode: "LU", cities: 19.5, towns: 47.9, rural: 32.6 }, { countryCode: "HU", cities: 35.7, towns: 33.8, rural: 30.5 }, { countryCode: "MT", cities: 48.5, towns: 49.0, rural: 2.5 }, { countryCode: "NL", cities: 53.2, towns: 36.5, rural: 10.3 }, { countryCode: "AT", cities: 31.2, towns: 30.8, rural: 38.1 }, { countryCode: "PL", cities: 33.3, towns: 30.6, rural: 36.1 }, { countryCode: "PT", cities: 44.6, towns: 31.5, rural: 23.9 }, { countryCode: "RO", cities: 34.8, towns: 26.4, rural: 38.8 }, { countryCode: "SI", cities: 19.4, towns: 36.1, rural: 44.5 }, { countryCode: "SK", cities: 20.6, towns: 37.3, rural: 42.1 }, { countryCode: "FI", cities: 38.9, towns: 33.4, rural: 27.8 }, { countryCode: "SE", cities: 42.7, towns: 38.0, rural: 19.3 }, { countryCode: "IS", cities: 63.8, towns: 16.6, rural: 19.6 }, { countryCode: "LI", cities: 0.0, towns: 100.0, rural: 0.0 }, { countryCode: "NO", cities: 29.3, towns: 41.5, rural: 29.3 }, { countryCode: "CH", cities: 29.7, towns: 50.8, rural: 19.5 }, { countryCode: "MK", cities: 37.6, towns: 51.6, rural: 10.8 }, { countryCode: "AL", cities: 43.6, towns: 22.7, rural: 33.8 }, { countryCode: "RS", cities: 28.5, towns: 49.6, rural: 22.0 } ]32:Tbe8,data = [ { state: "Iceland", countryCode: "IS", bars: 1, mask: 1, indoor_dining: 1 }, { state: "NO", countryCode: "NO", bars: 1, mask: 1, indoor_dining: 0 }, { state: "SE", countryCode: "SE", bars: 0, mask: 0, indoor_dining: 1 }, { state: "FI", countryCode: "FI", bars: 1, mask: 1, indoor_dining: 1 }, { state: "NO", countryCode: "NO", bars: 1, mask: 1, indoor_dining: 1 }, { state: "IE", countryCode: "IE", bars: 1, mask: 1, indoor_dining: 0 }, { state: "UK", countryCode: "UK", bars: 1, mask: 0, indoor_dining: 1 }, { state: "EE", countryCode: "EE", bars: 1, mask: 1, indoor_dining: 1 }, { state: "LV", countryCode: "LV", bars: 1, mask: 0, indoor_dining: 1 }, { state: "LT", countryCode: "LT", bars: 0, mask: 1, indoor_dining: 1 }, { state: "FR", countryCode: "FR", bars: 1, mask: 1, indoor_dining: 1 }, { state: "ES", countryCode: "ES", bars: 1, mask: 0, indoor_dining: 0 }, { state: "PT", countryCode: "PT", bars: 1, mask: 1, indoor_dining: 1 }, { state: "DE", countryCode: "DE", bars: 1, mask: 1, indoor_dining: 1 }, { state: "IT", countryCode: "IT", bars: 0, mask: 1, indoor_dining: 1 }, { state: "NL", countryCode: "NL", bars: 1, mask: 1, indoor_dining: 1 }, { state: "DK", countryCode: "DK", bars: 1, mask: 1, indoor_dining: 1 }, { state: "PL", countryCode: "PL", bars: 1, mask: 1, indoor_dining: 1 }, { state: "MD", countryCode: "MD", bars: 1, mask: 1, indoor_dining: 1 }, { state: "RO", countryCode: "RO", bars: 1, mask: 1, indoor_dining: 1 }, { state: "AT", countryCode: "AT", bars: 1, mask: 1, indoor_dining: 1 }, { state: "SK", countryCode: "SK", bars: 0, mask: 1, indoor_dining: 1 }, { state: "SI", countryCode: "SI", bars: 1, mask: 1, indoor_dining: 1 }, { state: "HR", countryCode: "HR", bars: 1, mask: 1, indoor_dining: 0 }, { state: "CH", countryCode: "CH", bars: 1, mask: 1, indoor_dining: 0 }, { state: "CZ", countryCode: "CZ", bars: 0, mask: 0, indoor_dining: 0 }, { state: "LU", countryCode: "LU", bars: 1, mask: 1, indoor_dining: 1 }, { state: "HU", countryCode: "HU", bars: 0, mask: 1, indoor_dining: 1 }, { state: "BA", countryCode: "BA", bars: 1, mask: 1, indoor_dining: 0 }, { state: "BG", countryCode: "BG", bars: 1, mask: 1, indoor_dining: 1 }, { state: "UA", countryCode: "UA", bars: 1, mask: 1, indoor_dining: 1 }, { state: "RS", countryCode: "RS", bars: 1, mask: 1, indoor_dining: 1 }, { state: "BE", countryCode: "BE", bars: 1, mask: 1, indoor_dining: 1 }, { state: "ME", countryCode: "ME", bars: 1, mask: 1, indoor_dining: 1 }, { state: "AL", countryCode: "AL", bars: 1, mask: 1, indoor_dining: 1 }, { state: "EL", countryCode: "EL", bars: 1, mask: 1, indoor_dining: 1 }, { state: "MK", countryCode: "MK", bars: 0, mask: 1, indoor_dining: 1 }, { state: "TR", countryCode: "TR", bars: 1, mask: 1, indoor_dining: 1 }, { state: "MT", countryCode: "MT", bars: 1, mask: 1, indoor_dining: 1 }, { state: "CY", countryCode: "CY", bars: 0, mask: 1, indoor_dining: 0 }, { state: "LI", countryCode: "LI", bars: 1, mask: 1, indoor_dining: 1 } ]33:[{"id":"efe98d96d19a69a4186462b42f1a7deb9f314301a58d2f00f67f21c62f55e457c646a6228b6587b4942adf2c9f7a04373720d3a72149d7da21a6f3c6e9568529","href":"https://static.observableusercontent.com/files/efe98d96d19a69a4186462b42f1a7deb9f314301a58d2f00f67f21c62f55e457c646a6228b6587b4942adf2c9f7a04373720d3a72149d7da21a6f3c6e9568529","name":"stateData@2.csv","type":"text/csv","lastModified":1706289292883.921,"size":1042}] 2d:{"id":"3fec12fae3041a0c","slug":"grid-cartogram-of-europe","title":"Grid Cartogram of Europe","thumbnail":"d655b7f9c2a51a13f0a92e8d3d4711c45985a8957f1f0d49eebfa53c35a0dc5d","access_level":"public","create_time":"$D2024-01-26T17:14:52.883Z","update_time":"$D2026-02-01T20:29:23.293Z","view_time":null,"first_public_time":"$D2024-01-26T17:14:52.883Z","has_unpublished_edits":null,"fork":{"id":"8f63e88faba12130","slug":"grid-cartogram","title":"Grid Cartogram","owner":{"id":"f3b2000322dff840","login":"helloeujin","name":"Youjin Shin | 신유진"}},"stars":4,"starred":false,"owner":{"type":"team","id":"25fee90bb47fd709","login":"joewdavies","name":"Joe Davies","avatar_url":"https://avatars-next.observableusercontent.com/9b3334fa93f66c399554670429d5728ef2f24d2d28e3933c6c7e1fef7ff8eb7e","tier":"starter_2024"},"version":602,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"dc51b4f7240f0553","login":"joewdavies","name":"Joe Davies","avatar_url":"https://avatars-next.observableusercontent.com/9b3334fa93f66c399554670429d5728ef2f24d2d28e3933c6c7e1fef7ff8eb7e","tier":null}],"members":[{"type":"individual","id":"dc51b4f7240f0553","login":"joewdavies","name":"Joe Davies","avatar_url":"https://avatars-next.observableusercontent.com/9b3334fa93f66c399554670429d5728ef2f24d2d28e3933c6c7e1fef7ff8eb7e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"61012ff757d99a0b","slug":"eurostat","title":"Eurostat","owner":{"id":"25fee90bb47fd709","login":"joewdavies","name":"Joe Davies"}},"type":"notebook","body":{"title":"Grid Cartogram of Europe","cells":[{"id":0,"value":"md`# Grid Cartogram of Europe`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"A grid cartogram is a representation barely similar to a map, that distorts the forms and areas, and assigns to every subdivision one and only one unit of a grid. They are also referred as grid map, mosaic cartogram, pseudo-Demers cartogram, square cartograph maps, geofacets, geogrid, tile grid map, or tile map.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":492,"value":"viewof cellSize = Inputs.range([0, 100], {\n label: \"Cell Size\",\n step: 1,\n value: 45\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":497,"value":"viewof cellPadding = Inputs.range([0, 40], {\n label: \"Cell Padding\",\n step: 1,\n value: 5\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":588,"value":"Now possible in eurostat-map:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":596,"value":"","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":590,"value":"$30","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":592,"value":"eurostatmap = require(\"eurostat-map@4.3.30\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":557,"value":"function rgbStringToHex(rgb) {\n // If the fill is 'none', return null or a default value\n if (rgb === \"none\") {\n return null;\n }\n\n // Extract the RGB values using a regular expression\n const result = rgb.match(/\\d+/g);\n\n // If the result is null, return null to avoid processing errors\n if (!result) {\n return null;\n }\n\n const r = Number(result[0]);\n const g = Number(result[1]);\n const b = Number(result[2]);\n\n return (\n \"#\" +\n ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase()\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"height = 700","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"position = grid`\n ,IS, , , ,NO,SE,FI, , , , ,\n , , , , , , , ,EE, , , ,\n , , , , , , , ,LV, , , ,\n ,IE,UK, , ,DK, ,LT, , , , ,\n , , , ,NL,DE,PL,, , , , ,\n , , ,BE,LU,CZ,SK,UA, , , , ,\n , ,FR,CH,LI,AT,HU,RO,MD, , , ,\n ,PT,ES, ,IT,SI,HR,RS,BG, , , ,\n , , , , , ,BA,ME,MK, , , , \n , , , , , , ,AL,EL,TR, , , \n , , , ,MT, , , , ,CY, , , \n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":416,"value":"colors = [\"#286eb4\", \"#faa519\", \"#5fb441\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":436,"value":"cellScale = d3.scaleLinear().domain([0, 100]).range([0, cellSize])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":385,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"function getTextColor(value) {\n if(value == 0) { return '#999999' }\n else { return '#ffffff' }\n} ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"function grid() {\n const positionById = new Map;\n d3.csvParseRows(String.raw.apply(String, arguments).replace(/^\\n|\\n$/g, \"\"), (row, j) => {\n row.forEach((id, i) => {\n if (id = id.trim()) {\n positionById.set(id, [i, j]);\n }\n });\n });\n return positionById;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"gridWidth = d3.max(position, ([, [i]]) => i) + 1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"gridHeight = d3.max(position, ([, [, j]]) => j) + 1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":582,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"d3 = require(\"d3@5\", \"d3-array@2\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"import {select} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 2e:"$2d:body"