senaduka/old-spike
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

create spline stack

Browse Source
This commit is contained in:
Eric Hulburd
2016-02-11 19:52:12 -06:00
parent 347507b148
commit 715feda051
7 changed files with 482 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

153
client/d3/line/line.js vendored Normal file
View File

@@ -0,0 +1,153 @@
import extend from 'extend';
const DEFAULTS = {
outer_width: 500,
outer_height: 300,
margin: {top: 0, left: 70, bottom: 50, right: 20},
domain_ticks: 10,
range_ticks: 8,
container: "container",
time_series: true,
range_label: "range",
domain_attr: null,
range_attr:
titleize: function(series, datum){
var s = datum ? datum.name : series.name,
words = s.split(' '),
array = [];
for (var i=0; i<words.length; ++i) {
array.push(words[i].charAt(0).toUpperCase() + words[i].toLowerCase().slice(1));
}
return array.join(' ');
},
toClass: function(series){
return series ? series.title.toLowerCase().replace(/\s+/g, '-') : "";
}
}
// inspired by https://gist.github.com/mbostock/4b66c0d9be9a0d56484e
class LineChart {
constructor(options){
var line_chart = this;
line_chart = extend(line_chart, DEFAULTS, options);
line_chart.height = line_chart.outer_height - line_chart.margin.top - line_chart.margin.bottom;
line_chart.width = line_chart.outer_width - line_chart.margin.left - line_chart.margin.right;
line_chart.init();
}
init(){
var line_chart = this;
line_chart.svg = d3.select(line_chart.container).append("svg")
.attr("width", line_chart.outer_width)
.attr("height", line_chart.outer_height)
.append("g")
.attr("transform", "translate(" + line_chart.margin.left + "," + line_chart.margin.top + ")");
// function that draws the lines.
line_chart.line = d3.svg.line()
.interpolate("basis")
.x(function(d){ return x(d[line_chart.domain_attr]); })
.y(function(d){ return y(d[line_chart.range_attr]); });
// function that returns unique color based on series_title.
line_chart.color = d3.scale.category20();
line_chart.defineAxes();
}
defineAxes(){
var line_chart = this;
line_chart.y_scale = d3.scale.linear()
.range([line_chart.height, 0]);
line_chart.y_axis = d3.svg.axis()
.scale(line_chart.y_scale)
.orient("left");
if (line_chart.time_series){
line_chart.x_scale = d3.time.scale(),
.range([0, line_chart.width]););
} else {
line_chart.x_scale = d3.scale.linear()
.range([0, line_chart.width]);
}
line_chart.x_axis = d3.svg.axis()
.scale(line_chart.x_scale)
.orient("bottom");
// append axes
line_chart.svg.append("g")
.attr("class", "d3-chart-range d3-chart-axis")
.attr("transform", "translate(0, " + (line_chart.height - line_chart.margin.top) + ")");
line_chart.svg.append("g")
.attr("class", "d3-chart-domain d3-chart-axis");
}
serializeData(data){
var line_chart = this,
serialized_data = {
series: [],
range_min: -Infinity,
range_max: Infinity,
domain_min: -Infinity,
domain_max: Infinity,
};
data.forEach(function(data_set){
var series = extend({
css_class: line_chart.toClass ? line_chart.toClass(data_set) : "",
title: line_chart.titleize ? line_chart.titleize(data_set) : "",
color: ''
}, data_set);
series.values.forEach((value)=>{
series_data.range_min = Math.min(series_data.range_min, value[line_chart.range_attr]);
series_data.range_max = Math.max(series_data.range_max, value[line_chart.range_attr]);
series_data.domain_min = Math.min(series_data.domain_min, value[line_chart.domain_attr]);
series_data.domain_max = Math.max(series_data.domain_max, value[line_chart.domain_attr]);
});
serialized_data.series.push(series);
});
return serialized_data;
};
drawData(data){
var line_chart = this;
data = line_chart.serialize_data;
// calibrate axes
bar_chart.y_scale.domain([Math.min(0, data.range_min), data.range_max]);
bar_chart.svg.select(".d3-chart-range.d3-chart-axis")
.call(bar_chart.y_axis);
bar_chart.x_scale.domain([Math.min(data.domain_min), data.domain_max]);
bar_chart.svg.select(".d3-chart-domain.d3-chart-axis").call(bar_chart.x_axis);
// draw lines
var line = g.selectAll(".d3-chart-series")
.data(data.series);
[line.enter().append('g'), line.transition()].forEach((groups)=>{
line_chart.applyData(groups);
});
line.exit().remove();
}
applyData(groups){
var line_chart = this;
groups
.attr('class', function(series){ return "d3-chart-line " + series.css_class; )
.attr("title", function(series){ return series.title; })
.append("path")
.attr("d", function(series){ return line_chart.line(series.values); })
.style("stroke", function(series){ return line_chart.color(series.title); });
}
}
export default LineChart;

