Monthly Global Land Surface Temperature

Developer
Katie Inkblotty
Size
4,479 Kb
Views
40,480
  1. Monthly Global Land Surface Temperature Previews
  2. Monthly Global Land Surface Temperature HTML Codes
  3. Monthly Global Land Surface Temperature CSS Codes
  4. Monthly Global Land Surface Temperature JS Codes

How do I make an monthly global land surface temperature?

Made with D3.js. What is a monthly global land surface temperature? How do you make a monthly global land surface temperature? This script and codes were developed by Katie Inkblotty on 08 August 2022, Monday.

Monthly Global Land Surface Temperature Previews
IQ Test

Monthly Global Land Surface Temperature - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Monthly Global Land Surface Temperature</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="graph"></div>
<div id="tooltip" class="hidden"> <p id="tool-1">Year - Month</p> <p id="tool-2">Temp &deg;C</p> <p id="tool-3">Offset &deg;C</p>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Monthly Global Land Surface Temperature - Script Codes CSS Codes

body { background-color: #eee;
}
#graph { background-color: #fff; border: 1px solid #e0e0e0; box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5); font-family: Verdana, sans-serif; margin: 0 auto; padding: 1%; width: 1245px;
}
.axis path,
.axis line { fill: none; shape-rendering: crispEdges;
}
.xAxis path,
.xAxis line { stroke: black;
}
.axis text { font-size: 0.9em;
}
.header { font-size: 1.1em;
}
.head-main { font-size: 1.5em;
}
.head-details { font-size: 0.8em;
}
.key-text { font-size: 0.8em;
}
.axis-label { font-size: 1.1em;
}
#yAxis-label { transform: rotate(-90deg);
}
#tooltip { background-color: rgba(0, 0, 0, 0.9); border-radius: 0.5em; color: #eee; display: inline-block; font-family: Verdana, sans-serif; padding: 0.5% 1%; position: absolute; text-align: center;
}
#tooltip p { margin: 0.2em 0;
}
.hidden { opacity: 0; z-index: -5;
}

Monthly Global Land Surface Temperature - Script Codes JS Codes

