2e:null 2f:["$","title",null,{"children":"Warming Stripes for different observation sites | Patrick Brockmann | Observable"}] 34:T7ad,myMap = { button; // Create and yeild div to place map in let container = DOM.element('div', { style: `width:${width}px;height:${width / 1.5}px` }); yield container; // Create a map object and add a layer to it. let map = L.map(container, { center: [47, 2], zoom: 6 }); L.tileLayer( 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png', {} ).addTo(map); // To turn points into circleMarkers const circleOptions = { fillColor: "Gray", color: "#000", weight: 1, opacity: 1, fillOpacity: 0.6, radius: 6 }; // Add geoJSON data to map for (var i = 0; i < data.length; i++) { var popup = L.popup({ minWidth: 350, closeOnClick: false, autoClose: false }).setContent( "" + data[i][2] + " " + data[i][1] + "
" + '(observations start in ' + data[i][6] + ')' + "
" + '

' ); circleOptions.fillOpacity = 1. - (data[i][6] - 1870) / (2018 - 1900); L.circleMarker([data[i][3], data[i][4]], circleOptions) .bindPopup(popup) .addTo(map); } map.eachLayer(function(layer) { L.setOptions(layer, { riseOnHover: true }); }); //================================================= map.on('click', function(e) { map.eachLayer(function(layer) { if (layer instanceof L.CircleMarker) { layer.closePopup(); } }); }); //================================================= var a = Array.from({ length: 2 }, () => Math.floor(Math.random() * data.length) ); i = 0; map.eachLayer(function(layer) { if (layer instanceof L.CircleMarker) { if (a.indexOf(i) != -1) { layer.openPopup(); } i = i + 1; } }); }35:T511,md`Here is an interactive map with the following features : * You can display the warming stripes for a site by clicking on a marker. * Multiple displays are possible giving the user the possibility to compare one site to another (click on the map to remove all selected sites). * The color scale goes from blue to red representing respectively colder years and warmer years, respectively, relative to the mean calculated accross 30 years of the 1980-2009 period for each site. The levels are common to all sites, from -1.6 to 1.6 [°C]. * Only observation sites with the complete 30 years of the 1980-2009 period have been selected. * The gray color represents missing values since the beginning of the observation period for each site. * The opacity of the markers indicates the starting year of observations (darker respresents an earlier starting date). * Files processed use the mean temperature indice (TG) and are available from the European Climate Assessment & Dataset project (ECA&D) from https://www.ecad.eu/indicesextremes * Processing (anomalies, warming stripes creation) has been done with a Python notebook available from : https://github.com/PBrockmann/ClimateStripes * More information on warning stripes can be found at : https://en.wikipedia.org/wiki/Warming_stripes `36:[] 32:{"id":"27200e8fae45b18e","slug":"climate-stripes-for-different-observation-sites","title":"Warming Stripes for different observation sites","thumbnail":"284098fbb2c6858d98e783e7ea9569dcca4f9ffb95740a7cbdae208984118436","access_level":"public","create_time":"$D2019-11-29T11:05:10.087Z","update_time":"$D2021-06-01T15:59:26.005Z","view_time":null,"first_public_time":"$D2019-11-29T16:52:52.080Z","has_unpublished_edits":null,"fork":false,"stars":12,"starred":false,"owner":{"type":"team","id":"63e96f00663997c7","login":"pbrockmann","name":"Patrick Brockmann","avatar_url":"https://avatars-next.observableusercontent.com/25f3e1483d611e61cc2dc87b5091004972f4ad8dbf4792cd225809597ddb2463","tier":"starter_2024"},"version":411,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"68e18af682792012","login":"pbrockmann","name":"Patrick Brockmann","avatar_url":"https://avatars-next.observableusercontent.com/25f3e1483d611e61cc2dc87b5091004972f4ad8dbf4792cd225809597ddb2463","tier":null}],"members":[{"type":"individual","id":"68e18af682792012","login":"pbrockmann","name":"Patrick Brockmann","avatar_url":"https://avatars-next.observableusercontent.com/25f3e1483d611e61cc2dc87b5091004972f4ad8dbf4792cd225809597ddb2463","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":7,"collection":null,"type":"notebook","body":{"title":"Warming Stripes for different observation sites","cells":[{"id":0,"value":"md`# Warming Stripes for different observation sites`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"md`\n

\n\nData from the European Climate Assessment & Dataset project (ECA&D)\n\nUpdated 2019/12/10\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":402,"value":"md`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":346,"value":"viewof button = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":396,"value":"md`\nThanks to :\n * Ed Hawkins and the site https://showyourstripes.info/\n * Felix Kohlgrüber for his works on Warming Stripes visible from a Observable notebook https://observablehq.com/@fkohlgrueber/warming-stripes\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"src = \"https://raw.githubusercontent.com/PBrockmann/ClimateStripes/master/data.json\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"data = (await fetch(src)).json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"L = {\n const L = await require(\"leaflet@1/dist/leaflet.js\");\n if (!L._style) {\n const href = await require.resolve(\"leaflet@1/dist/leaflet.css\");\n document.head.appendChild(L._style = html``);\n }\n return L;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":292,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 33:"$32:body"