Heat Map

Developer
Sam Koshy
Size
3,614 Kb
Views
22,264
  1. Heat Map Previews
  2. Heat Map HTML Codes
  3. Heat Map CSS Codes
  4. Heat Map JS Codes

How do I make an heat map?

What is a heat map? How do you make a heat map? This script and codes were developed by Sam Koshy on 14 January 2023, Saturday.

Heat Map Previews
IQ Test

Heat Map - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Heat Map</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href="https://fonts.googleapis.com/css?family=Oswald:300,400,500" rel="stylesheet">
<div class="container"> <div class="title"> <h2>Land Surface-Temperature (Monthly Average)</h2> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Heat Map - Script Codes CSS Codes

.container{ width: 1150px; height: 570px; margin: 40px auto; //box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.32), 0 3px 12px 0 rgba(0, 0, 0, 0.24);
}
.title{ text-align:center; margin-bottom:-10px;
}
svg{ display: block; margin:auto; padding-left:50px;
}
.yAxis{ font-family:'Oswald', sans-serif; font-weight:300; stroke-width: 0px;
}
.legend{ position:absolute; margin-top:20px; width:50px; height:15px;
}
.legendText{ font-size:10px; position:absolute; margin-top:15px; margin-left:-5px;
}
.legendTick{ position:absolute; margin-top:5px;
}
.tooltip{ position:absolute; width: auto; line-height: 0.3; padding-left:5px; padding-right:5px; border-radius:10px; font-family:Helvetica; font-size:13px; color:white; background: grey; opacity:0.8; white-space: nowrap; /*nowrap avoids a line break when approaching the window margin on right*/
}

Heat Map - Script Codes JS Codes

const w = 1000;
const h = 400;
const padding = 40;
const rectH = 29;
const rectW = 3;
const month = [ "January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"
];
const svg = d3.select(".container").append("svg").attr("width", w).attr("height", h);
$(document).ready(function(){
d3.json( "https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/global-temperature.json", function(lstData) { const varMin = d3.min(lstData.monthlyVariance, d => d.variance); const varMax = d3.max(lstData.monthlyVariance, d => d.variance); var colors = [ "#5e4fa2", "#3288bd", "#66c2a5", "#abdda4", "#e6f598", "#ffffbf", "#fee08b", "#fdae61", "#f46d43", "#d53e4f", "#9e0142" ]; const int = parseFloat(((varMax - varMin) / colors.length).toFixed(3)); const xScale = d3 .scaleLinear() .domain([ d3.min(lstData.monthlyVariance, d => d.year), d3.max(lstData.monthlyVariance, d => d.year) ]) .range([padding, w - padding]); const yScale = d3 .scaleBand() .domain(month) .range([0, h - padding]) .padding(0.1); const xAxis = d3.axisBottom(xScale).tickFormat(d3.format("")); const yAxis = d3.axisLeft(yScale).tickSize(5); const tooltip = d3 .select("body") .append("div") .attr("class", "tooltip") .style("visibility", "hidden"); svg .selectAll("rect") .data(lstData.monthlyVariance) .enter() .append("rect") .attr("x", (d) => xScale(d.year)) .attr("y", (d) => yScale(month[d.month - 1])) .attr("width", rectW) .attr("height", rectH) .style("fill", (d)=>colors[getColor(d.variance)]) .on("mouseover", (d) => { tooltip .style("visibility", "visible") .html("<p>"+month[d.month - 1]+", "+d.year+"</p><p>"+ (lstData.baseTemperature + d.variance).toFixed(2)+"\u00B0"+"C" +"</p>"); $("body").mousemove(function(e) { tooltip .style("top", e.pageY - 50 + "px") .style("left", 5 + e.pageX + "px"); });//e.pageX and e.pageY provide the position of pointer }) .on("mouseout", (d) => { tooltip.style("visibility", "hidden"); }); // svg .append("g") .attr("transform", "translate(0, " + (h - padding) + ")") .style("font-size", "13px") .style("font-family","Oswald") .style("font-weight","300") .call(xAxis); svg .append("g") .attr("transform", "translate(" + (padding + 0) + ", 0)") .style("font-size", "14px") .attr("class", "yAxis") .call(yAxis); svg .append("text") .attr("x", w / 2) .attr("y",10) .attr("text-anchor", "start") .attr("transform", "translate(0, " + (h - padding / 4) + ")") .style("font-size", "16px") .style("font-family","Oswald") .text("Year"); var legendLength=50*colors.length; var legend = d3.select(".container") .selectAll("span") .data(colors) .enter() .append("span") .attr('class', 'legend') .style("background-color",(d,i)=>(d)) .style("margin-left",(d,i)=>i*50+w+2*padding-legendLength+"px") .style("margin-bottom",-15+"px") .append("span") .attr('class', 'legendTick') .text("\u2759") .style("color",(d)=>d); legend.append("text") .attr('class', 'legendText').text((d,i)=> { var legendScale=lstData.baseTemperature+(varMin+int*i); legendScale=legendScale.toFixed(2)+"\u00B0"+"C"; return (legendScale); })//\uXXXX	is JavaScript string literal encoding where XXXX is unicode .style("color","black"); function getColor(variance) { if ( (variance >= varMin) && (variance < varMin + int)){ return 0; }else if (variance >= varMin+int && variance < varMin + 2*int){ return 1; }else if (variance >= varMin+ 2*int && variance < varMin + 3*int){ return 2; }else if (variance >= varMin+ 3*int && variance < varMin + 4*int){ return 3; }else if (variance >= varMin+ 4*int && variance < varMin + 5*int){ return 4; }else if (variance >= varMin+ 5*int && variance < varMin + 6*int){ return 5; }else if (variance >= varMin+ 6*int && variance < varMin + 7*int){ return 6; }else if (variance >= varMin+ 7*int && variance < varMin + 8*int){ return 7; }else if (variance >= varMin+ 8*int && variance < varMin + 9*int){ return 8; }else if (variance >= varMin+ 9*int && variance < varMin + 10*int){ return 9; }else{return 10;} } }
);
});
Heat Map - Script Codes
Heat Map - Script Codes
Home Page Home
Developer Sam Koshy
Username codinger
Uploaded January 14, 2023
Rating 3
Size 3,614 Kb
Views 22,264
Do you need developer help for Heat Map?

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!

Sam Koshy (codinger) Script Codes
Name
Data Visualization - US GDP
Twitchtv Status
Simon
Random Quote Machine
Javascript Calculator
Wikipedia Viewer
Tic Tac Toe
Tic Tac Toe _ Alternate
Pomodoro Clock
Personal Portfolio Webpage
Create amazing SEO content 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!