Heat Map with D3.js

Developer
Kw7oe
Size
3,507 Kb
Views
20,240
  1. Heat Map with D3.js Previews
  2. Heat Map with D3.js HTML Codes
  3. Heat Map with D3.js CSS Codes
  4. Heat Map with D3.js JS Codes

How do I make an heat map with d3.js?

What is a heat map with d3.js? How do you make a heat map with d3.js? This script and codes were developed by Kw7oe on 26 November 2022, Saturday.

Heat Map with D3.js Previews
IQ Test

Heat Map with D3.js - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Heat Map with D3.js</title> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class ="center"></div>
<div id = "tooltip" class = "hidden">	<p><strong>Temparature: </strong>	<span id = "temp"></span> &#x2103	</p>	<p><strong>Date: </strong>	<span id = "date"></span>	</p>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Heat Map with D3.js - Script Codes CSS Codes

.center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
}
#tooltip { position: absolute; border: 1px solid #CCCCCC; background-color: white; padding: 6px 8px; border-radius: 6px; pointer-events: none;
}
#tooltip h3, #tooltip p { margin: 10;
}
.hidden { display: none;
}
.tick line { stroke: white;
}
.x-axis path.domain { stroke: white;
}

Heat Map with D3.js - Script Codes JS Codes

var margin = {	top: 40,	right: 20,	bottom: 80,	left: 60
}
var width = 800 - margin.right - margin.left
var height = 500 - margin.top - margin.bottom
d3.json("https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/global-temperature.json", function(error, data) {	// Data	var dataset = data.monthlyVariance	var year = []	for (var i = 0; i < dataset.length; i += 12) {	year.push(dataset[i].year)	}	var month = ["Jan" , "Feb", "March", "April", "May", "June", "July", "Aug", "Sept", "Oct", "Nov", "Dec"]	var colors = [	"#B298DC",	"#ABDAE1",	"#FCF5C7",	"#FFEE93",	"#FFC09F",	"#cd5c5c"	]	var labels = ["0", "2", "6", "7", "8", "9"]	var map = function(value) {	result = 0	if (value > 9.0) {	return 5	} else if (value > 8.0) {	result = 4	} else if (value > 7.0) {	result = 3	} else if (value > 6.0) {	result = 2	} else if (value > 2.0) {	result = 1	}	return result	}	// Draw SVG	var svg = d3.select(".center")	.append("svg")	.attr("width", width + margin.right + margin.left)	.attr("height", height + margin.top + margin.bottom)	.append("g")	.attr("transform", "translate(" + margin.left + ", " + margin.top + ")")	// Scale	var xScale = d3.scaleBand()	.domain(year)	.range([0, width])	var yScale = d3.scaleBand()	.domain(month)	.range([height, 0])	// Axis	var xAxis = d3.axisBottom(xScale)	.tickValues(xScale.domain().filter(function(d) {	return d % 13 == 0	}))	svg.append("g")	.attr("class", "x-axis")	.call(	d3.axisLeft(yScale)	)	svg.append("g")	.attr("transform", "translate(0," + height + ")")	.call(xAxis)	// Title svg.append("text")	.attr("x", width / 2 )	.attr("y", -15)	.attr("text-anchor", "middle")	.text("Monthly Global Land-Surface Temperature")	.style("font-size", 28)	.style("font-family", "sans-serif")	.style("text-decoration", "underline")	// Colors	var colorBlockWidth = "30"	var colorBlockHeight = "20"	svg.append("g")	.attr("class", "color_blocks")	.selectAll("rect")	.data(colors)	.enter()	.append("rect")	.attr("x", function(d, i) {	return (width - colors.length * colorBlockWidth) / 2 + (i * colorBlockWidth)	})	.attr("y", height + 40)	.attr("height", colorBlockHeight)	.attr("width", colorBlockWidth)	.attr("fill", function(d) {	return d	})	// Label svg.append("g")	.attr("class", "labels")	.selectAll("text")	.data(labels)	.enter()	.append("text")	.attr("x", function(d, i) {	return (width - colors.length * colorBlockWidth) / 2 + (i * colorBlockWidth) + colorBlockWidth / 2	})	.attr("y", height + 40 + 30 + 10)	.attr("text-anchor", "middle")	.text(function(d) { return d })	.style("font-size", 12)	.style("font-family", "sans-serif")	// Heat Map	svg.selectAll("rect")	.data(dataset)	.enter()	.append("rect")	.attr("x", function(d, i) {	return year.indexOf(d.year) * xScale.bandwidth()	})	.attr("y", function(d) {	return height - d.month * yScale.bandwidth()	})	.attr("width", xScale.bandwidth())	.attr("height", yScale.bandwidth())	.attr("fill", function(d) {	var temp = data.baseTemperature + d.variance	return colors[map(temp)]	})	.style("cursor", "pointer")	.on("mouseover", function(d) {	var tooltip = d3.select("#tooltip")	tooltip.style("top", d3.event.pageY + 10 + "px") .style("left", d3.event.pageX + 10 + "px")	var temp = data.baseTemperature + d.variance	tooltip.select("#temp").text(temp)	tooltip.select("#date").text(month[d.month - 1] + ", " + d.year)	tooltip.classed("hidden", false)	})	.on("mouseout", function(d) {	d3.select("#tooltip").classed("hidden", true)	})
})
Heat Map with D3.js - Script Codes
Heat Map with D3.js - Script Codes
Home Page Home
Developer Kw7oe
Username kw7oe
Uploaded November 26, 2022
Rating 3
Size 3,507 Kb
Views 20,240
Do you need developer help for Heat Map with D3.js?

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!

Kw7oe (kw7oe) Script Codes
Name
Twitch Streams
JavaScript Calculator
Simple Image Slider
Weather App
Vertical accordion menu
Simple 3D Image Slider
Music Player
Autoplay 3D Image Slider
Image with Slide Up Caption
Tic Tac Toe
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!