Heatmap Color Scales

Developer
Steve Pepple
Size
2,331 Kb
Views
82,943

How do I make an heatmap color scales?

What is a heatmap color scales? How do you make a heatmap color scales? This script and codes were developed by Steve Pepple on 22 June 2022, Wednesday.

Heatmap Color Scales Previews
IQ Test

Heatmap Color Scales - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Heatmap Color Scales</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<p>Spectral Scale</p>
<p class="small">Red to Blue diverging scale</p>
<div id="scale1" class="scale"></div>
<p>Pink Scale</p>
<p class="small">Pink to Green diverging scale</p>
<div id="pink" class="scale"></div>
<p>Pink Scale</p>
<p class="small">Pink to Green diverging scale</p>
<div id="green" class="scale"></div>
<p>Bi-variant Scale</p>
<p class="small">Blend Pink and Green Scale</p>
<div id="bivar" class="scale"></div> <script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.12/d3.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/chroma-js/1.1.1/chroma.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Heatmap Color Scales - Script Codes CSS Codes

body { background: #F7F7F7; font-family: Helvetica; padding-left: 30px; margin:0px; }
p { color: #222; clear: left; padding-top: 12px; margin-bottom: 8px; font-weight: 200; font-size: 1.2em }
p.small { color: #444; font-size: 0.9em; padding-top: 0px; margin-top:0px; }
.scale { margin-bottom: 2vm;}
.color { float:left; margin-right: 1vw;
}

Heatmap Color Scales - Script Codes JS Codes

scale = d3.scale.linear();
// PRGn: Purple to Green
// BrBG: Brown to Blue
var scale1 = chroma_scale(12, chroma.scale("Spectral"));
showColors("scale1", scale1)
var pink = chroma_scale(12, chroma.scale("PuRd"));
showColors("pink", pink)
var green = chroma_scale(12, chroma.scale("BuGn"));
showColors("green", green)
var bivar = [];
for (i = 0; i < pink.length; i++) { console.log(pink[i]) var blended = chroma.blend(green[i].hex(), pink[i].hex(), 'darken'); bivar.push(blended); console.log(blended)
}
showColors("bivar", bivar)
function showColors(id, colors) { var box = $("#" + id); _.each(colors, function(color) { var item = $("<div class='color'>"); item.css("background", color.hex()) item.css("height", "4vw"); item.css("width", "4vw") box.append(item) });
}
function chroma_scale(length, chroma_scale) { var colors = []; scale.domain([1, length]) var color_scale = chroma.scale(); for (var i = 1; i <= length; i++) { var val = scale(i) colors.push(chroma_scale(val)); } return colors;
}
Heatmap Color Scales - Script Codes
Heatmap Color Scales - Script Codes
Home Page Home
Developer Steve Pepple
Username stevepepple
Uploaded June 22, 2022
Rating 3
Size 2,331 Kb
Views 82,943
Do you need developer help for Heatmap Color Scales?

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!

Steve Pepple (stevepepple) Script Codes
Name
Geofence Example
LA Point-of-Interest Analysis
Population Density by County
3D Map Sphere using Three.js
Data Canvas Realtime Neighborhood Sensors
Oakland Instagram Colors
Bay Area Bus Stops and Businesses
Heat Map of LA POIs
Bay Area Example of ViziCities
Isometric Treemap Visualization of Money Allocation
Create amazing Facebook ads 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!