2e:null 2f:["$","title",null,{"children":"Warming Stripes for different observation sites | Patrick Brockmann | Observable"}] 34:T80a,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: "RoyalBlue", 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: 310, closeOnClick: false, autoClose: false }).setContent("" + data[i][2] + " " + data[i][1] + "
" + '(observations start in ' + data[i][6] + ')' + "
" + '

' + '

1870

' + '

2018

' + '

' ); 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:T4d5,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. * 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":"20e6d01532384e2f","slug":"warming-stripes-for-different-observation-sites","title":"Warming Stripes for different observation sites","thumbnail":"a9c603222d59f094f34f7f6d0d3650db3478bfd4435609081de2b8c95d40abb3","access_level":"public","create_time":"$D2019-12-10T16:23:30.741Z","update_time":"$D2019-12-10T16:35:02.870Z","view_time":null,"first_public_time":"$D2019-12-10T16:29:10.403Z","has_unpublished_edits":null,"fork":{"id":"27200e8fae45b18e","slug":"climate-stripes-for-different-observation-sites","title":"Warming Stripes for different observation sites","owner":{"id":"63e96f00663997c7","login":"pbrockmann","name":"Patrick Brockmann"}},"stars":0,"starred":false,"owner":{"type":"team","id":"63e96f00663997c7","login":"pbrockmann","name":"Patrick Brockmann","avatar_url":"https://avatars-next.observableusercontent.com/25f3e1483d611e61cc2dc87b5091004972f4ad8dbf4792cd225809597ddb2463","tier":"starter_2024"},"version":417,"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":0,"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/02\n\nNew version from with same levels for all sites:
\nhttps://observablehq.com/@pbrockmann/climate-stripes-for-different-observation-sites\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":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"