34:null 35:["$","title",null,{"children":"Zoomable Coronavirus map per country (D3-Tile) | David George Mather | Observable"}] 3b:Tf36,{ var pi = Math.PI, tau = 2 * pi; var width = 1000, height = 400; // Initialize the projection to fit the world in a 1×1 square centered at the origin. var projection = d3.geoMercator() .scale(1 / tau) .translate([0, 0]); var path = d3.geoPath() .projection(projection); var tile = d3.tile() .size([width, height]); var zoom = d3.zoom() .scaleExtent([1 << 8, 1 << 22]) .on("zoom", zoomed); var svg = d3.select("svg") .attr("width", width) .attr("height", height); var raster = svg.append("g"); var vector = svg.append("circle"); // Compute the projected initial center. var center = projection([7.6921, 53.1424]); console.log(center) var path = d3.geoPath().projection(projection) var pathGenerator = d3.geoPath().projection(projection) svg .append('path') .datum(countries) .attr('d', pathGenerator) .attr('class', 'country') .attr('fill', 'gray') .attr('opacity', 0.5) .attr('stroke', 'black') .attr('stroke-width', '0.5'); var LatLngs = [] var ix = Object.size(dataraw[0]) - 1 var llave = Object.keys(dataraw[0])[ix] var circles = [] for (var i = 0; i <= factor; i++) { let LatLngElement = [ dataraw[i]['Country/Region'], dataraw[i]['Province/State'], [parseFloat(dataraw[i].Long), parseFloat(dataraw[i].Lat)], dataraw[i][llave] ]; LatLngs[i] = LatLngElement; circles[i] = svg.append("circle"); circles[i].attr("cx", projection(LatLngElement[2])[0]) .attr("cy", projection(LatLngElement[2])[1]) .attr("r", 5/(1<<12)); circles[i].on("click", function(d) { div .transition() .duration(200) .style("opacity", .9); div .html( "COUNTRY: " + LatLngElement[0] + "
REGION: " + LatLngElement[1] + "
CONFIRMED CASES: " + LatLngElement[3] + "
AS OF " + llave ) .style("left", d3.event.pageX + "px") .style("top", d3.event.pageY - 28 + "px"); }) .on("mouseout", function(d) { div .transition() .duration(500) .style("opacity", 0); }); } console.log(LatLngs) var claves = Object.keys(dataraw[0]).slice(4) // Apply a zoom transform equivalent to projection.{scale,translate,center}. svg .call(zoom) .call(zoom.transform, d3.zoomIdentity .translate(width / 2, height / 2) .scale(1 << 12) .translate(-center[0], -center[1])); var coord = [-100,40] vector .attr("cx", projection(coord)[0]) .attr("cy", projection(coord)[1]) .attr("r", 5/(1<<12)); function zoomed() { var transform = d3.event.transform; var tiles = tile .scale(transform.k) .translate([transform.x, transform.y]) (); vector .attr("transform", transform) .attr("r", 5/transform.k); for (var i = 0; i <= factor; i++) { try{ circles[i] .attr("transform", transform) .attr("r", 5/transform.k); } catch(err) { console.log(err.message); } } var image = raster .attr("transform", stringify(tiles.scale, tiles.translate)) .selectAll("image") .data(tiles, function(d) { return d; }); image.exit().remove(); image.enter().append("image") .attr("xlink:href", function(d) { return "http://" + "abc"[d[1] % 3] + ".tile.openstreetmap.org/" + d[2] + "/" + d[0] + "/" + d[1] + ".png"; }) .attr("x", function(d) { return d[0] * 256; }) .attr("y", function(d) { return d[1] * 256; }) .attr("width", 256) .attr("height", 256); } function stringify(scale, translate) { var k = scale / 256, r = scale % 1 ? Number : Math.round; return "translate(" + r(translate[0] * scale) + "," + r(translate[1] * scale) + ") scale(" + k + ")"; } }3c:[] 39:{"id":"7ee6fea342535bb3","slug":"zoomable-coronavirus-map-per-country-d3-tile","title":"Zoomable Coronavirus map per country (D3-Tile)","thumbnail":"e5905b1e78174cc888e65ebea9ed7d3aa8594c8bc7e734020fbfe36869963ec8","access_level":"public","create_time":"$D2020-03-27T19:11:23.385Z","update_time":"$D2020-03-27T19:27:45.192Z","view_time":null,"first_public_time":"$D2020-03-27T19:27:50.317Z","has_unpublished_edits":null,"fork":true,"stars":2,"starred":false,"owner":{"type":"team","id":"938ee6a280f8b5f7","login":"davidmather","name":"David George Mather","avatar_url":"https://avatars-next.observableusercontent.com/65ced424c6f3d431adf63ba8601e257e7fb0295315871dbd648e6a92237d94b5","tier":"starter_2024","bio":"","following":false},"version":125,"publish_version":125,"role":null,"authored":false,"authors":[{"type":"individual","id":"ab46c767b6c8e319","login":"davidmather","name":"David George Mather","avatar_url":"https://avatars-next.observableusercontent.com/65ced424c6f3d431adf63ba8601e257e7fb0295315871dbd648e6a92237d94b5","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"ab46c767b6c8e319","login":"davidmather","name":"David George Mather","avatar_url":"https://avatars-next.observableusercontent.com/65ced424c6f3d431adf63ba8601e257e7fb0295315871dbd648e6a92237d94b5","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Zoomable Coronavirus map per country (D3-Tile)","cells":[{"id":0,"value":"md`# Zoomable Coronavirus map per country (D3-Tile)\nConfirmed cases\n\nJHU modified data structure on 26.03.2020\n\nSource: Johns Hopkins University`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"d3 = require(\"d3@5\", \"d3-tile@1\",\"topojson@1\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"div = d3\n .select(\"body\")\n .append(\"div\")\n .attr(\"class\", \"tooltip\")\n .style(\"opacity\", 0)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"(Object.size = function(obj) {\n var size = 0,\n key;\n for (key in obj) {\n if (obj.hasOwnProperty(key)) size++;\n }\n return size;\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"$3b","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"dataraw = d3.csv(\n \"https://raw.githubusercontent.com/CSSEGISandData/COVID-19/master/csse_covid_19_data/csse_covid_19_time_series/time_series_covid19_confirmed_global.csv\"\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"factor = dataraw.length - 1","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"countries = d3.json(\n \"https://gist.githubusercontent.com/phil-pedruco/10447085/raw/426fb47f0a6793776a044f17e66d17cbbf8061ad/countries.geo.json\"\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3c","stdlib":"1"}} 3a:"$39:body"