31:Tc5d,chart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]) .style("font-family",'IBM Plex Mono'); //title svg.append("text") .attr('x', 40) .attr('y', 30) .attr("dy", "1em") .attr("text-anchor", "start") .style("fill", "#E1AF00")//"#F21A00") .style("font-size", width/40) .style("font-weight", 700) .html("GLOBAL SEA LEVELS vs"); svg.append("text") .attr('x', 40) .attr('y', 60) .attr("dy", "1em") .attr("text-anchor", "start") .style("fill", "#E1AF00")//"#F21A00") .style("font-size", width/40) .style("font-weight", 700) .html("TEMPERATURE ANOMALY"); // comparison svg.append("text") .attr('x', x(new Date('2002'))-10) .attr('y', 30) .attr("dy", "1em") .attr("text-anchor", "end") .style("fill", "#3B9AB2")//"#F21A00") .style("font-size", width/50) .style("font-weight", 700) .html("1 mm sea level ~ 361.8GT iceberg"); svg.append("text") .attr('x', x(new Date('2002'))-10) .attr('y', 50) .attr("dy", "1em") .attr("text-anchor", "end") .style("fill", "#3B9AB2")//"#F21A00") .style("font-size", width/50) .style("font-weight", 700) .html("6M Empire State Buildings..."); svg.append("rect") .attr("class", "bars") .attr("x", 0) .attr("y", y(260)) .attr("fill", "#EBCC2A") .style("opacity", 0.2) .attr("height", height+margin.top - y(0)+10) .attr("width", width); svg.append("rect") .attr("class", "bars") .attr("x", 0) .attr("y", y(0)) .attr("fill", "#78B7C5") .style("opacity", 0.2) .attr("height", height+margin.top - y(0)) .attr("width", width); //bars svg.append("g") .attr("class", "bars") .selectAll("rect") .data(data) .join("rect") .attr("x", d => x(d.name)) .attr("y", d => y(d.value)) .attr("fill", d => color(d.hue)) .attr("height", d => y(y_min) - y(d.value)+10) .attr("width", x_bandwidth); const yearLine = svg.append('line') .attr('x1', x(new Date('1860'))) .attr('x2', x(new Date('1860'))) .attr('y1', y(0)) .attr('y2', height) .attr('stroke', '#446455'); svg.append('text') .attr('x', x(new Date('1860'))+2) .attr('y', y(-190)) .attr('font-size', width/60) .attr('fill',"#446455") .style("font-weight", 700) .text( "→ Sea level starting to rise" ); // Add median speed const medmedLine = svg.append('line') .attr('x1', 0) .attr('x2', width) .attr('y1', y(0)) .attr('y2', y(0)) .attr('stroke', '#F21A00'); // Add median text for (let i=0;i <3; i++){ svg.append('text') .attr('x', margin.left ) .attr('y', y(0)-15 *i-10) .attr('font-size', width/100) .attr('fill',"#446455") .style("font-weight", 500) .text( cities[i] ); }; svg.append("g") .attr("class", "x-axis") .call(xAxis) .selectAll("text") .style("text-anchor", "end"); svg.append("g") .attr("class", "y-axis") .call(yAxis); return svg.node(); }32:[{"id":"64e075625512c9dfa8762cb62e57795502544156b0dd49b739fb5a15fcf1a62baca1bc0d3d8e1b6d95db474fad1ae40d6dbf1a0ed98fbaddf6c762af67690458","href":"https://static.observableusercontent.com/files/64e075625512c9dfa8762cb62e57795502544156b0dd49b739fb5a15fcf1a62baca1bc0d3d8e1b6d95db474fad1ae40d6dbf1a0ed98fbaddf6c762af67690458","name":"30daychart - Copy of GSL.csv","type":"text/csv","lastModified":1618931510044.767,"size":6715}] 2f:{"title":"Annual Global Sea Levels vs Temperature","cells":[{"id":1,"value":"md`# Annual Global Sea Levels vs Temperature\n\nSea levels (in millimeters) started to rise end of 18 century^{[[1](#footnote1)]} and the list of costal cites most risk from sea level rising[[2](#footnote2)] and [Berkley global temperature anomaly](http://berkeleyearth.lbl.gov/regions/global-land) data.\n\nDay 19 of [30DayChartChallenge](https://twitter.com/30DayChartChall) - *global change* time series`","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":413,"value":"md `## Data sources:\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":578,"value":"footnote1 = footnote(\"World Meteorological Organisation\", 1, \"World Meteorological Organisation\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":591,"value":"md `[World Meteorological Organisation](https://climexp.knmi.nl/getindices.cgi?WMO=PSMSLData/gsl_ann&STATION=global_sea_level&TYPE=i&id=someone@somewhere&NPERYEAR=1)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":632,"value":"footnote2 = footnote(\"Costal cities\", 2, \"Coastal cities and sea level rise\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":635,"value":"md `[Coastal cities and sea level rise](http://www.coastalwiki.org/wiki/Coastal_cities_and_sea_level_rise)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":640,"value":"md`[Estimating glacier contribution to sea level rise](http://www.antarcticglaciers.org/glaciers-and-climate/estimating-glacier-contribution-to-sea-level-rise/)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":718,"value":"temp_min = d3.min(data, d => d.hue)","pinned":true,"hidden":false,"mode":"ojs"},{"id":722,"value":"temp_max = d3.max(data, d => d.hue)","pinned":true,"hidden":false,"mode":"ojs"},{"id":253,"value":"color = d3.scaleSequential()\n .domain([d3.min(data, d => d.hue), d3.max(data, d => d.hue)])\n.interpolator(d3.piecewise(d3.interpolateRgb.gamma(0.5), [\"#3B9AB2\",\"#78B7C5\", \"#EBCC2A\", \"#F21A00\"]))\n // .range([\"#3B9AB2\", \"#78B7C5\", \"#EBCC2A\", \"#E1AF00\", \"#F21A00\"]);","pinned":false,"hidden":false,"mode":"ojs"},{"id":347,"value":"padding = 0.2","pinned":false,"hidden":false,"mode":"ojs"},{"id":317,"value":"x_bandwidth = (width - margin.right - margin.left) / (max_year.getFullYear() - min_year.getFullYear()) - padding","pinned":false,"hidden":false,"mode":"ojs"},{"id":323,"value":"min_year = d3.min(data, d => d.name)","pinned":false,"hidden":false,"mode":"ojs"},{"id":327,"value":"max_year = d3.max(data, d => d.name)","pinned":false,"hidden":false,"mode":"ojs"},{"id":78,"value":"x = d3\n .scaleTime()\n .domain([d3.min(data, d => d.name), d3.max(data, d => d.name) ])\n .range([margin.left, width])\n .nice()","pinned":false,"hidden":false,"mode":"ojs"},{"id":247,"value":"y_min = d3.min(data, d => d.value)","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"y = d3.scaleLinear()\n .domain([d3.min(data, d => d.value), d3.max(data, d => d.value)]).nice()\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"xAxis = g => g\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x)\n .tickSizeOuter(0))","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"yAxis = g => g\n .attr(\"transform\", `translate(${margin.left -10},0)`)\n .call(d3.axisLeft(y))\n .call(g => g.select(\".domain\").remove())\n .call(g => g.select(\".tick:last-of-type text\").clone()\n .attr(\"x\", 3)\n .attr(\"text-anchor\", \"start\")\n .attr(\"font-weight\", \"bold\")\n .text(\"↑ mm \"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":"height = 500","pinned":true,"hidden":false,"mode":"ojs"},{"id":74,"value":"margin = ({top: 20, right: 10, bottom: 30, left: 50})","pinned":true,"hidden":false,"mode":"ojs"},{"id":600,"value":"md `## Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":3,"value":"data = d3.csvParse(await FileAttachment(\"30daychart - Copy of GSL.csv\").text(), ({year, global_sea_level, avgMonthlyAnomaly}) => ({name: new Date(year), value: +global_sea_level, hue:+avgMonthlyAnomaly})).sort((a, b) => b.year - a.year)","pinned":false,"hidden":false,"mode":"ojs"},{"id":496,"value":"cities = [\"Abidjan, Accra, Alexandria, Bangkok, Dakka, Fuzhou, Guangzhou,Hai Phong\",\" Hong Kong, Jakarta, Karachi,Kalkota, Lagos, Lomé, London, Manila\",\"Miami, NYC, Ningbo, Rangoon, Shanghai, Singapore, Zhanjiang\"]","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":454,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":581,"value":"footnote = (referencingCellName, number, text) => {\n return html`

^ ${text}

`;\n}","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}