6
client/d3/line/spline.js vendored Normal file
View File

@@ -0,0 +1,6 @@
import LineChart from './line';
class SplineChart extends LineChart {
}

85
client/d3/line/spline_stack.js vendored Normal file
View File

@@ -0,0 +1,85 @@
import LineChart from './line';
const INTERPOLATION = 'cardinal';
// inspired by https://bl.ocks.org/mbostock/3885211
class SplineStackChart extends LineChart {
init(){
var spline_stack = this;
spline_stack.svg = d3.select(spline_stack.container).append("svg")
.attr("width", spline_stack.outer_width)
.attr("height", spline_stack.outer_height)
.append("g")
.attr("transform", "translate(" + spline_stack.margin.left + "," + spline_stack.margin.top + ")");
spline_stack.area = d3.svg.area.interpolate(INTERPOLATION)
.x(function(d, i) { return spline_stack.x_scale(d.x); })
.y0(function(d) { return spline_stack.y_scale(d.y0); })
.y1(function(d) { return spline_stack.y_scale(d.y0 + d.y); });
spline_stack.stack = d3.layout.stack()
.values(function(d) { return d.values; });
// function that returns unique color based on series_title.
spline_stack.color = d3.scale.category20();
spline_stack.defineAxes();
}
serializeData(data){
var spline_stack = this,
serialized_data = {
range_min: -Infinity,
range_max: Infinity,
domain_min: -Infinity,
domain_max: Infinity
};
data.series.forEach(function(series, i){
series.css_class = series.css_class || spline_stack.toClass ? spline_stack.toClass(series) : "";
series.title = series.title || spline_stack.toClass ? spline_stack.titleize(series) : "";
series.xy_values = series.values.map((value)=>{
series_data.range_min = Math.min(series_data.range_min, value[line_chart.range_attr]);
series_data.range_max = Math.max(series_data.range_max, value[line_chart.range_attr]);
series_data.domain_min = Math.min(series_data.domain_min, value[line_chart.domain_attr]);
series_data.domain_max = Math.max(series_data.domain_max, value[line_chart.domain_attr]);
return {x: value[spline_stack.domain_attr], y: value[spline_stack.range_attr]};
});
serialized_data.series.push(series);
});
return serialized_data;
};
drawData(data){
var spline_stack = this;
data = spline_stack.serialize_data;
// calibrate axes.
bar_chart.y_scale.domain([Math.min(0, data.range_min), data.range_max]);
bar_chart.svg.select(".d3-chart-range.d3-chart-axis")
.call(bar_chart.y_axis);
bar_chart.x_scale.domain([Math.min(data.domain_min), data.domain_max]);
bar_chart.svg.select(".d3-chart-domain.d3-chart-axis").call(bar_chart.x_axis);
var stack_data = spline_stack.stack(data.series),
stack = svg.selectAll(".d3-chart-spline-stack")
.data(stack_data);
[stack.enter().append("g"), stack.transition()].forEach((groups)=>{
applyData(groups);
});
stack.exit().remove();
}
applyData(groups){
var spline_stack = this;
groups
.attr("class", function(series){"d3-chart-spline-stack " + series.css_class;})
.append("path")
.attr("d", function(series){ return spline_stack.area(series.xy_values); })
.style("fill", function(series){ return spline_stack.color(series.name); });
}
}