2d:null 2e:["$","title",null,{"children":"Map-sparks | Michal Škop | Observable"}] 33:T756,renderMap_daily = { var svg = d3.select(DOM.svg(width, height)) .style("width", width) .style("height", height) var color = d3.scaleSequential(d3.interpolateOrRd) .domain([-50, 200]) svg.selectAll(".subunit") .data(subunits.features) .enter().append("path") .attr("class", function(d) { return "subunit " + d.id; }) .attr("d", path) .attr("fill", "#eee") .attr("stroke-width", "2px") .attr("stroke", "#fff") svg.selectAll(".subunit-centers") .data(subunits.features) .enter().append("circle") .attr("cx", function(d) { let center = path.centroid(d) return center[0] }) .attr("cy", function(d) { let center = path.centroid(d) return center[1] }) .attr("r", 1) svg.selectAll(".sparks") .data(subunits.features) .enter().append("path") .attr("fill", "none") .attr("stroke", function(d) { var filtered = code2data_100000[d.id]['values'].filter(x => (x.date == d3.timeFormat("%Y-%m-%d")(currentDate))) return color(filtered[0]['value']) }) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("stroke-width", 1.5) .attr("transform", function(d) { return("translate(" + path.centroid(d) + ")") }) .attr("d", function(d) { var filtered = code2data_daily[d.id]['values'].filter(x => ((x.date < d3.timeFormat("%Y-%m-%d")(currentDate)) && (x.date > limits['since']))) return sparkline_daily([...[{value: 0, date: limits['since']}], ...filtered]) }) svg.append("text") .attr('x', width * 3 / 5) .attr('y', height / 4) .attr('font-size', '50px') .attr('fill', '#888') .attr('font-family', 'Ubuntu, sans-serif') .text(d3.timeFormat("%-d.%-m.%Y")(currentDate)) return svg.node() }34:T724,renderMap = { var svg = d3.select(DOM.svg(width, height)) .style("width", width) .style("height", height) var color = d3.scaleSequential(d3.interpolateOrRd) .domain([-50, 200]) svg.selectAll(".subunit") .data(subunits.features) .enter().append("path") .attr("class", function(d) { return "subunit " + d.id; }) .attr("d", path) .attr("fill", "#eee") .attr("stroke-width", "2px") .attr("stroke", "#fff") svg.selectAll(".subunit-centers") .data(subunits.features) .enter().append("circle") .attr("cx", function(d) { let center = path.centroid(d) return center[0] }) .attr("cy", function(d) { let center = path.centroid(d) return center[1] }) .attr("r", 1) svg.selectAll(".sparks") .data(subunits.features) .enter().append("path") .attr("fill", "none") .attr("stroke", function(d) { var filtered = code2data_100000[d.id]['values'].filter(x => (x.date == d3.timeFormat("%Y-%m-%d")(currentDate))) return color(filtered[0]['value']) }) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("stroke-width", 1.5) .attr("transform", function(d) { return("translate(" + path.centroid(d) + ")") }) .attr("d", function(d) { var filtered = code2data[d.id]['values'].filter(x => (x.date < d3.timeFormat("%Y-%m-%d")(currentDate))) return sparkline([...[{value: 0, date: limits['since']}], ...filtered]) }) svg.append("text") .attr('x', width * 3 / 5) .attr('y', height / 4) .attr('font-size', '50px') .attr('fill', '#888') .attr('font-family', 'Ubuntu, sans-serif') .text(d3.timeFormat("%-d.%-m.%Y")(currentDate)) return svg.node() }35:T731,renderMap_100000 = { var svg = d3.select(DOM.svg(width, height)) .style("width", width) .style("height", height) var color = d3.scaleSequential(d3.interpolateOrRd) .domain([-50, 200]) svg.selectAll(".subunit") .data(subunits.features) .enter().append("path") .attr("class", function(d) { return "subunit " + d.id; }) .attr("d", path) .attr("fill", "#eee") .attr("stroke-width", "2px") .attr("stroke", "#fff") svg.selectAll(".subunit-centers") .data(subunits.features) .enter().append("circle") .attr("cx", function(d) { let center = path.centroid(d) return center[0] }) .attr("cy", function(d) { let center = path.centroid(d) return center[1] }) .attr("r", 1) svg.selectAll(".sparks") .data(subunits.features) .enter().append("path") .attr("fill", "none") .attr("stroke", function(d) { var filtered = code2data_100000[d.id]['values'].filter(x => (x.date == d3.timeFormat("%Y-%m-%d")(currentDate))) return color(filtered[0]['value']) }) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("stroke-width", 1.5) .attr("transform", function(d) { return("translate(" + path.centroid(d) + ")") }) .attr("d", function(d) { var filtered = code2data_100000[d.id]['values'].filter(x => (x.date < d3.timeFormat("%Y-%m-%d")(currentDate))) return sparkline([...[{value: 0, date: limits['since']}], ...filtered]) }) svg.append("text") .attr('x', width * 3 / 5) .attr('y', height / 4) .attr('font-size', '50px') .attr('fill', '#888') .attr('font-family', 'Ubuntu, sans-serif') .text(d3.timeFormat("%-d.%-m.%Y")(currentDate)) return svg.node() }36:T842,function Scrubber(values, { // https://observablehq.com/@mbostock/scrubber format = value => value, initial = 0, delay = null, autoplay = true, loop = true, alternate = false } = {}) { values = Array.from(values); const form = html``; let timer = null; let direction = 1; function start() { form.b.textContent = "Zastavit"; timer = delay === null ? requestAnimationFrame(tick) : setInterval(tick, delay); } function stop() { form.b.textContent = "Spustit"; if (delay === null) cancelAnimationFrame(timer); else clearInterval(timer); timer = null; } function tick() { if (delay === null) timer = requestAnimationFrame(tick); if (form.i.valueAsNumber === (direction > 0 ? values.length - 1 : direction < 0 ? 0 : NaN)) { if (!loop) return stop(); if (alternate) direction = -direction; } form.i.valueAsNumber = (form.i.valueAsNumber + direction + values.length) % values.length; form.i.dispatchEvent(new CustomEvent("input", {bubbles: true})); } form.i.oninput = event => { if (event && event.isTrusted && timer) form.b.onclick(); form.value = values[form.i.valueAsNumber]; form.o.value = format(form.value, form.i.valueAsNumber, values); }; form.b.onclick = () => { if (timer) return stop(); direction = alternate && form.i.valueAsNumber === values.length - 1 ? -1 : 1; form.i.valueAsNumber = (form.i.valueAsNumber + direction) % values.length; form.i.dispatchEvent(new CustomEvent("input", {bubbles: true})); start(); }; form.i.oninput(); if (autoplay) start(); else stop(); disposal(form).then(stop); return form; }37:T461,MapWithCentroids = { var width = 960 / 1, height = 640 / 1.5 var projection = d3.geoMercator() .center([19, 49.1]) .rotate([0, 0]) // .parallels([47, 51]) .scale(3500) .translate([width / 2, height / 2]) const svg = d3.select(DOM.svg(width, height)) .style("width", width) .style("height", height); var path = d3.geoPath() .projection(projection) var subunits = topojson.feature(mapdata, mapdata.objects.tracts) // console.log(subunits) svg.selectAll(".subunit") .data(subunits.features) .enter().append("path") .attr("class", function(d) { return "subunit " + d.id; }) .attr("d", path) .attr("fill", "#eee") .attr("stroke-width", "2px") .attr("stroke", "#fff") svg.selectAll(".subunit-centers") .data(subunits.features) .enter().append("circle") .attr("cx", function(d) { let center = path.centroid(d) return center[0] }) .attr("cy", function(d) { let center = path.centroid(d) return center[1] }) .attr("r", 1) return svg.node(); }38:[{"id":"4c31c1893984dd6524bbb8d1db212c2cac7b3ecfdb70a8d2e9c2f026a0c20d45122c1de3893fe617f2c121969b708c173d044520233d45c4cdbd04adb9faaa95","href":"https://static.observableusercontent.com/files/4c31c1893984dd6524bbb8d1db212c2cac7b3ecfdb70a8d2e9c2f026a0c20d45122c1de3893fe617f2c121969b708c173d044520233d45c4cdbd04adb9faaa95","name":"okresy_data@6.csv","type":"text/csv","lastModified":1587991139143.535,"size":9713},{"id":"61c17693b16613a33149dfd589e748cd39712df0032705da2c2ebd82dff9a89b5915cc0a64ac802628801d541bf945ca57497d56bf27932d591aab4c584c44c4","href":"https://static.observableusercontent.com/files/61c17693b16613a33149dfd589e748cd39712df0032705da2c2ebd82dff9a89b5915cc0a64ac802628801d541bf945ca57497d56bf27932d591aab4c584c44c4","name":"okresy_data_daily@2.csv","type":"text/csv","lastModified":1587991153458.483,"size":7171},{"id":"869cca31578a5e34b8783b461ef58751a77b636db595128cba244f20ee7bf3bd2b29b7bfbf0a5e6b85b280f5be0d15a2abc452602a27616a26d097b75d9743cd","href":"https://static.observableusercontent.com/files/869cca31578a5e34b8783b461ef58751a77b636db595128cba244f20ee7bf3bd2b29b7bfbf0a5e6b85b280f5be0d15a2abc452602a27616a26d097b75d9743cd","name":"okresy_data_daily@1.csv","type":"text/csv","lastModified":1587779131964.455,"size":6499},{"id":"41e3f1f65b5ca77097f545794ea78b1bb4b8ebea4b4da5b568e2bb8138d8f7565f47d25bcfb7638948ef5901b528033a130eb878a1effb71ca75071414323edf","href":"https://static.observableusercontent.com/files/41e3f1f65b5ca77097f545794ea78b1bb4b8ebea4b4da5b568e2bb8138d8f7565f47d25bcfb7638948ef5901b528033a130eb878a1effb71ca75071414323edf","name":"okresy_data@5.csv","type":"text/csv","lastModified":1587779151877.755,"size":8693},{"id":"4f3a817e7c2761b6526d0ae393545f04d4476189b3799609b420edb9197ca457c980a554fe3c041ae179674c92c0226dc9968b634866a36f9345984a52fac2b0","href":"https://static.observableusercontent.com/files/4f3a817e7c2761b6526d0ae393545f04d4476189b3799609b420edb9197ca457c980a554fe3c041ae179674c92c0226dc9968b634866a36f9345984a52fac2b0","name":"okresy_data@4.csv","type":"text/csv","lastModified":1586996993917.232,"size":6917},{"id":"40fa15d4f7ee6acbc104cab38003f380064153dae8ebacc14e7a7e84b663193014cdf1e93bb378c8f4231820522e408a2ebb34c55b5629d4f1d5c26324e8433f","href":"https://static.observableusercontent.com/files/40fa15d4f7ee6acbc104cab38003f380064153dae8ebacc14e7a7e84b663193014cdf1e93bb378c8f4231820522e408a2ebb34c55b5629d4f1d5c26324e8433f","name":"okresy_data_daily.csv","type":"text/csv","lastModified":1586997977314.563,"size":5321},{"id":"fa9c3619d4ae103fd8913ccc14869062e97ec491fe7d7de8159ffefa0504d8a38a660d1702ea0357ce179eced3d34c5df51c56e734d70d9307f28812dd79728f","href":"https://static.observableusercontent.com/files/fa9c3619d4ae103fd8913ccc14869062e97ec491fe7d7de8159ffefa0504d8a38a660d1702ea0357ce179eced3d34c5df51c56e734d70d9307f28812dd79728f","name":"okresy-simple-topo.json","type":"application/json","lastModified":1586824410220.314,"size":979775}] 31:{"id":"f5e3396d358f2992","slug":"map-sparks","title":"Map-sparks","thumbnail":"5efd081d0280f33d743f283703872d385469bd4c67a11ea738144a6e4d2b232c","access_level":"public","create_time":"$D2020-04-14T00:01:02.776Z","update_time":"$D2020-05-04T14:11:10.872Z","view_time":null,"first_public_time":"$D2020-04-16T03:10:34.180Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"708d7da1c041c3c3","login":"michalskop","name":"Michal Škop","avatar_url":"https://avatars-next.observableusercontent.com/39ba5d7a328bf2076832e50130114e907e8202cbcb1eb0b12c09f8ba641563fb","tier":"starter_2024"},"version":422,"publish_version":422,"role":null,"authored":false,"authors":[{"type":"individual","id":"526f39c248664968","login":"michalskop","name":"Michal Škop","avatar_url":"https://avatars-next.observableusercontent.com/39ba5d7a328bf2076832e50130114e907e8202cbcb1eb0b12c09f8ba641563fb","tier":null}],"members":[{"type":"individual","id":"526f39c248664968","login":"michalskop","name":"Michal Škop","avatar_url":"https://avatars-next.observableusercontent.com/39ba5d7a328bf2076832e50130114e907e8202cbcb1eb0b12c09f8ba641563fb","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Map-sparks","cells":[{"id":0,"value":"md`# Map-sparks\nCovid 19 - okresy CZ`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":412,"value":"md`### Cases daily`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":376,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":417,"value":"md`### Cases total`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":419,"value":"md`### Cases total per capita`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":325,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":237,"value":"viewof currentDate = {\n const firstDate = parseDate(limits['since'])\n const lastDate = parseDate(limits['until']) - 1\n \n let dates = d3.scaleTime()\n .domain([firstDate, lastDate])\n .ticks(d3.timeDay.every(1))\n \n const scrubberOptions = {\n autoplay: true,\n loop: true,\n alternate: false,\n delay: 500, //milliseconds\n format: date => d3.timeFormat(\"%-d.%-m.%Y\")(date)\n }\n \n return Scrubber(dates, scrubberOptions)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":262,"value":"import {disposal} from \"@mbostock/disposal\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":387,"value":"sparkline_daily = d3.line()\n .x( function(d) {\n return xScaleSpark(parseDate(d.date))\n })\n .y(function(d) {\n return yScaleSpark_daily(d.value)\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"sparkline = d3.line()\n .x( function(d) {\n return xScaleSpark(parseDate(d.date))\n })\n .y(function(d) {\n return yScaleSpark(d.value)\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":385,"value":"yScaleSpark_daily = d3.scaleLinear()\n .domain([0, 100])\n .range([0, -150])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"yScaleSpark = d3.scaleLinear()\n .domain([0, 1500])\n .range([0, -150])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"xScaleSpark = d3.scaleTime()\n .domain([parseDate(limits['since']), parseDate(limits['until'])])\n .range([0, 60])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":378,"value":"code2data_daily = {\n var code2data = {}\n data_daily_rows.forEach(row => code2data[row.code] = row)\n return code2data\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":318,"value":"code2data_100000 = {\n var code2data_100000 = {}\n data_rows_100000.forEach(row => code2data_100000[row.code] = row)\n return code2data_100000\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"code2data = {\n var code2data = {}\n data_rows.forEach(row => code2data[row.code] = row)\n return code2data\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":370,"value":"data_daily_rows = data_daily.map(function(d) {\n let values = []\n for (var i = new Date(limits['since']); i <= new Date(limits['until']); i.setDate(i.getDate() + 1)) {\n let date = i.toISOString().substring(0, 10)\n let value = d[date]\n console.log(i)\n values.push({\"date\": date, \"value\": parseInt(value)})\n }\n return {\n \"code\": d.code,\n \"name\": d.name,\n \"population\": parseInt(d.population),\n \"values\": values\n }\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":314,"value":"data_rows_100000 = data.map(function(d) {\n let values = []\n for (var i = new Date(limits['since']); i <= new Date(limits['until']); i.setDate(i.getDate() + 1)) {\n let date = i.toISOString().substring(0, 10)\n let value = d[date]\n values.push({\"date\": date, \"value\": parseInt(value) / parseInt(d.population) * 100000})\n }\n return {\n \"code\": d.code,\n \"name\": d.name,\n \"population\": parseInt(d.population),\n \"values\": values\n }\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"data_rows = data.map(function(d) {\n let values = []\n for (var i = new Date(limits['since']); i <= new Date(limits['until']); i.setDate(i.getDate() + 1)) {\n let date = i.toISOString().substring(0, 10)\n let value = d[date]\n console.log(i)\n values.push({\"date\": date, \"value\": parseInt(value)})\n }\n return {\n \"code\": d.code,\n \"name\": d.name,\n \"population\": parseInt(d.population),\n \"values\": values\n }\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"limits = ({\n since: \"2020-03-25\",\n until: \"2020-04-27\"\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"subunits = topojson.feature(mapdata, mapdata.objects.tracts)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"path = d3.geoPath()\n .projection(projection)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"svg = d3.select(DOM.svg(width, height))\n .style(\"width\", width)\n .style(\"height\", height)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":141,"value":"projection = d3.geoMercator()\n .center([16, 50])\n .rotate([0, 0])\n // .parallels([47, 51])\n .scale(6000)\n .translate([width / 2, height / 2])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"height = 640 / 1.35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"width = 960 / 1\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"parseDate = d3.timeParse(\"%Y-%m-%d\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":366,"value":"data_daily = d3.csvParse(await FileAttachment(\"okresy_data_daily@2.csv\").text())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"data = d3.csvParse(await FileAttachment(\"okresy_data@6.csv\").text())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"mapdata = FileAttachment(\"okresy-simple-topo.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"topojson = require(\"topojson\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require(\"d3@5\", \"d3-color@1\", \"d3-scale-chromatic@^1.4.0\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":304,"value":"md`source: KHS, https://docs.google.com/spreadsheets/d/1FFEDhS6VMWon_AWkJrf8j3XxjZ4J6UI1B2lO3IW-EEc/edit#gid=1011737151, https://observablehq.com/@kemper/wisconsin-confirmed-covid-19-cases-map-timeline-animation, https://twitter.com/kemper/status/1249600841180381184`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 32:"$31:body"