Skip to content

Instantly share code, notes, and snippets.

@jonsadka

jonsadka/.block

Last active Feb 17, 2017
Embed
What would you like to do?
Nonlinear Color Scales
license: mit
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
<style>
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
text {font: Verdana, arial;}
</style>
</head>
<body>
<script>
const width = 960;
const height = 500;
const margin = 40;
const barHeight = 50;
const barWidth = 20;
const numBars = (width - 2 * margin) / barWidth;
const start = 1;
const end = (width - 2 * margin);
const points = d3.range(start, end, barWidth)
// Linear Scale
const colorScaleLinear = d3.scaleSequential(
d3.interpolateReds
)
.domain([start, end])
// Exponential Scale
const expScale = d3.scalePow()
.exponent(Math.E)
.domain([start, end])
const colorScaleExp = d3.scaleSequential(
(d) => d3.interpolateReds(expScale(d))
)
// Log Scale
const logScale = d3.scaleLog()
.domain([start, end])
const colorScaleLog = d3.scaleSequential(
(d) => d3.interpolateReds(logScale(d))
)
const svg = d3.select('body').append('svg')
.attr('width', width)
.attr('height', 500)
const scales = [colorScaleLinear, colorScaleExp, colorScaleLog];
scales.forEach((scale, i) => {
svg.append('g')
.attr('class', 'scale-' + i)
.attr('transform', 'translate(' + margin + ',' + (2 * margin + i * 3 * barHeight) + ')')
.selectAll('bars').data(points).enter()
.append('rect')
.attr('y', 0)
.attr('x', (d, i) => i * barWidth)
.attr('width', barWidth)
.attr('height', barHeight)
.attr('fill', scale)
d3.select('.scale-' + i).append('text')
.text(i === 0 ? 'Linear' : i === 1 ? 'Exponential' : 'Logarithmic')
.attr('x', 0)
.attr('y', -10)
.attr('fill', '#333')
})
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.