var w = 1200;
var h = 500;
var yAxisWidth = 45;
var xAxisHeight = 30;
var headerHeight = 100;
var keyHeight = 75;
var url = 'https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/global-temperature.json';
var heatGraph = d3.select('#graph').append('svg').attr({width: w + yAxisWidth, height: h + xAxisHeight + headerHeight + keyHeight});
var header = heatGraph.selectAll('text.header') .data(['Monthly Global Land Surface Temperature', '1753 - 2015', 'Temperatures are in Celsius and reported as anomalies relative to the Jan 1951-Dec 1980 average.', 'Estimated Jan 1951-Dec 1980 absolute temperature ℃: 8.66 +/- 0.07']) .enter() .append('svg:text') .text(function(d) { return d }) .attr({ 'text-anchor': 'middle', y: function(d,i) { return 5 + (i+1)*20; }, x: (w+yAxisWidth)/2, class: function(d,i) { if (i === 0) { return 'head-main' } else if (i > 1) { return 'head-details' } } }) .classed('header', true);
d3.json(url, function(err, data) { if (err) { console.log('GET json data error: ' + err); } else { var dataSet = data.monthlyVariance; var baseTemp = data.baseTemperature; var barWidth = function() { var yearRange = d3.max(dataSet, function(d) {return d.year}) - 1753; return w/yearRange; }; var barHeight = h/12; var xScale = d3.scale.linear() .domain([1753, d3.max(dataSet, function(d) {return d.year})]) .range([yAxisWidth + 15, w]); // domain end is not inclusive? var yScale = d3.scale.linear() .domain([1, 13]) .range([headerHeight, h + headerHeight]); var yTextScale = d3.scale.linear() .domain([1,13]) .range([headerHeight + barHeight/2, headerHeight + h + barHeight/2]); var fillColor = function(variance) { var temp = baseTemp + variance; if (temp < 2.7) { return 'rgb(94, 79, 162)'} else if (temp < 3.9) { return 'rgb(50, 136, 189)' } else if (temp < 5) { return 'rgb(102, 194, 165)' } else if (temp < 6.1) { return 'rgb(171, 221, 164)' } else if (temp < 7.2) { return 'rgb(230, 245, 152)' } else if (temp < 8.3) { return 'rgb(255, 255, 191)' } else if (temp < 9.4) { return 'rgb(254, 224, 139)' } else if (temp < 10.5) { return 'rgb(253, 174, 97)' } else if (temp < 11.6) { return 'rgb(244, 109, 67)' } else if (temp < 12.7) { return 'rgb(213, 62, 79)' } else { return 'rgb(158, 1, 66)' } } var fillKey = function(num) { return fillColor(num - baseTemp); } function formatMonth(num) { var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec']; return months[num-1]; } function formatYear(num) { return num.toString().replace(/\,/g, '') }; var xAxis = d3.svg.axis().scale(xScale) .ticks(25) .tickFormat(formatYear); var xAxisGroup = heatGraph.append('g') .attr({ class: 'xAxis axis', transform: 'translate(0,' + (h+headerHeight) + ')' }) .call(xAxis); var xAxisLabel = heatGraph.append('svg:text') .text('Year') .attr({ class: 'axis-label', x: yAxisWidth + (w/2), y: headerHeight + h + xAxisHeight + 15 }); var yAxis = d3.svg.axis().scale(yTextScale) .orient('left') .tickFormat(formatMonth); var yAxisGroup = heatGraph.append('g') .attr({ class: 'yAxis axis', transform: function(d,i) { return 'translate(' + (yAxisWidth+20) + ',0)' }, y: function(d,i) { return yScale(d) + 50 } }) .call(yAxis); var yAxisLabel = heatGraph.append('svg:text') .text('Month') .attr({ id: 'yAxis-label', class: 'axis-label', y: 15, cy: 0, x: -headerHeight - h/2, cx: 0 }) var key = heatGraph.selectAll('rect.keyBar') .data([0, 2.7, 3.9, 5, 6.1, 7.2, 8.3, 9.4, 10.5, 11.6, 12.7]) .enter() .append('svg:rect') .attr({ class: 'key-bar', x: function(d,i) { return 700 + 45*i; }, y: h + headerHeight + keyHeight - 20, height: barHeight/1.5, fill: function(d) { return fillKey(d) }, width: 45 }); var keyText = heatGraph.selectAll('text.keyText') .data(['0', '2.7', '3.9', '5', '6.1', '7.2', '8.3', '9.4', '10.5', '11.6', '12.7']) .enter() .append('svg:text') .text(function(d) { return d }) .attr({ class: 'key-text', x: function(d,i) { return 722.5 + 45*i; }, y: h + headerHeight + keyHeight + 20, fill: 'black', 'text-anchor': 'middle' }); var bars = heatGraph.selectAll('rect.heatBar') .data(dataSet) .enter() .append('svg:rect') .attr({ width: barWidth, height: barHeight, cursor: 'pointer', fill: function(d) { return fillColor(d.variance); }, x: function(d,i) { return xScale(d.year); }, y: function(d) { return yScale(d.month); } }) .on('mouseover', function(d,i) { d3.select('#tooltip').classed('hidden', false); // change the details of the tooltip d3.select('#tool-1').html(d.year + ' - ' + formatMonth(d.month)); d3.select('#tool-2').html(d3.round(baseTemp + d.variance, 3) + ' &deg;C'); d3.select('#tool-3').html(d3.round(d.variance, 3) + ' &deg;C'); // change the position of the tooltip d3.select('#tooltip') .attr({ 'style': `top:${yScale(d.month)-barHeight-20}px; left:${xScale(d.year)}px` }) }) .on('mouseout', function(d) { d3.select('#tooltip').classed('hidden', true); }); }
})
Monthly Global Land Surface Temperature - Script Codes
Monthly Global Land Surface Temperature - Script Codes
Home Page Home
Developer Katie Inkblotty
Username inkblotty
Uploaded August 08, 2022
Rating 3
Size 4,479 Kb
Views 40,480
Do you need developer help for Monthly Global Land Surface Temperature?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Katie Inkblotty (inkblotty) Script Codes
Name
Twitch Live Channels
Star Wars search
Wiki Search Clone
Tic Tac Toe
GeoLocation
Google Calendar Event Feed
JQuery Calculator
US GDP Bar Chart
Force Directed Graph
Simon game
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!