create spline stack

client/d3/bar.d3.js

@@ -1 +0,0 @@
-bar.d3.js

client/d3/bar/base.js

@@ -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;
+  };
+
+}

client/d3/bar/horizontal.js

@@ -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;

client/d3/bar/vertical.js

@@ -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;

client/d3/line/line.js

@@ -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;

client/d3/line/spline.js

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

client/d3/line/spline_stack.js

@@ -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); });
+  }
+}