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

86
client/d3/bar/base.js vendored Normal file
View File

@@ -0,0 +1,86 @@
import extend from 'extend';
// This class is inspired by // http://bl.ocks.org/mbostock/3885304.
const DEFAULTS = {
outer_width: 500,
outer_height: 300,
margin: {top: 0, left: 70, bottom: 50, right: 20},
horizontal: true,
range_ticks: 10,
container: "container",
range_label: "range",
titleize: function(series, datum){
var s = datum ? datum.name : series.name,
words = s.split(' ');
var 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, datum){
return datum ? datum.name.toLowerCase(): series.name.toLowerCase();
},
series_opacity_gradient: true
}
class BarChart {
constructor(options){
var bar_chart = this;
bar_chart = extend(bar_chart, DEFAULTS, options);
bar_chart.height = bar_chart.outer_height - bar_chart.margin.top - bar_chart.margin.bottom;
bar_chart.width = bar_chart.outer_width - bar_chart.margin.left - bar_chart.margin.right;
bar_chart.init();
}
init(){
var bar_chart = this;
bar_chart.svg = d3.select(bar_chart.container).append("svg")
.attr("width", bar_chart.outer_width)
.attr("height", bar_chart.outer_height)
.append("g")
.attr("transform", "translate(" + bar_chart.margin.left + "," + bar_chart.margin.top + ")");
bar_chart.defineAxes();
}
serializeData(data){
var bar_chart = this,
serialized_data = {
max: undefined,
series: []
};
data.forEach(function(data_set){
var series = extend({
css_class: bar_chart.toClass ? bar_chart.toClass(data_set) : "",
title: bar_chart.titleize ? bar_chart.titleize(data_set) : ""
}, data_set);
series.total = 0;
series.values = [];
data_set.values.forEach(function(datum, j){
var series_datum = extend({
name: datum.name,
value: datum.value,
cummulative: series.total,
css_class: bar_chart.toClass ? bar_chart.toClass(data_set, datum) : "",
title: bar_chart.titleize ? bar_chart.titleize(data_set, datum) : "",
opacity: 1.0 - 0.5 * (j / data_set.values.length)
}, datum);
series_datum.series = series;
series.total += datum.value;
series.values.push(series_datum);
});
serialized_data.series.push(series);
serialized_data.max = serialized_data.max === undefined ?
series.total :
Math.max(serialized_data.max, Math.abs(series.total));
});
return serialized_data;
};
}

76
client/d3/bar/horizontal.js vendored Normal file
View File

@@ -0,0 +1,76 @@
import BarChart from './bar.base';
class HorizontalBarChart extends BarChart {
defineAxes(){
var bar_chart = this;
bar_chart.y_scale = d3.scale.ordinal()
.rangeRoundBands([bar_chart.height, 0], 0.1);
bar_chart.y_axis = d3.svg.axis()
.scale(bar_chart.y_scale)
.orient("left");
bar_chart.x_scale = d3.scale.linear()
.range([0, bar_chart.width]);
bar_chart.x_axis = d3.svg.axis()
.scale(bar_chart.x_scale)
.orient("bottom")
.ticks(bar_chart.range_ticks)
.outerTickSize(0);
// append axes
bar_chart.svg.append("g")
.attr("class", "d3-chart-domain d3-chart-axis");
bar_chart.svg.append("g")
.attr("class", "d3-chart-range d3-chart-axis")
.attr("transform", "translate(0, " + (bar_chart.height - bar_chart.margin.top) + ")");
}
drawData(data){
var bar_chart = this;
data = bar_chart.serializeData(data);
// calibrate axes
bar_chart.y_scale.domain(data.series.reverse().map(function(d) { return d.name; }));
bar_chart.svg.select(".d3-chart-domain.d3-chart-axis")
.call(bar_chart.y_axis)
.selectAll("text")
.attr("transform", function(){
var elem = this,
bbox = elem.getBBox(),
middleX = bbox.x + (bbox.width / 2),
middleY = bbox.y + (bbox.height / 2);
return "rotate(-30,"+middleX + "," + middleY+")"
});
bar_chart.x_scale.domain([0, data.max]);
bar_chart.svg.select(".d3-chart-range.d3-chart-axis").call(bar_chart.x_axis);
data.series.forEach(function(series){
var bars = bar_chart.svg.selectAll("d3-chart-rect.d3-chart-bar." + series.css_class)
.data(series.values);
bar_chart.applyData(series, bars.enter().append("rect"));
bar_chart.applyData(series, bars.transition());
bars.exit().remove();
});
}
// helper method for drawData.
applyData(series, elements){
var bar_chart = this,
series_class = "d3-chart-bar " + series.css_class;
elements
.attr("class", function(d){ return series_class + " " + d.css_class; })
.attr("title", function(d){ return d.title; })
.attr("y", function(d) { return bar_chart.y_scale(series.name); })
.attr("height", bar_chart.y_scale.rangeBand())
.attr("x", function(d) { return bar_chart.x_scale(d.cummulative); })
.attr("width", function(d) { return bar_chart.x_scale(d.value); })
.attr("opacity", function(d) { return d.opacity; })
}
}
export default HorizontalBarChart;

76
client/d3/bar/vertical.js vendored Normal file
View File

@@ -0,0 +1,76 @@
import BarChart from './bar.base';
class VerticalBarChart extends BarChart {
defineAxes(){
var bar_chart = this;
bar_chart.y_scale = d3.scale.ordinal()
.rangeRoundBands([bar_chart.height, 0], 0.1);
bar_chart.y_axis = d3.svg.axis()
.scale(bar_chart.y_scale)
.ticks(bar_chart.range_ticks)
.orient("left")
.outerTickSize(0);
bar_chart.x_scale = d3.scale.linear()
.range([0, bar_chart.width]);
bar_chart.x_axis = d3.svg.axis()
.scale(bar_chart.x_scale)
.orient("bottom");
// append axes
bar_chart.svg.append("g")
.attr("class", "d3-chart-range d3-chart-axis");
bar_chart.svg.append("g")
.attr("class", "d3-chart-domain d3-chart-axis")
.attr("transform", "translate(0, " + (bar_chart.height - bar_chart.margin.top) + ")");
}
drawData(data){
var bar_chart = this;
data = bar_chart.serializeData(data);
// calibrate axes
bar_chart.x_scale.domain(data.series.reverse().map((d)=>{ return d.name; }));
bar_chart.svg.select(".d3-chart-domain.d3-chart-axis")
.call(bar_chart.x_axis)
.selectAll("text")
.attr("transform", function(){
var elem = this,
bbox = elem.getBBox(),
middleX = bbox.x + (bbox.width / 2),
middleY = bbox.y + (bbox.height / 2);
return "rotate(-30,"+middleX + "," + middleY+")";
});
bar_chart.y_scale.domain([data.min, data.max]);
bar_chart.svg.select(".d3-chart-range.d3-chart-axis").call(bar_chart.y_axis);
data.series.forEach(function(series){
var bars = bar_chart.svg.selectAll(".d3-chart-rect.d3-chart-bar." + series.css_class)
.data(series.values);
bar_chart.applyData(series, bars.enter().append("rect"));
bar_chart.applyData(series, bars.transition());
bars.exit().remove();
});
}
// helper method for drawData
applyData(series, elements){
var bar_chart = this,
series_class = "d3-chart-bar " + series.css_class;
elements
.attr("class", function(d){ return series_class + " " + d.css_class; })
.attr("title", function(d){ return d.title; })
.attr("width", function(d) { return bar_chart.x_scale.rangeBand(); })
.attr("x", function(d) { return bar_chart.x_scale(series.name); })
.attr("height", return bar_chart.y_scale(d.value))
.attr("y", function(d) { return bar_chart.y_scale(d.cummulative); })
.attr("opacity", function(d) { return d.opacity; });
}
}
export default VerticalBarChart;