Skip to content

Instantly share code, notes, and snippets.

@mbostock

mbostock/.block

Forked from mbostock/.block
Last active July 14, 2019 14:12
Show Gist options
  • Save mbostock/3969722 to your computer and use it in GitHub Desktop.
Save mbostock/3969722 to your computer and use it in GitHub Desktop.
Download ZIP
Gradient Encoding
Raw
.block
license: gpl-3.0
redirect: https://observablehq.com/@d3/gradient-encoding
Raw
README.md

This variation of a line chart demonstrates how to use a linear gradient as a quantitative color encoding redundant with y-position. The gradient units are defined as userSpaceOnUse, such that the gradient stops can be positioned explicitly rather than based on the line’s bounding box.

Raw
data.tsv
date temperature
20111001 62.7
20111002 59.9
20111003 59.1
20111004 58.8
20111005 58.7
20111006 57.0
20111007 56.7
20111008 56.8
20111009 56.7
20111010 60.1
20111011 61.1
20111012 61.5
20111013 64.3
20111014 67.1
20111015 64.6
20111016 61.6
20111017 61.1
20111018 59.2
20111019 58.9
20111020 57.2
20111021 56.4
20111022 60.7
20111023 65.1
20111024 60.9
20111025 56.1
20111026 54.6
20111027 56.1
20111028 58.1
20111029 57.5
20111030 57.7
20111031 55.1
20111101 57.9
20111102 64.6
20111103 56.2
20111104 50.5
20111105 51.3
20111106 52.6
20111107 51.4
20111108 50.6
20111109 54.6
20111110 55.6
20111111 53.9
20111112 54.0
20111113 53.8
20111114 53.5
20111115 53.4
20111116 52.2
20111117 52.7
20111118 53.1
20111119 49.0
20111120 50.4
20111121 51.1
20111122 52.3
20111123 54.6
20111124 55.1
20111125 51.5
20111126 53.6
20111127 52.3
20111128 51.0
20111129 49.5
20111130 49.8
20111201 60.4
20111202 62.2
20111203 58.3
20111204 52.7
20111205 51.5
20111206 49.9
20111207 48.6
20111208 46.4
20111209 49.8
20111210 52.1
20111211 48.8
20111212 47.4
20111213 47.2
20111214 46.1
20111215 48.8
20111216 47.9
20111217 49.8
20111218 49.1
20111219 48.3
20111220 49.3
20111221 48.4
20111222 53.3
20111223 47.5
20111224 47.9
20111225 48.9
20111226 45.9
20111227 47.2
20111228 48.9
20111229 50.9
20111230 52.9
20111231 50.1
20120101 53.9
20120102 53.1
20120103 49.7
20120104 52.7
20120105 52.6
20120106 49.0
20120107 51.0
20120108 56.8
20120109 52.3
20120110 51.6
20120111 49.8
20120112 51.9
20120113 53.7
20120114 52.9
20120115 49.7
20120116 45.3
20120117 43.6
20120118 45.0
20120119 47.3
20120120 51.4
20120121 53.7
20120122 48.3
20120123 52.9
20120124 49.1
20120125 52.1
20120126 53.6
20120127 50.4
20120128 50.3
20120129 53.8
20120130 51.9
20120131 50.0
20120201 50.0
20120202 51.3
20120203 51.5
20120204 52.0
20120205 53.8
20120206 54.6
20120207 54.3
20120208 51.9
20120209 53.8
20120210 53.9
20120211 52.3
20120212 50.1
20120213 49.5
20120214 48.6
20120215 49.9
20120216 52.4
20120217 49.9
20120218 51.6
20120219 47.8
20120220 48.7
20120221 49.7
20120222 53.4
20120223 54.1
20120224 55.9
20120225 51.7
20120226 47.7
20120227 45.4
20120228 47.0
20120229 49.8
20120301 48.9
20120302 48.1
20120303 50.7
20120304 55.0
20120305 48.8
20120306 48.4
20120307 49.9
20120308 49.2
20120309 51.7
20120310 49.3
20120311 50.0
20120312 48.6
20120313 53.9
20120314 55.2
20120315 55.9
20120316 54.6
20120317 48.2
20120318 47.1
20120319 45.8
20120320 49.7
20120321 51.4
20120322 51.4
20120323 48.4
20120324 49.0
20120325 46.4
20120326 49.7
20120327 54.1
20120328 54.6
20120329 52.3
20120330 54.5
20120331 56.2
20120401 51.1
20120402 50.5
20120403 52.2
20120404 50.6
20120405 47.9
20120406 47.4
20120407 49.4
20120408 50.0
20120409 51.3
20120410 53.8
20120411 52.9
20120412 53.9
20120413 50.2
20120414 50.9
20120415 51.5
20120416 51.9
20120417 53.2
20120418 53.0
20120419 55.1
20120420 55.8
20120421 58.0
20120422 52.8
20120423 55.1
20120424 57.9
20120425 57.5
20120426 55.3
20120427 53.5
20120428 54.7
20120429 54.0
20120430 53.4
20120501 52.7
20120502 50.7
20120503 52.6
20120504 53.4
20120505 53.1
20120506 56.5
20120507 55.3
20120508 52.0
20120509 52.4
20120510 53.4
20120511 53.1
20120512 49.9
20120513 52.0
20120514 56.0
20120515 53.0
20120516 51.0
20120517 51.4
20120518 52.2
20120519 52.4
20120520 54.5
20120521 52.8
20120522 53.9
20120523 56.5
20120524 54.7
20120525 52.5
20120526 52.1
20120527 52.2
20120528 52.9
20120529 52.1
20120530 52.1
20120531 53.3
20120601 54.8
20120602 54.0
20120603 52.3
20120604 55.3
20120605 53.5
20120606 54.1
20120607 53.9
20120608 54.4
20120609 55.0
20120610 60.0
20120611 57.2
20120612 55.1
20120613 53.3
20120614 53.4
20120615 54.6
20120616 57.0
20120617 55.6
20120618 52.5
20120619 53.9
20120620 55.3
20120621 53.3
20120622 54.1
20120623 55.2
20120624 55.8
20120625 56.8
20120626 57.5
20120627 57.7
20120628 56.6
20120629 56.4
20120630 58.4
20120701 58.8
20120702 56.4
20120703 56.5
20120704 55.8
20120705 54.8
20120706 54.9
20120707 54.7
20120708 52.8
20120709 53.7
20120710 53.1
20120711 52.7
20120712 52.0
20120713 53.4
20120714 54.0
20120715 54.0
20120716 54.5
20120717 56.7
20120718 57.5
20120719 57.1
20120720 58.1
20120721 57.6
20120722 56.0
20120723 56.6
20120724 57.8
20120725 57.5
20120726 56.4
20120727 55.3
20120728 55.0
20120729 55.6
20120730 55.6
20120731 55.9
20120801 55.4
20120802 54.4
20120803 53.7
20120804 54.1
20120805 57.8
20120806 58.2
20120807 58.0
20120808 57.0
20120809 55.0
20120810 54.8
20120811 53.0
20120812 52.5
20120813 53.3
20120814 53.9
20120815 56.2
20120816 57.1
20120817 55.3
20120818 56.2
20120819 54.3
20120820 53.1
20120821 53.4
20120822 54.5
20120823 55.7
20120824 54.8
20120825 53.8
20120826 56.5
20120827 58.3
20120828 58.7
20120829 57.5
20120830 55.9
20120831 55.4
20120901 55.7
20120902 53.1
20120903 53.5
20120904 52.5
20120905 54.5
20120906 56.3
20120907 56.4
20120908 56.5
20120909 56.4
20120910 55.4
20120911 56.2
20120912 55.7
20120913 54.3
20120914 55.2
20120915 54.3
20120916 52.9
20120917 54.8
20120918 54.8
20120919 56.8
20120920 55.4
20120921 55.8
20120922 55.9
20120923 52.8
20120924 54.5
20120925 53.3
20120926 53.6
20120927 52.1
20120928 52.6
20120929 53.9
20120930 55.1
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
margin: auto;
width: 960px;
}
text {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.x.axis path {
display: none;
}
.line {
fill: none;
stroke: url(#temperature-gradient);
stroke-width: 1.5px;
}
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var margin = {top: 20, right: 20, bottom: 30, left: 50},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var parseDate = d3.time.format("%Y%m%d").parse;
var x = d3.time.scale()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var line = d3.svg.line()
.interpolate("basis")
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.temperature); });
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.tsv("data.tsv", function(error, data) {
if (error) throw error;
data.forEach(function(d) {
d.date = parseDate(d.date);
d.temperature = +d.temperature;
});
x.domain([data[0].date, data[data.length - 1].date]);
y.domain(d3.extent(data, function(d) { return d.temperature; }));
svg.append("linearGradient")
.attr("id", "temperature-gradient")
.attr("gradientUnits", "userSpaceOnUse")
.attr("x1", 0).attr("y1", y(50))
.attr("x2", 0).attr("y2", y(60))
.selectAll("stop")
.data([
{offset: "0%", color: "steelblue"},
{offset: "50%", color: "gray"},
{offset: "100%", color: "red"}
])
.enter().append("stop")
.attr("offset", function(d) { return d.offset; })
.attr("stop-color", function(d) { return d.color; });
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Temperature (ºF)");
svg.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line);
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment