2b:null 2c:["$","title",null,{"children":"Day 23: #30DayChartChallenge. Highest point of each region of Ukraine | Roman Sverdan | Observable"}] 31:Tc4b,gridDataDefault = [ { x: 1, y: 0, key: "VO", name: "Volyn", highestPoint: 292, coords: [50.3973573, 24.7982025] }, { x: 2, y: 0, key: "RI", name: "Rivne", highestPoint: 372, coords: [50.0201608, 25.3317909] }, { x: 3, y: 0, key: "ZT", name: "Zhytomyr", highestPoint: 330, coords: [51.3443186, 28.2298529] }, { x: 4, y: 0, key: "KY", name: "Kyiv", highestPoint: 280, coords: [49.268401, 29.828401] }, { x: 5, y: 0, key: "CH", name: "Chernihiv", highestPoint: 222, coords: [51.9512877, 32.9620313] }, { x: 1, y: 1, key: "LV", name: "Lviv", highestPoint: 1408, coords: [48.829444, 23.000833] }, { x: 2, y: 1, key: "TR", name: "Ternopil", highestPoint: 443, coords: [49.3555143, 24.8488335] }, { x: 3, y: 1, key: "KM", name: "Khmelnytskyi", highestPoint: 400, coords: [49.14, 26.24361] }, { x: 4, y: 1, key: "CE", name: "Cherkasy", highestPoint: 276, coords: [49.013667, 29.7647309] }, { x: 5, y: 1, key: "PL", name: "Poltava", highestPoint: 204, coords: [48.976944, 33.435833] }, { x: 6, y: 1, key: "SU", name: "Sumy", highestPoint: 246, coords: [50.7381689, 35.4479041] }, { x: 7, y: 1, key: "LH", name: "Luhansk", highestPoint: 367, coords: [48.2631653, 38.8809666] }, { x: 0, y: 2, key: "ZK", name: "Zakarpattia", highestPoint: 2061, coords: [48.1600527, 24.5004344] }, { x: 1, y: 2, key: "IF", name: "Ivano Frankivsk", highestPoint: 2061, coords: [48.1600527, 24.5004344] }, { x: 2, y: 2, key: "CR", name: "Chernivtsi", highestPoint: 1566, coords: [47.793456, 25.0296986] }, { x: 3, y: 2, key: "VI", name: "Vinnytsia", highestPoint: 370, coords: [49.1472994, 27.6145648] }, { x: 4, y: 2, key: "KI", name: "Kirovohrad", highestPoint: 269, coords: [48.1249264, 31.6739863] }, { x: 5, y: 2, key: "DP", name: "Dnipro", highestPoint: 211, coords: [48.0981459, 36.3336759] }, { x: 6, y: 2, key: "KH", name: "Kharkiv", highestPoint: 236, coords: [50.3237538, 35.784769] }, { x: 7, y: 2, key: "DN", name: "Donetsk", highestPoint: 344, coords: [48.269374, 38.53025] }, { x: 4, y: 3, key: "MK", name: "Mykolaiv", highestPoint: 255, coords: [48.117888, 31.665756] }, { x: 5, y: 3, key: "KS", name: "Kherson", highestPoint: 101, coords: [47.4106138, 34.1014953] }, { x: 6, y: 3, key: "ZP", name: "Zaporizhzhia", highestPoint: 324, coords: [47.3204716, 36.5960439] }, { x: 3, y: 4, key: "OD", name: "Odesa", highestPoint: 292, coords: [48.1055898, 28.9819657] }, { x: 5, y: 4, key: "CM", name: "Crimea", highestPoint: 1545, coords: [44.612775, 34.2429149] } ]32:T82a,function gridMap(gridData) { const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .style("font", "12px sans-serif"); const mapContainer = svg .append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); const regions = mapContainer .append("g") .selectAll("g") .data(gridData) .enter() .append("g") .attr("transform", (d) => { return "translate(" + d.x * gridWidth + "," + d.y * gridHeight + ")"; }) .attr("id", (d) => "g" + d.key) .on("mousemove", nodeMouseOver) .on("mouseout", nodeMouseOut); regions .append("rect") .attr("width", gridWidth) .attr("height", gridHeight) .attr("vector-effect", "non-scaling-stroke") .style("fill", (d) => colorScale(d.highestPoint)); regions .append("polygon") .attr("points", (d) => { if (d.key === "ZK") { return `${gridWidth},${y( d.highestPoint )} 0,${gridHeight} ${gridWidth},${gridHeight}`; } else if (d.key === "IF") { return `${0},${y( d.highestPoint )} 0,${gridHeight} ${gridWidth},${gridHeight}`; } else { return `${gridWidth / 2},${y( d.highestPoint )} 0,${gridHeight} ${gridWidth},${gridHeight}`; } }) .attr("fill", "orange"); regions .append("text") .attr("class", "regname") .attr("x", gridWidth / 4) .attr("y", gridHeight / 4 + 3) .style("text-anchor", "middle") .text((d) => d.key); function nodeMouseOver(event, d) { let x = event.pageX + 18; let y = event.pageY; x > width - 200 ? (x = x - 218) : x; svg.selectAll(`#g${d.key}`).raise().classed("active", true); toolTip .style("left", x + "px") .style("top", y + 2 + "px") .style("display", "block") .html( `${d.name}
Highest point: ${d.highestPoint}m` ); } function nodeMouseOut(event, d) { toolTip.style("display", "none"); svg.selectAll("g").classed("active", false); } return svg.node(); }33:[] 2f:{"id":"c26791fffc893856","slug":"30daychartchallenge-day-23","title":"Day 23: #30DayChartChallenge. Highest point of each region of Ukraine","thumbnail":"4cc7bdbb1939b1554fe4d63e05b720e4ab9d594cacabffcea57e1e84ed642803","access_level":"public","create_time":"$D2023-04-23T17:35:45.129Z","update_time":"$D2023-04-23T19:57:35.273Z","view_time":null,"first_public_time":"$D2023-04-23T17:35:45.129Z","fork":{"id":"846ac799a7bc69cb","slug":"ukraine-grid-map","title":"Ukraine grid map","owner":{"id":"36db9f151dbeb3bc","login":"romansverdan","name":"Roman Sverdan"}},"stars":1,"starred":false,"owner":{"type":"team","id":"36db9f151dbeb3bc","login":"romansverdan","name":"Roman Sverdan","avatar_url":"https://avatars-next.observableusercontent.com/f10a4afffb8f95850eb88bda500106e7c81993daee3682132a6b9dde86884569","tier":"starter_2024"},"version":256,"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":0,"collection":{"id":"6909a3a6854e8e08","slug":"30daychartchallenge-2023","title":"#30DayChartChallenge 2023","owner":{"id":"36db9f151dbeb3bc","login":"romansverdan","name":"Roman Sverdan"}},"type":"notebook","body":{"title":"Day 23: #30DayChartChallenge. Highest point of each region of Ukraine","cells":[{"id":0,"value":"# Day 23: #30DayChartChallenge. Highest point of each region of Ukraine\n\nData source: What to see in Ukraine Blog\n\nEach tile on this tilegram represents one region (oblast) of Ukraine. A triangle inside each oblast show the relative height of the highest point in the oblast.\n\nZakarpattia and Ivano Frankivsk oblasts sharing the same highest point of Ukraine, mount Hoverla (2061m) thus they both have one triangle on the tilegram as well\n\n
","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":78,"value":"gridMap(gridDataDefault)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"### Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":38,"value":"","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":20,"value":"gridWidth = 80","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"gridHeight = 80","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"colors = [\"#fee08b\", \"#362142\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"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":146,"value":"colorScale = d3\n .scaleSequential()\n .domain(d3.extent(gridDataDefault, (d) => d.highestPoint))\n .interpolator(d3.interpolateRgb(colors[0], colors[1]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"y = d3\n .scaleLinear()\n .domain([0, d3.max(gridDataDefault, (d) => d.highestPoint)])\n .nice()\n .range([gridHeight, 0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":154,"value":"margin = ({\n top: 40,\n right: 40,\n bottom: 40,\n left: 40\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"d3 = require(\"d3@7.8.0\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"