Heatmap Color Scales

Developer
Steve Pepple
Size
2,331 Kb
Views
82,984
  1. Heatmap Color Scales Previews
  2. Heatmap Color Scales HTML Codes
  3. Heatmap Color Scales CSS Codes
  4. Heatmap Color Scales JS Codes

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,984
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
Population Density by County
Data Canvas Realtime Neighborhood Sensors
Real Time Buses API
Heat Map of LA POIs
Diverging Color Scales
Geofence Example
Multi-Hue Color Scales with Bezier Interpolation
Isometric Treemap Visualization of Money Allocation
A Pen by Steve Pepple
Flying Web GL Map
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!