Skip to content

Instantly share code, notes, and snippets.

@syntagmatic

syntagmatic/README.md

Forked from mbostock/.block
Last active November 14, 2017 06:13
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save syntagmatic/7612dd3c35eeddf51a0b to your computer and use it in GitHub Desktop.
Save syntagmatic/7612dd3c35eeddf51a0b to your computer and use it in GitHub Desktop.
Download ZIP
d3.horizon Example
Raw
README.md

Attempting to reimplement the stocks example from Cubism with the d3.horizon plugin.

A few notes so far:

  • d3.horizon does not expose d3.scales, which makes it hard to create axes
  • d3.horizon seems to expect an array of data which map to pixels. It would be more convenient the days in the year didn't have to be enumerated in this example, to fill in gaps. Without doing this, the chart appears to render fine but lacks gaps and is therefore wrong if the x-axis is a linear timecale.
Raw
horizon.js
(function() {
d3.horizon = function() {
var bands = 1, // between 1 and 5, typically
mode = "offset", // or mirror
interpolate = "linear", // or basis, monotone, step-before, etc.
x = d3_horizonX,
y = d3_horizonY,
w = 960,
h = 40,
duration = 0;
var color = d3.scale.linear()
.domain([-1, 0, 0, 1])
.range(["#08519c", "#bdd7e7", "#bae4b3", "#006d2c"]);
// For each small multiple…
function horizon(g) {
g.each(function(d, i) {
var g = d3.select(this),
n = 2 * bands + 1,
xMin = Infinity,
xMax = -Infinity,
yMax = -Infinity,
x0, // old x-scale
y0, // old y-scale
id; // unique id for paths
// Compute x- and y-values along with extents.
var data = d.map(function(d, i) {
var xv = x.call(this, d, i),
yv = y.call(this, d, i);
if (xv < xMin) xMin = xv;
if (xv > xMax) xMax = xv;
if (-yv > yMax) yMax = -yv;
if (yv > yMax) yMax = yv;
return [xv, yv];
});
// Compute the new x- and y-scales, and transform.
var x1 = d3.scale.linear().domain([xMin, xMax]).range([0, w]),
y1 = d3.scale.linear().domain([0, yMax]).range([0, h * bands]),
t1 = d3_horizonTransform(bands, h, mode);
// Retrieve the old scales, if this is an update.
if (this.__chart__) {
x0 = this.__chart__.x;
y0 = this.__chart__.y;
t0 = this.__chart__.t;
id = this.__chart__.id;
} else {
x0 = x1.copy();
y0 = y1.copy();
t0 = t1;
id = ++d3_horizonId;
}
// We'll use a defs to store the area path and the clip path.
var defs = g.selectAll("defs")
.data([null]);
// The clip path is a simple rect.
defs.enter().append("defs").append("clipPath")
.attr("id", "d3_horizon_clip" + id)
.append("rect")
.attr("width", w)
.attr("height", h);
defs.select("rect").transition()
.duration(duration)
.attr("width", w)
.attr("height", h);
// We'll use a container to clip all horizon layers at once.
g.selectAll("g")
.data([null])
.enter().append("g")
.attr("clip-path", "url(#d3_horizon_clip" + id + ")");
// Instantiate each copy of the path with different transforms.
var path = g.select("g").selectAll("path")
.data(d3.range(-1, -bands - 1, -1).concat(d3.range(1, bands + 1)), Number);
var d0 = d3_horizonArea
.interpolate(interpolate)
.x(function(d) { return x0(d[0]); })
.y0(h * bands)
.y1(function(d) { return h * bands - y0(d[1]); })
(data);
var d1 = d3_horizonArea
.x(function(d) { return x1(d[0]); })
.y1(function(d) { return h * bands - y1(d[1]); })
(data);
path.enter().append("path")
.style("fill", color)
.attr("transform", t0)
.attr("d", d0);
path.transition()
.duration(duration)
.style("fill", color)
.attr("transform", t1)
.attr("d", d1);
path.exit().transition()
.duration(duration)
.attr("transform", t1)
.attr("d", d1)
.remove();
// Stash the new scales.
this.__chart__ = {x: x1, y: y1, t: t1, id: id};
});
d3.timer.flush();
}
horizon.duration = function(x) {
if (!arguments.length) return duration;
duration = +x;
return horizon;
};
horizon.bands = function(x) {
if (!arguments.length) return bands;
bands = +x;
color.domain([-bands, 0, 0, bands]);
return horizon;
};
horizon.mode = function(x) {
if (!arguments.length) return mode;
mode = x + "";
return horizon;
};
horizon.colors = function(x) {
if (!arguments.length) return color.range();
color.range(x);
return horizon;
};
horizon.interpolate = function(x) {
if (!arguments.length) return interpolate;
interpolate = x + "";
return horizon;
};
horizon.x = function(z) {
if (!arguments.length) return x;
x = z;
return horizon;
};
horizon.y = function(z) {
if (!arguments.length) return y;
y = z;
return horizon;
};
horizon.width = function(x) {
if (!arguments.length) return w;
w = +x;
return horizon;
};
horizon.height = function(x) {
if (!arguments.length) return h;
h = +x;
return horizon;
};
return horizon;
};
var d3_horizonArea = d3.svg.area(),
d3_horizonId = 0;
function d3_horizonX(d) {
return d[0];
}
function d3_horizonY(d) {
return d[1];
}
function d3_horizonTransform(bands, h, mode) {
return mode == "offset"
? function(d) { return "translate(0," + (d + (d < 0) - bands) * h + ")"; }
: function(d) { return (d < 0 ? "scale(1,-1)" : "") + "translate(0," + (d - bands) * h + ")"; };
}
})();
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.axis text {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
</style>
<div id="horizon-chart"></div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="horizon.js?0.0.1"></script>
<script>
var metric = "Open";
var dateformat = d3.time.format("%e-%b-%y");
var data,
values,
mean,
lookup;
var width = 730,
height = 500,
chartheight = 20;
var chart = d3.horizon()
.width(width)
.height(height)
.bands(8)
.height(chartheight)
.mode("mirror")
.interpolate("step-after");
/* Utility functions to generate all days in a year */
// http://stackoverflow.com/questions/4413590/javascript-get-array-of-dates-between-2-dates
Date.prototype.addDays = function(days) {
var dat = new Date(this.valueOf())
dat.setDate(dat.getDate() + days);
return dat;
}
function getDates(startDate, stopDate) {
var dateArray = new Array();
var currentDate = startDate;
while (currentDate <= stopDate) {
dateArray.push( new Date (currentDate) )
currentDate = currentDate.addDays(1);
}
return dateArray;
}
/* End utility functions */
var dates = getDates(
dateformat.parse("1-Jan-12"),
dateformat.parse("31-Dec-12")
);
// used only for axes, unfortunately horizon plugin doesn't play with scales well
var xscale = d3.time.scale()
.domain(d3.extent(dates))
.range([0,width]);
var xAxis = d3.svg.axis()
.scale(xscale)
.orient("bottom");
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
d3.csv("TSLA.csv", function(error, raw) {
raw.forEach(function(d) {
d[metric] = parseFloat(d[metric]);
});
values = raw.map(function(d) { return d[metric]; });
// Offset so that positive is above-average and negative is below-average.
mean = values.reduce(function(p, v) { return p + v; }, 0) / values.length;
lookup = {};
raw.forEach(function(d, i) {
// makes sure lookup uses output of the formatter
var date = dateformat(dateformat.parse(d.Date));
lookup[date] = d;
});
data = dates.map(function(day, i) {
var value = dateformat(day) in lookup
? lookup[dateformat(day)][metric] - mean
: null;
return [day, value];
});
// Render the chart.
svg.data([data]).call(chart);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + chartheight + ")")
.call(xAxis);
});
</script>
Raw
TSLA.csv
Date Open High Low Close Volume Adj Close
31-Dec-12 33 33.97 33 33.87 594900 33.87
28-Dec-12 33.38 33.65 33.02 33.22 414100 33.22
27-Dec-12 33.5 33.91 33 33.69 561100 33.69
26-Dec-12 33.96 34.5 33.5 33.59 601400 33.59
24-Dec-12 33.64 34.35 33.55 34.28 375800 34.28
21-Dec-12 33.94 34.17 33.58 34 1492400 34
20-Dec-12 34.51 34.79 34.05 34.43 921200 34.43
19-Dec-12 34.75 35.26 34.52 34.61 1298800 34.61
18-Dec-12 34.26 35.07 34.26 34.59 1553900 34.59
17-Dec-12 33.77 34.5 33.75 34.4 824900 34.4
14-Dec-12 33.78 34.4 33.59 33.81 1023000 33.81
13-Dec-12 35.26 35.3 32.75 33.61 2151300 33.61
12-Dec-12 35.21 35.8 34.95 35.26 2063800 35.26
11-Dec-12 34.6 35.5 34.46 35.28 1572600 35.28
10-Dec-12 34.43 34.8 34.18 34.57 929800 34.57
7-Dec-12 34.3 34.49 33.85 34.17 664400 34.17
6-Dec-12 33.82 34.8 33.5 33.9 660400 33.9
5-Dec-12 33.82 34.19 33.58 33.71 661500 33.71
4-Dec-12 34.08 34.8 33.55 33.9 1263300 33.9
3-Dec-12 33.89 35 33.5 34.62 2085700 34.62
30-Nov-12 33.63 34.28 33.01 33.82 1420300 33.82
29-Nov-12 33.44 34 32.87 33.69 1103400 33.69
28-Nov-12 32 34.29 31.91 33.23 1525200 33.23
27-Nov-12 32.13 32.66 31.52 32.15 910800 32.15
26-Nov-12 32.1 32.3 31.62 32.27 495800 32.27
23-Nov-12 32.6 32.83 31.7 32.13 430300 32.13
21-Nov-12 32.61 33.47 32.29 32.47 963200 32.47
20-Nov-12 32.8 33.1 31.91 33 922500 33
19-Nov-12 32.07 33.25 31.84 32.92 1392400 32.92
16-Nov-12 31.15 32 30.59 31.84 908700 31.84
15-Nov-12 31.3 31.44 30.5 30.82 984000 30.82
14-Nov-12 31.96 32.12 31.2 31.38 871300 31.38
13-Nov-12 31.29 32 30.72 31.61 998300 31.61
12-Nov-12 30.29 31.42 30.16 31.07 555900 31.07
9-Nov-12 30.6 30.93 29.85 30.32 863000 30.32
8-Nov-12 31.01 31.88 30.94 31.31 1274000 31.31
7-Nov-12 31 32.05 30.81 31.54 1714500 31.54
6-Nov-12 30.61 31.2 29.95 31.15 2324000 31.15
5-Nov-12 29.8 31.58 29.33 31.5 2048900 31.5
2-Nov-12 29.27 29.55 28.55 28.92 1030300 28.92
1-Nov-12 28.25 29.49 28.2 29.25 1024100 29.25
31-Oct-12 27.7 28.35 27.37 28.13 775200 28.13
26-Oct-12 27.53 27.8 27.02 27.38 477400 27.38
25-Oct-12 27.8 27.8 27.45 27.52 577700 27.52
24-Oct-12 28.52 28.52 27.25 27.42 1016400 27.42
23-Oct-12 27.38 28.56 27.37 28.39 749000 28.39
22-Oct-12 27.99 28 27.36 27.85 470200 27.85
19-Oct-12 27.83 28.2 27.3 27.74 1027400 27.74
18-Oct-12 28.99 28.99 27.78 28.04 741000 28.04
17-Oct-12 28.25 28.84 27.8 28.82 668000 28.82
16-Oct-12 27.67 28.09 27.34 28.06 479300 28.06
15-Oct-12 28.02 28.05 26.86 27.33 1468700 27.33
12-Oct-12 28.32 28.73 27.5 27.64 987600 27.64
11-Oct-12 28.94 28.98 28.25 28.32 450600 28.32
10-Oct-12 28.39 28.72 28.01 28.4 503600 28.4
9-Oct-12 29.12 29.12 28.25 28.37 1193000 28.37
8-Oct-12 28.86 29.4 28.61 29.25 889700 29.25
5-Oct-12 29.7 29.81 28.68 28.89 938600 28.89
4-Oct-12 30 30.1 28.65 29.4 1541300 29.4
3-Oct-12 29.75 29.95 29.24 29.3 1052800 29.3
2-Oct-12 29.28 29.89 29 29.8 729000 29.8
1-Oct-12 29.5 29.89 29 29.16 884400 29.16
28-Sep-12 28.73 29.89 28.61 29.28 4343400 29.28
27-Sep-12 27.82 28.54 27.6 28.49 1758600 28.49
26-Sep-12 27.66 28.4 27.48 27.54 1527200 27.54
25-Sep-12 28.62 29.48 27.53 27.66 5680400 27.66
24-Sep-12 29.51 31.03 29.4 30.66 1301900 30.66
21-Sep-12 31.1 31.49 29.54 30.02 1870000 30.02
20-Sep-12 30.93 31.5 30.68 30.9 912400 30.9
19-Sep-12 31 31.74 30.94 31.05 1048500 31.05
18-Sep-12 31.88 31.9 30.68 31.34 1788500 31.34
17-Sep-12 32.35 32.78 31.51 32.54 3212800 32.54
14-Sep-12 30 30.65 29.65 30.39 1536600 30.39
13-Sep-12 28.57 29.5 28.48 29.48 1484700 29.48
12-Sep-12 27.9 28.58 27.8 28.28 1145200 28.28
11-Sep-12 27.76 28.16 27.4 27.8 1014900 27.8
10-Sep-12 29.2 29.35 27.3 27.37 1483300 27.37
7-Sep-12 28.55 29.57 28.5 29.35 953200 29.35
6-Sep-12 28 28.9 27.9 28.55 841700 28.55
5-Sep-12 28.01 28.5 27.81 27.94 639300 27.94
4-Sep-12 28.52 28.99 27.9 28.14 752500 28.14
31-Aug-12 28.61 28.84 28.2 28.52 539800 28.52
30-Aug-12 28.6 28.74 28.1 28.41 656400 28.41
29-Aug-12 28.49 28.64 28.02 28.41 838900 28.41
28-Aug-12 28.4 29.38 28 28.69 1402700 28.69
27-Aug-12 29.57 29.7 28.17 28.32 1350400 28.32
24-Aug-12 30.06 30.24 29.41 29.5 1429400 29.5
23-Aug-12 30 30.85 29.65 30.73 1471000 30.73
22-Aug-12 29.01 30.04 29.01 29.95 775500 29.95
21-Aug-12 29.58 30 29 29.11 761600 29.11
20-Aug-12 30.15 30.39 29.1 29.51 1179100 29.51
17-Aug-12 30.29 30.71 29.98 30.01 508200 30.01
16-Aug-12 29.53 30.39 29.5 30.3 669000 30.3
15-Aug-12 29.39 29.7 28.81 29.4 525400 29.4
14-Aug-12 30.75 31.17 29.26 29.42 793400 29.42
13-Aug-12 29.69 31.3 29.1 31.17 870100 31.17
10-Aug-12 29.31 29.94 29.31 29.94 707400 29.94
9-Aug-12 29.52 30 29.13 29.41 672600 29.41
8-Aug-12 29.9 30 28.59 29.09 1308900 29.09
7-Aug-12 28.77 30.9 28.5 30.25 2387200 30.25
6-Aug-12 27.55 28.7 27.55 28.27 1528200 28.27
3-Aug-12 26.9 27.55 26.74 27.27 1209500 27.27
2-Aug-12 26.84 26.85 25.52 26.1 1305100 26.1
1-Aug-12 27.99 27.99 26.03 26.25 1592300 26.25
31-Jul-12 27.54 27.97 27.35 27.42 1575100 27.42
30-Jul-12 29.51 30.25 27.21 27.35 2065200 27.35
27-Jul-12 28.71 29.66 28.1 29.51 1673000 29.51
26-Jul-12 29.9 30 27.64 28.13 2262300 28.13
25-Jul-12 29.92 29.98 28.75 28.95 2842200 28.95
24-Jul-12 30.66 31.04 29.62 29.84 1500300 29.84
23-Jul-12 31.05 31.3 30.62 30.66 1386800 30.66
20-Jul-12 32.07 32.25 31.25 31.79 1568500 31.79
19-Jul-12 32.72 33.15 32.04 32.27 1435900 32.27
18-Jul-12 31.42 33.67 31.06 32.15 2881900 32.15
17-Jul-12 35 35.21 32.38 33.35 2569300 33.35
16-Jul-12 34.32 36 33.9 35.96 1744000 35.96
13-Jul-12 32.97 34.4 32.83 34.25 1304800 34.25
12-Jul-12 31.29 33.01 30.8 32.7 1125700 32.7
11-Jul-12 31.57 31.68 31.01 31.51 638600 31.51
10-Jul-12 31.54 32.48 30.89 31.27 758400 31.27
9-Jul-12 30.94 31.83 30.67 31.49 910500 31.49
6-Jul-12 30.99 31.73 30.8 30.99 784500 30.99
5-Jul-12 30.81 31.67 30.8 31.23 1253800 31.23
3-Jul-12 30.6 31 30.4 30.66 947000 30.66
2-Jul-12 31.35 31.8 30.19 30.4 1315600 30.4
29-Jun-12 32.8 32.8 31 31.29 1125800 31.29
28-Jun-12 31.9 32.11 30.62 31.41 914100 31.41
27-Jun-12 31.9 32.45 31.57 31.96 1047200 31.96
26-Jun-12 32.05 32.35 31.39 31.61 2613900 31.61
25-Jun-12 33.94 34.12 32.75 33.11 1498500 33.11
22-Jun-12 32.6 33.98 32.46 33.79 3046600 33.79
21-Jun-12 34.26 34.28 31.84 32.19 1891900 32.19
20-Jun-12 33.5 34.5 33.21 33.78 3422400 33.78
19-Jun-12 32.02 32.66 31.5 32.09 911100 32.09
18-Jun-12 29.94 32.33 29.5 31.84 1256800 31.84
15-Jun-12 29.39 29.95 28.81 29.91 646800 29.91
14-Jun-12 30.18 30.65 28.62 29.39 872200 29.39
13-Jun-12 29.55 30.64 29.47 29.77 844100 29.77
12-Jun-12 29.23 29.84 28.81 29.66 569000 29.66
11-Jun-12 30.31 31 28.96 29.12 636000 29.12
8-Jun-12 28.86 30.19 28.15 30.08 881100 30.08
7-Jun-12 29.81 29.87 28.85 28.93 492100 28.93
6-Jun-12 28.2 29.45 28.14 29.22 909900 29.22
5-Jun-12 27.84 28.39 27.56 27.91 630900 27.91
4-Jun-12 28.03 28.41 27.11 27.88 1030900 27.88
1-Jun-12 28.53 29.16 27.76 28.15 885800 28.15
31-May-12 30.07 30.29 28.75 29.5 1118700 29.5
30-May-12 31.08 31.42 30.24 30.41 1307200 30.41
29-May-12 30.01 31.93 30.01 31.69 1650000 31.69
25-May-12 30.16 30.41 29.2 29.81 757000 29.81
24-May-12 31.25 31.25 29.69 30.28 1075600 30.28
23-May-12 30.56 31.05 29.5 31.02 1220400 31.02
22-May-12 30.1 31.34 30 30.8 2366200 30.8
21-May-12 27.58 29.26 27.12 28.77 1475200 28.77
18-May-12 28.37 28.46 26.83 27.56 1616500 27.56
17-May-12 29.3 29.79 28.24 28.57 1149000 28.57
16-May-12 29.58 30.18 28.88 29.18 1257100 29.18
15-May-12 30.26 30.96 29.22 29.43 1585700 29.43
14-May-12 31.92 32.13 30.05 30.06 1380900 30.06
11-May-12 32.49 33.44 32.16 32.25 1221300 32.25
10-May-12 32.97 34.68 32.4 32.96 5556300 32.96
9-May-12 30.3 30.77 29.76 30.06 1947900 30.06
8-May-12 32.5 32.73 29.37 30.19 3097200 30.19
7-May-12 31.96 32.58 31.61 32.47 1158000 32.47
4-May-12 32.32 32.46 31.4 31.83 1247500 31.83
3-May-12 33.91 34 32.13 32.46 841300 32.46
2-May-12 33.5 34.39 33.39 33.94 497300 33.94
1-May-12 33.13 34.21 33.13 33.78 659000 33.78
30-Apr-12 33.27 33.36 32.58 33.13 413900 33.13
27-Apr-12 33.6 33.63 32.91 33.34 591000 33.34
26-Apr-12 32.96 33.52 32.91 33.49 425300 33.49
25-Apr-12 32.07 32.99 32.07 32.91 712200 32.91
24-Apr-12 31.82 32.2 31 31.82 674500 31.82
23-Apr-12 32.86 32.97 31.71 31.94 890800 31.94
20-Apr-12 33.14 33.73 32.94 33.16 821800 33.16
19-Apr-12 32.75 33.43 32.5 33.16 774900 33.16
18-Apr-12 32.09 32.75 31.53 32.66 823100 32.66
17-Apr-12 32.43 33.07 32.04 32.24 1115500 32.24
16-Apr-12 33.41 33.7 32.09 32.25 1099600 32.25
13-Apr-12 33.94 34.04 32.85 33.59 649600 33.59
12-Apr-12 33.77 34.48 32.92 33.44 1033900 33.44
11-Apr-12 33.24 33.29 32.01 33.09 1105500 33.09
10-Apr-12 33.15 33.85 32.1 32.46 1847700 32.46
9-Apr-12 34.1 34.29 33.1 33.15 1655700 33.15
5-Apr-12 35.1 35.44 34.41 34.48 1509400 34.48
4-Apr-12 35.27 35.49 34.69 35 4481800 35
3-Apr-12 36.7 38.47 36.67 38.01 1098100 38.01
2-Apr-12 37.33 37.97 36.53 36.58 1028600 36.58
30-Mar-12 37.52 37.94 36.68 37.24 886400 37.24
29-Mar-12 38.19 38.19 37.03 37.33 796400 37.33
28-Mar-12 37.78 38.44 37.11 37.85 955000 37.85
27-Mar-12 37.16 39.95 37.03 37.94 2539200 37.94
26-Mar-12 35.59 38.09 35.04 37.4 3140500 37.4
23-Mar-12 34.26 34.63 33.15 34.08 1170600 34.08
22-Mar-12 34.97 35.15 34.3 34.4 522400 34.4
21-Mar-12 34.94 35.3 34.6 35.15 607200 35.15
20-Mar-12 34.98 35.2 34.57 34.96 567000 34.96
19-Mar-12 35.26 35.32 34.54 34.98 1015600 34.98
16-Mar-12 34.9 35.89 34.83 35.32 729300 35.32
15-Mar-12 35.28 35.48 34.78 35 571600 35
14-Mar-12 36 36 34.8 35.29 851500 35.29
13-Mar-12 36.51 36.59 35.5 36.09 1001600 36.09
12-Mar-12 34.69 36.29 34.6 36.01 1963300 36.01
9-Mar-12 33.2 35.31 33.2 34.74 1553400 34.74
8-Mar-12 33.11 33.49 33.04 33.07 633300 33.07
7-Mar-12 33.12 33.31 32.91 33.12 364900 33.12
6-Mar-12 33.25 33.28 32.62 33.11 573800 33.11
5-Mar-12 34.35 34.4 33.46 33.77 467000 33.77
2-Mar-12 34.4 34.5 33.71 34.04 550000 34.04
1-Mar-12 33.51 34.5 33.31 34.41 703500 34.41
29-Feb-12 33.81 34.12 33.14 33.41 535700 33.41
28-Feb-12 33.64 34.44 33.17 33.81 612200 33.81
27-Feb-12 33.41 34 33 33.62 606000 33.62
24-Feb-12 34.23 34.52 33.27 33.75 959900 33.75
23-Feb-12 33.99 34.97 33.56 34.53 820400 34.53
22-Feb-12 34.5 34.72 32.5 34.22 1654600 34.22
21-Feb-12 34.87 34.87 33.81 34.5 1135800 34.5
17-Feb-12 33.99 34.97 33.5 34.97 1376700 34.97
16-Feb-12 33.5 34.51 32.54 34.18 2219700 34.18
15-Feb-12 33.1 34.41 32.27 33.6 2761800 33.6
14-Feb-12 31.74 33.79 31.4 33.17 1810800 33.17
13-Feb-12 31.55 32.06 30.9 31.49 1157900 31.49
10-Feb-12 32.26 32.27 29.84 31.1 1874200 31.1
9-Feb-12 32 32.9 31.43 32.58 1277100 32.58
8-Feb-12 31.6 32.01 31.29 31.93 623700 31.93
7-Feb-12 31.8 31.8 30.82 31.6 1021600 31.6
6-Feb-12 31.1 31.9 31.05 31.8 652100 31.8
3-Feb-12 30.41 31.33 30.25 31.15 764500 31.15
2-Feb-12 29.72 30.88 29.61 30.25 805700 30.25
1-Feb-12 29.07 29.7 29 29.58 523200 29.58
31-Jan-12 29.9 30 28.87 29.07 956400 29.07
30-Jan-12 29.49 29.61 28.53 29.57 729000 29.57
27-Jan-12 28.5 29.72 28.5 29.33 748400 29.33
26-Jan-12 28.07 29.58 28 28.94 1271100 28.94
25-Jan-12 27.27 28.01 27.05 27.97 611200 27.97
24-Jan-12 26.63 27.68 26.44 27.42 858000 27.42
23-Jan-12 26.81 27.21 26.6 26.77 594600 26.77
20-Jan-12 26.9 27 26.4 26.6 662300 26.6
19-Jan-12 27.19 27.74 26.61 26.76 1246300 26.76
18-Jan-12 26.69 26.88 26.25 26.81 1260200 26.81
17-Jan-12 26.62 27.34 26.41 26.6 4651600 26.6
13-Jan-12 28.4 28.5 22.64 22.79 5500400 22.79
12-Jan-12 28.48 28.62 27.81 28.25 729300 28.25
11-Jan-12 27.62 28.38 27.3 28.23 672300 28.23
10-Jan-12 27.44 27.76 27.25 27.62 671800 27.62
9-Jan-12 27 27.49 26.12 27.25 897000 27.25
6-Jan-12 27.2 27.79 26.41 26.91 986300 26.91
5-Jan-12 27.76 27.93 26.85 27.12 1005500 27.12
4-Jan-12 28.21 28.67 27.5 27.71 630100 27.71
3-Jan-12 28.94 29.5 27.65 28.08 928100 28.08
2-Jan-12 28.49 28.98 28.25 28.56 339800 28.56
1-Jan-12 28.59 29.34 28.55 28.73 488200 28.73
@gauravjain811
Copy link

gauravjain811 commented Nov 14, 2017 •
edited

I want to control color same as fiddle at jsfiddle.net/pjrc0yy3/1. but modifying above code is giving different behaviour in bind function inside d3 V3.
data=[0.2,1.3,1.1,1.3.0.9]

    var color =
        d3.scale.threshold()
            .domain([0,1])
              .range(["green", "yellow", "red"]);

Need to restrict color based on data selection. 0<d<1 -> yellow, d>=1-> red, d<0-> green. Any help will be highly appreciated.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment