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

remove cached files

Browse Source
This commit is contained in:
Eric Hulburd
2016-02-22 14:31:59 -06:00
parent b43f8de558
commit 0ddae601bd
69 changed files with 0 additions and 3711 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
client/d3/line/line.js vendored
View File

@@ -1,122 +0,0 @@
import extend from 'extend';
import Chart from './../base';
// inspired by https://gist.github.com/mbostock/4b66c0d9be9a0d56484e
class LineChart extends Chart {
get chart_options(){
return {
interpolation: 'basis'
};
}
defineAxes(){
var chart = this;
chart.y_scale = d3.scale.linear()
.range([chart.height, 0]);
chart.y_axis = d3.svg.axis()
.scale(chart.y_scale)
.orient("left")
.outerTickSize(1);
if (chart.time_series){
chart.x_scale = d3.time.scale()
.range([0, chart.width]);
} else {
chart.x_scale = d3.scale.linear()
.range([0, chart.width]);
}
chart.x_axis = d3.svg.axis()
.scale(chart.x_scale)
.orient("bottom")
.outerTickSize(0)
//chart.x_axis.tickFormat(d3.time.format('%b %d at %H'))
//chart.x_axis.ticks(d3.time.hour, 12);
// append axes
chart.svg.append("g")
.attr("class", "d3-chart-range d3-chart-axis");
chart.svg.append("g")
.attr("class", "d3-chart-domain d3-chart-axis")
.attr("transform", "translate(0, " + (chart.height) + ")");
}
afterAxes(){
var line_chart = this;
// function that draws the lines.
line_chart.line = d3.svg.line()
.interpolate(line_chart.chart_options.interpolation)
.x(function(d){ return line_chart.x_scale(d[line_chart.domain_attr]); })
.y(function(d){ return line_chart.y_scale(d[line_chart.range_attr]); });
// function that returns unique color based on series_title.
line_chart.color = d3.scale.category20();
}
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([data.domain_max, Math.min(data.domain_min)]);
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;

13
client/d3/line/spline.js vendored
View File

@@ -1,13 +0,0 @@
import LineChart from './line';
const INTEPOLATION = 'cardinal';
class SplineChart extends LineChart {
get chart_options(){
return {
interpolation: INTEPOLATION
}
}
}

108
client/d3/line/spline_stack.js vendored
View File

@@ -1,108 +0,0 @@
import LineChart from './line';
const INTERPOLATION = 'cardinal';
// inspired by https://bl.ocks.org/mbostock/3885211
class SplineStackChart extends LineChart {
get chart_options(){
return Object.assign(Object.assign({}, LineChart.DEFAULTS), {
interpolation: INTERPOLATION
});
}
afterAxes(){
var spline_stack = this;
spline_stack.fnArea = d3.svg.area()
.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); })
.interpolate(spline_stack.interpolation);
spline_stack.fnStack = d3.layout.stack()
.values(function(d) { return d.values; });
// function that returns unique color based on series_title.
spline_stack.fnColor = d3.scale.category20();
}
serializeData(data){
var spline_stack = this,
serialized_data = {
series: [] };
data.series.forEach(function(series, i){
series.css_class = series.css_class || spline_stack.toClass ? spline_stack.toClass(series) : "series-" + i;
if (spline_stack.domain_attr !== 'x' && spline_stack.range_attr !== 'y'){
series.values = series.values.map((value)=>{
return {x: value[spline_stack.domain_attr], y: value[spline_stack.range_attr], series: series};
});
}
serialized_data.series.push(series);
});
serialized_data.series = spline_stack.fnStack(serialized_data.series);
// assume all series have same domain, use first series to establish extent.
serialized_data.domain_extent = d3.extent(serialized_data.series[0].values.map((value)=>{ return value.x; }));
// final series will have the highest y values.
serialized_data.range_max = d3.max(serialized_data.series[serialized_data.series.length - 1].values.map((value)=>{ return value.y0 + value.y; }))
return serialized_data;
};
drawData(data){
var spline_stack = this;
data = spline_stack.serializeData(data);
// calibrate axes.
spline_stack.y_scale.domain([0, data.range_max]);
spline_stack.svg.select(".d3-chart-range.d3-chart-axis")
.call(spline_stack.y_axis);
spline_stack.x_scale.domain(data.domain_extent);
spline_stack.svg.select(".d3-chart-domain.d3-chart-axis").call(spline_stack.x_axis);
var stack = spline_stack.svg.selectAll(".d3-chart-spline-stack")
.data(data.series);
[stack.enter().append("path"), stack].forEach((paths)=>{
spline_stack.applyData(paths);
});
stack.exit().remove();
if (spline_stack.include_dots){
data.series.forEach((series)=>{
var dots = spline_stack.svg.selectAll(".d3-chart-spline-dot." + series.css_class)
.data(series.values);
[dots.enter().append("circle"), dots].forEach((circles)=>{
spline_stack.applyDots(series, circles);
});
dots.exit().remove();
});
}
}
applyData(paths){
var spline_stack = this;
paths
.attr("class", function(series){ return "d3-chart-spline-stack " + series.css_class;})
.attr("d", function(series){ return spline_stack.fnArea(series.values); })
.style("fill", function(series){ return spline_stack.fnColor(series.title); })
.attr('opacity', 1);
}
applyDots(series, circles){
var spline_stack = this;
circles
.attr('class', 'd3-chart-spline-dot ' + series.css_class)
.attr("r", 2)
.attr("cx", function(d, i){ return spline_stack.x_scale(d.x); })
.attr("cy", function(d, i){ return spline_stack.y_scale(d.y + d.y0); })
.attr("title", function(d, i){ return spline_stack.titleizeDatum(series, d); })
.style("fill", spline_stack.fnColor(series.title))
.attr('opacity', 1)
.attr('stroke-width', 0)
.attr('stroke', '#fff');
}
}
export default SplineStackChart;