31:T926,map = { const svg = d3.create("svg") .attr('width', width_a) .attr('height', height); const plot = svg.append('g') .attr('class', 'plot'); const plotWorld = plot.append('g') .attr('class', 'world_map'); const plotDisputed = plot.append('g') .attr('class', 'disputed'); const plotBubbles = plot.append('g') .attr('class', 'bubbles'); // countries plotWorld.selectAll(".country") .data(countries.features) //geometry for the countries .enter() .append("path") .attr("class","country") .attr("d", geoPath) .style("stroke", d => scaleStrokeColour(d.properties.virus)) .style("fill", d => scaleFillColour(d.properties.virus)) .style("stroke-width", 0.5) .style('stroke-linejoin', 'round'); // disputed lines BLACK plotDisputed.selectAll(".black_lines") .data(disputed_lines_black.features) //geometry for the lines .enter() .append("path") .attr("class","black_lines disputed") .attr("d", d => geoPath(d.geometry)) .style('fill', 'none') .style('stroke', d => scaleStrokeColour(d.properties.virus)) .style('stroke-linejoin', 'round') .style('stroke-width', 1) .style('stroke-dasharray', 2); // disputed lines WHITE plotDisputed.selectAll(".white_lines") .data(disputed_lines_white.features) //geometry for the lines .enter() .append("path") .attr("class","white_lines disputed") .attr("d", d => geoPath(d.geometry)) .style('fill', 'none') .style('stroke', d => { if (d.properties['For data p'] === 'Ukraine') { return scaleStrokeColour(d.properties.virus); } return scaleFillColour(d.properties.virus); }) .style('stroke-width', 1) .style('stroke-dasharray', 2) .style('stroke-linejoin', 'round'); // bubbles plotBubbles.selectAll(".bubbles") .data(csv) .enter() .append("circle") .attr("class","bubbles") .attr("cx", d => myProjection([d.Long, d.Lat])[0] ) .attr("cy", d => myProjection([d.Long, d.Lat])[1] ) .attr("r", d => scaleRadiusWorld(d["03-12-20"])) .style('stroke-width', 0.5) .style('stroke', "#222") .style('fill', "#1380a1") .style('mix-blend-mode', 'multiply') .style('fill-opacity', 0.6); return svg.node(); }32:T4a9,function clicked(region) { const plot = d3.select(map).select('.plot'); const thisRegion = mapRegions.filter(d => d.region === region)[0]; const x0 = thisRegion.bounds[0][0]; const y0 = thisRegion.bounds[0][1]; const x1 = thisRegion.bounds[1][0]; const y1 = thisRegion.bounds[1][1]; const xy0 = myProjection([x0, y0]); const xy1 = myProjection([x1, y1]); const xy = myProjection([(x0 + x1) / 2, (y0 + y1) / 2]); const separation_x = xy1[0] - xy0[0]; const separation_y = xy0[1] - xy1[1]; const scale = Math.max(1, Math.min(4, 0.9 / Math.max(separation_x / width, separation_y / height))); const transform = `translate(${width_a / 2},${height / 2})scale(${scale})translate(${-xy[0]},${-xy[1]})`; plot .attr("transform", transform); plot.selectAll(".country") .style("stroke-width", 0.5 / scale); plot.selectAll(".disputed") .style('stroke-dasharray', 2 / scale) .style("stroke-width", 1.5 / scale); plot.selectAll(".bubbles") .style("stroke-width", 0.5 / scale) .attr("r", d => 2 * scaleRadiusWorld(d["03-12-20"]) / scale) // this brings the radius at twice the size that the bubbles have in world view }33:[{"id":"6d0bdc7f7b8b9d2fcd58d9edad365eb323a97dd34d76fdc78ad2ec997d92ed65db16f970339b9964b7c057ff066ae4675bba8f10603b1eb9bc4902180f901435","href":"https://static.observableusercontent.com/files/6d0bdc7f7b8b9d2fcd58d9edad365eb323a97dd34d76fdc78ad2ec997d92ed65db16f970339b9964b7c057ff066ae4675bba8f10603b1eb9bc4902180f901435","name":"disputed_dotted_black@6.json","type":"application/json","lastModified":1585855517913.224,"size":3214},{"id":"63ed997e0b8d6a4b0a0d039d85d0cd8c9ecd90f502c58a8d76dc83c50430b4d8ef90271847262e80ed203980d64f5c2c059a2f39ee0246a73f0b3da5e447c210","href":"https://static.observableusercontent.com/files/63ed997e0b8d6a4b0a0d039d85d0cd8c9ecd90f502c58a8d76dc83c50430b4d8ef90271847262e80ed203980d64f5c2c059a2f39ee0246a73f0b3da5e447c210","name":"disputed_dotted_white@9.json","type":"application/json","lastModified":1585855617265.257,"size":14146},{"id":"bca23c02ed4dc72fd971f5a9db9603e1dbefacdd50ae527da2a128c4b08159b26d66a828b1a813b3f3060e766fc18ae0eb11d5ac5b697fddc74ed7c90f5f6be6","href":"https://static.observableusercontent.com/files/bca23c02ed4dc72fd971f5a9db9603e1dbefacdd50ae527da2a128c4b08159b26d66a828b1a813b3f3060e766fc18ae0eb11d5ac5b697fddc74ed7c90f5f6be6","name":"data_corona_countries_one_day@3.csv","type":"text/csv","lastModified":1585857527838.388,"size":17365},{"id":"d6478bba95977bfbb1abede0b5bbebe4d2a34e95c9f7c8fb2a6fe9006db3debbca7b035afdb63a1bb9bae9f123c69f8374e8de27b7ff9e5f6e4121b01438cc46","href":"https://static.observableusercontent.com/files/d6478bba95977bfbb1abede0b5bbebe4d2a34e95c9f7c8fb2a6fe9006db3debbca7b035afdb63a1bb9bae9f123c69f8374e8de27b7ff9e5f6e4121b01438cc46","name":"world_map@4.json","type":"application/json","lastModified":1584705112043.284,"size":297875}] 2f:{"title":"Zoom to map via transform","cells":[{"id":0,"value":"md`# Zoom to map via transform\n## Prototype - Global outbreak of Coronavirus`","pinned":false,"hidden":false,"mode":"ojs"},{"id":626,"value":"md`Prototype done for BBC News with Johns Hopkins University data from 03-12-20, https://coronavirus.jhu.edu/map.html`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1046,"value":"md`Final design in https://www.bbc.com/news/world-51235105?app=news.world.story.51235105.page`","pinned":false,"hidden":false,"mode":"ojs"},{"id":724,"value":"md`Zoom to`","pinned":false,"hidden":false,"mode":"ojs"},{"id":693,"value":"viewof options = {\n const buttons = html`\n \n \n \n \n \n \n \n `;\n \n buttons.onclick = event => {\n clicked(event.target.id);\n };\n \n return buttons;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":930,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":35,"value":"md`## Plotting the SVG`","pinned":false,"hidden":false,"mode":"ojs"},{"id":433,"value":"md`## Constructor`","pinned":true,"hidden":false,"mode":"ojs"},{"id":478,"value":"width_a = width","pinned":false,"hidden":false,"mode":"ojs"},{"id":38,"value":"height = width_a / 2;","pinned":false,"hidden":false,"mode":"ojs"},{"id":277,"value":"mutable view = 'region_world'","pinned":false,"hidden":false,"mode":"ojs"},{"id":512,"value":"md `### Bubble radius scales`","pinned":false,"hidden":false,"mode":"ojs"},{"id":274,"value":"md`Maximum and minimum radius should depend on the width of the screen and on what the map is showing: in world view the radius of the circles should be small, in the region view the bubbles of the circles should be bigger`","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"md`Calculate the extent of the values`","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"value_domain = d3.extent(csv, d => d['03-12-20'])","pinned":false,"hidden":false,"mode":"ojs"},{"id":278,"value":"scaleMaxRadiusWorld = d3.scaleLinear().domain([320, 480, 600, 700]).range([4, 6, 7.5, 9]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":544,"value":"scaleMinRadiusWorld = d3.scaleLinear().domain([320, 480, 600, 700]).range([0.5, 0.5, 1, 1]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":546,"value":"maxRWorld = scaleMaxRadiusWorld(width);","pinned":true,"hidden":false,"mode":"ojs"},{"id":550,"value":"minRWorld = scaleMinRadiusWorld(width);","pinned":true,"hidden":false,"mode":"ojs"},{"id":556,"value":"scaleRadiusWorld = d3.scaleSqrt()\n .domain(value_domain)\n .range([minRWorld, maxRWorld]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":502,"value":"md`### Colour scales`","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":"md`**scaleStrokeColour** and **scaleFillColour** checks if the country has had confirmed cases and returns colours accordingly`","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"scaleStrokeColour = d3.scaleOrdinal()\n .domain(['No confirmed cases', 'Confirmed cases'])\n .range(['#777777', '#4ba7bc']);","pinned":true,"hidden":false,"mode":"ojs"},{"id":167,"value":"scaleFillColour = d3.scaleOrdinal()\n .domain(['No confirmed cases', 'Confirmed cases'])\n .range(['#e4e4e4', '#a1ccd9']);","pinned":true,"hidden":false,"mode":"ojs"},{"id":117,"value":"md`### Map scales`","pinned":false,"hidden":false,"mode":"ojs"},{"id":311,"value":"md`The scale of the map (the zoom level) should depend on the width of the device`","pinned":false,"hidden":false,"mode":"ojs"},{"id":486,"value":"devices_breaks = [320, 560, 1024];","pinned":false,"hidden":false,"mode":"ojs"},{"id":314,"value":"scaleScaleMap = d3.scaleLinear().domain(devices_breaks).range([50, 90, 150])","pinned":true,"hidden":false,"mode":"ojs"},{"id":280,"value":"scaleMap = scaleScaleMap(width_a);","pinned":true,"hidden":false,"mode":"ojs"},{"id":52,"value":"myProjection = projections.geoRobinson()\n .center([0, 0])\n .scale(scaleMap)\n .translate([width_a / 2, height / 2])","pinned":true,"hidden":false,"mode":"ojs"},{"id":104,"value":"geoPath = d3.geoPath()\n .projection(myProjection); ","pinned":true,"hidden":false,"mode":"ojs"},{"id":470,"value":"md`### Add data to shapefiles`","pinned":false,"hidden":false,"mode":"ojs"},{"id":152,"value":"md`Add information about virus to the topojson`","pinned":false,"hidden":false,"mode":"ojs"},{"id":182,"value":"disputed_lines_black = topojson.feature(disputed_black, disputed_black.objects.disputed_dotted_black)","pinned":false,"hidden":false,"mode":"ojs"},{"id":188,"value":"disputed_lines_white = topojson.feature(disputed_white, disputed_white.objects.disputed_dotted_white)","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"countries = topojson.feature(world, world.objects.world_map)","pinned":false,"hidden":false,"mode":"ojs"},{"id":137,"value":"function checkVirus(file, type) {\n (file.features).forEach(d => {\n let nameCountry = d.properties['For data p'];\n \n let virus = 'No confirmed cases';\n\n for (let i = 0; i < csv.length; i++) {\n if (csv[i]['Country/Region'] === nameCountry) {\n virus = 'Confirmed cases'\n }\n }\n d.properties.virus = virus;\n })\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":145,"value":"checkVirus(countries, 'map');","pinned":true,"hidden":false,"mode":"ojs"},{"id":192,"value":"checkVirus(disputed_lines_white, 'lines')","pinned":true,"hidden":false,"mode":"ojs"},{"id":202,"value":"checkVirus(disputed_lines_black, 'lines')","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"md`## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"md`Import data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"csv = d3.csvParse(await FileAttachment(\"data_corona_countries_one_day@3.csv\").text(), d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":642,"value":"mapRegions = [\n { region: 'region_af',\n bounds: [[-22.386242, -35.302895], [54.464066, 35.400868]],\n },\n { region: 'region_am_na',\n bounds: [[-164.486132, 15.864071], [-51.938273, 66.542665]],\n },\n { region: 'region_am_lac',\n bounds: [[-125.078614, -55.938465], [-30.374480, 32.251714]],\n },\n { region: 'region_as',\n bounds: [[42.272860, -14.101779], [156.984549, 56.528959]],\n },\n { region: 'region_me',\n bounds: [[26.588085, 10.041555], [65.259957, 42.930042]]\n },\n { region: 'region_oc',\n bounds: [[94.534557, -48.985667], [180, -3.082989]]\n },\n { region: 'region_eu',\n bounds: [[-34.664661, 34.082183], [38.811897, 71.382490]],\n },\n { region: 'region_world',\n bounds: [[-180, -90], [180, 90]]\n }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"md`## Shapefiles`","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"md`World topojson with countries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"world = FileAttachment(\"world_map@4.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":101,"value":"md`Black dotted line for the disputed territories. It should be placed between the white dotted line and the world map`","pinned":false,"hidden":false,"mode":"ojs"},{"id":98,"value":"disputed_black = FileAttachment(\"disputed_dotted_black@6.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":90,"value":"md`White dotted line for the disputed territories. It should be placed on top of the black dotted line and world map`","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"disputed_white = FileAttachment(\"disputed_dotted_white@9.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":77,"value":"md`## JavaScript libraries`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"md `Import D3`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"d3 = require(\"https://d3js.org/d3.v5.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"md`Import D3 projections. We want to use the Robinson projection https://github.com/d3/d3-geo-projection#geoRobinson`","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"projections = require(\"d3-geo@1\", \"d3-geo-projection@2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"md`Import topojson library`","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}