Added Small Multiples and improved dates parsing

rawgraphs · Jun 4, 2014 · 82b1c0c · 82b1c0c
1 parent 5c9698f
commit 82b1c0c
Show file tree

Hide file tree

Showing 12 changed files with 241 additions and 32 deletions.
diff --git a/bower.json b/bower.json
@@ -35,6 +35,7 @@
  "codemirror": "4.0.1",
  "zeroclipboard": "1.3.2",
  "canvas-toBlob.js": "https://github.com/eligrey/canvas-toBlob.js.git",
- "jqueryui-touch-punch": "*"
+ "jqueryui-touch-punch": "*",
+ "momentjs": "~2.6.0"
  }
 }
diff --git a/charts/hexagonalBinning.js b/charts/hexagonalBinning.js
@@ -38,6 +38,10 @@
  .defaultValue(true)
 
  chart.draw(function (selection, data){
+
+ // Retrieving dimensions from model
+ var x = points.dimensions().get('x'),
+ y = points.dimensions().get('y');
 
  var g = selection
  .attr("width", +width() )
@@ -52,8 +56,12 @@
  var xExtent = !useZero()? d3.extent(data, function (d){ return d.x; }) : [0, d3.max(data, function (d){ return d.x; })],
  yExtent = !useZero()? d3.extent(data, function (d){ return d.y; }) : [0, d3.max(data, function (d){ return d.y; })];
 
- var xScale = d3.scale.linear().range([marginLeft,width()]).domain(xExtent),
- yScale = d3.scale.linear().range([h, 0]).domain(yExtent),
+ var xScale = x.type() == "Date"
+ ? d3.time.scale().range([marginLeft,width()]).domain(xExtent)
+ : d3.scale.linear().range([marginLeft,width()]).domain(xExtent),
+ yScale = y.type() == "Date"
+ ? d3.time.scale().range([h, 0]).domain(yExtent)
+ : d3.scale.linear().range([h, 0]).domain(yExtent),
  xAxis = d3.svg.axis().scale(xScale).tickSize(-h).orient("bottom"),
  yAxis = d3.svg.axis().scale(yScale).ticks(10).tickSize(-w).orient("left");
 

diff --git a/charts/scatterPlot.js b/charts/scatterPlot.js
@@ -34,6 +34,10 @@
  .defaultValue(true)
 
  chart.draw(function (selection, data){
+
+ // Retrieving dimensions from model
+ var x = points.dimensions().get('x'),
+ y = points.dimensions().get('y');
 
  var g = selection
  .attr("width", +width() )
@@ -48,10 +52,14 @@
  var xExtent = !useZero()? d3.extent(data, function (d){ return d.x; }) : [0, d3.max(data, function (d){ return d.x; })],
  yExtent = !useZero()? d3.extent(data, function (d){ return d.y; }) : [0, d3.max(data, function (d){ return d.y; })];
 
- var xScale = d3.scale.linear().range([marginLeft,width()-maxRadius()]).domain(xExtent),
- yScale = d3.scale.linear().range([h-maxRadius(), maxRadius()]).domain(yExtent),
- sizeScale = d3.scale.linear().range([1, Math.pow(+maxRadius(),2)*Math.PI]).domain([0, d3.max(data, function (d){ return d.size; })]),
- xAxis = d3.svg.axis().scale(xScale).tickSize(-h+maxRadius()*2).orient("bottom")//.tickSubdivide(true),
+ var xScale = x.type() == "Date"
+ ? d3.time.scale().range([marginLeft,width()-maxRadius()]).domain(xExtent)
+ : d3.scale.linear().range([marginLeft,width()-maxRadius()]).domain(xExtent),
+ yScale = y.type() == "Date"
+ ? d3.time.scale().range([h-maxRadius(), maxRadius()]).domain(yExtent)
+ : d3.scale.linear().range([h-maxRadius(), maxRadius()]).domain(yExtent),
+ sizeScale = d3.scale.linear().range([1, Math.pow(+maxRadius(),2)*Math.PI]).domain([0, d3.max(data, function (d){ return d.size; })]),
+ xAxis = d3.svg.axis().scale(xScale).tickSize(-h+maxRadius()*2).orient("bottom")//.tickSubdivide(true),
  yAxis = d3.svg.axis().scale(yScale).ticks(10).tickSize(-w+maxRadius()).orient("left");
 
 

diff --git a/charts/smallMultiplesArea.js b/charts/smallMultiplesArea.js
@@ -0,0 +1,142 @@
+(function(){
+
+ var stream = raw.model();
+
+ var group = stream.dimension()
+ .title('Group')
+
+ var date = stream.dimension()
+ .title('Date')
+ .types(Date)
+ .accessor(function (d){ return this.type() == "Date" ? moment(d).toDate() : +d; })
+
+ var size = stream.dimension()
+ .title('Size')
+ .types(Number)
+
+ stream.map(function (data){
+ if (!group()) return [];
+
+ var dates = d3.set(data.map(function (d){ return +date(d); })).values();
+
+ var groups = d3.nest()
+ .key(group)
+ .rollup(function (g){
+
+ var singles = d3.nest()
+ .key(function(d){ return +date(d); })
+ .rollup(function (d){
+ return {
+ group : group(d[0]),
+ date : date(d[0]),
+ size : size() ? d3.sum(d,size) : d.length 
+ }
+ })
+ .map(g);
+
+ return d3.values(singles);
+ })
+ .map(data)
+
+ return d3.values(groups).map(function(d){ return d.sort(function(a,b){ return a.date - b.date; }) });
+
+ })
+
+ var chart = raw.chart()
+ .title('Small Multiples (Area)')
+ .thumbnail("imgs/smallMultiples.png")
+ .description("Based on <a href='http://bl.ocks.org/mbostock/9490313'>http://bl.ocks.org/mbostock/9490313</a>")
+ .model(stream)
+
+ var width = chart.number()
+ .title("Width")
+ .defaultValue(1000)
+ .fitToWidth(true)
+
+ var height = chart.number()
+ .title("Height")
+ .defaultValue(500)
+
+ var padding = chart.number()
+ .title("Padding")
+ .defaultValue(10)
+
+ var scale = chart.checkbox()
+ .title("Same scale")
+ .defaultValue(false)
+
+ var colors = chart.color()
+ .title("Color scale")
+
+ chart.draw(function (selection, data){
+
+ var w = +width(),
+ h = (+height() - (+padding()*(data.length-1))) / (data.length);
+
+ var svg = selection
+ .attr("width", +width())
+ .attr("height", +height())
+
+ var x = d3.time.scale()
+ .range([0, w]);
+
+ var y = d3.scale.linear()
+ .range([h, 0]);
+
+ var area = d3.svg.area()
+ .x(function(d) { return x(d.date); })
+ .y0(h)
+ .y1(function(d) { return y(d.size); });
+
+ var line = d3.svg.line()
+ .x(function(d) { return x(d.date); })
+ .y(function(d) { return y(d.size); });
+
+ x.domain([
+ d3.min(data, function(layer) { return d3.min(layer, function(d) { return d.date; }); }),
+ d3.max(data, function(layer) { return d3.max(layer, function(d) { return d.date; }); })
+ ])
+
+ colors.domain(data, function (d){ return d[0].group; })
+
+ svg.selectAll("g")
+ .data(data)
+ .enter().append("g")
+ .attr("title", function(d) { return d[0].group; })
+ .attr("transform", function(d,i) { return "translate(0," + ((h+padding())*i) + ")"})
+ .each(multiple);
+
+ svg.selectAll("g")
+ .append("text")
+ .attr("x", w - 6)
+ .attr("y", h - 6)
+ .style("font-size","10px")
+ .style("fill", function(d){ return raw.foreground(colors()(d[0].group)) })
+ .style("font-family","Arial, Helvetica")
+ .style("text-anchor", "end")
+ .text(function(d) { return d[0].group; });
+
+ function multiple(single) {
+
+ var g = d3.select(this);
+
+ if (scale()) y.domain([0, d3.max(data, function(layer) { return d3.max(layer, function(d) { return d.size; }); })])
+ else y.domain([0, d3.max(single, function(d) { return d.size; })]);
+
+ g.append("path")
+ .attr("class", "area")
+ .style("fill", function(d){ return colors()(d[0].group); })
+ .attr("d", area(single));
+
+ /*g.append("path")
+ .attr("class", "line")
+ .style("fill","none")
+ .style("stroke","#666")
+ .style("stroke-width","1.5px")
+ .attr("d", line(single));*/
+
+ }
+
+ })
+
+})();
diff --git a/charts/streamgraph.js b/charts/streamgraph.js
@@ -8,6 +8,7 @@
  var date = stream.dimension()
  .title('Date')
  .types(Number,Date)
+ .accessor(function (d){ return this.type() == "Date" ? moment(d).toDate() : +d; })
 
  var size = stream.dimension()
  .title('Size')
@@ -16,33 +17,37 @@
  stream.map(function (data){
  if (!group()) return [];
 
- var dates = d3.set(data.map(function (d){ return date(d); })).values();
+ var dates = d3.set(data.map(function (d){ return +date(d); })).values();
 
  var groups = d3.nest()
  .key(group)
  .rollup(function (g){
 
  var singles = d3.nest()
- .key(date)
+ .key(function(d){ return +date(d); })
  .rollup(function (d){
  return {
  group : group(d[0]),
- x : +date(d[0]),
+ x : date(d[0]),
  y : size() ? d3.sum(d,size) : d.length 
  }
  })
  .map(g);
 
  // let's create the empty ones
  dates.forEach(function(d){
- if (!singles[d]) singles[d] = { group : group(g[0]), x : +d, y : 0 }
+ if (!singles.hasOwnProperty(d)) {
+ //console.log(singles, d);
+ singles[d] = { group : group(g[0]), x : d, y : 0 }
+ }
  })
 
  return d3.values(singles);
  })
  .map(data)
 
- return d3.values(groups);
+ return d3.values(groups).map(function(d){ return d.sort(function(a,b){ return a.x - b.x; }) });
+
  })
 
  var chart = raw.chart()
@@ -85,15 +90,22 @@
 
  var layers = stack(data);
 
- var x = d3.scale.linear()
+ /*var x = d3.scale.linear()
  .domain( [ d3.min(layers, function(layer) { return d3.min(layer, function(d) { return d.x; }); }), d3.max(layers, function(layer) { return d3.max(layer, function(d) { return d.x; }); }) ])
- .range([0, +width()]);
+ .range([0, +width()]);*/
+ var x = date.type() == "Date"
+ ? d3.time.scale()
+ .domain( [ d3.min(layers, function(layer) { return d3.min(layer, function(d) { return d.x; }); }), d3.max(layers, function(layer) { return d3.max(layer, function(d) { return d.x; }); }) ])
+ .range([0, +width()])
+ : d3.scale.linear()
+ .domain( [ d3.min(layers, function(layer) { return d3.min(layer, function(d) { return d.x; }); }), d3.max(layers, function(layer) { return d3.max(layer, function(d) { return d.x; }); }) ])
+ .range([0, +width()]);
 
  var y = d3.scale.linear()
  .domain([0, d3.max(layers, function(layer) { return d3.max(layer, function(d) { return d.y0 + d.y; }); })])
  .range([+height()-20, 0]);
 
- var xAxis = d3.svg.axis().scale(x).tickSize(-height()+20).orient("bottom").tickFormat(d3.format("d"))
+ var xAxis = d3.svg.axis().scale(x).tickSize(-height()+20).orient("bottom")//.tickFormat(d3.format("d"))
 
  g.append("g")
  .attr("class", "x axis")

diff --git a/css/raw.css b/css/raw.css
@@ -171,11 +171,9 @@ section.dark {
 }
 
 .navbar .nav>li>a {
- font-size: 14px;
+ font-size: 17px;
  font-weight: 400;
- letter-spacing: 1px;
  color: #0dc4a3;
- text-transform: uppercase;
 
  -webkit-transition: color .15s ease-in-out;
  -moz-transition: color .15s ease-in-out;
@@ -383,7 +381,7 @@ textarea:focus {
 
 .chart-description hr{
  background-color: #3F403F;
- height: 2px;
+ height: 1px;
  width: 20px;
  margin-left: 0;
  margin-top: 10px;
@@ -484,7 +482,7 @@ textarea:focus {
  margin-bottom: 5px;
  bottom: 0px;
  background-position: center;
- background-size: 250%;
+ background-size: 150%;
  background-color: #fff;
 
 /*filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");

diff --git a/imgs/alluvial.png b/imgs/alluvial.png
diff --git a/imgs/circlePacking.png b/imgs/circlePacking.png
diff --git a/imgs/smallMultiples.png b/imgs/smallMultiples.png
diff --git a/imgs/streamgraph.png b/imgs/streamgraph.png
diff --git a/index.html b/index.html
@@ -40,11 +40,11 @@
 
  <div class="collapse navbar-collapse navbar-right" id="raw-navbar">
  <ul class="nav navbar-nav">
- <li><a href="http://raw.densitydesign.org">about</a></li>
- <li><a href="https://github.com/densitydesign/raw/wiki/Developer-Guide">developer guide</a></li>
- <li><a href="https://github.com/densitydesign/raw/wiki/API-Reference">API reference</a></li>
+ <li><a href="http://raw.densitydesign.org">About</a></li>
+ <li><a href="https://github.com/densitydesign/raw/wiki/Developer-Guide">Developer Guide</a></li>
+ <li><a href="https://github.com/densitydesign/raw/wiki/API-Reference">API Reference</a></li>
  <li><a href="https://github.com/densitydesign/raw/wiki/FAQs">FAQ</a></li>
- <li><a href="https://github.com/densitydesign/raw">github</a></li>
+ <li><a href="https://github.com/densitydesign/raw">Github</a></li>
  </ul>
  </div>
 
@@ -98,6 +98,9 @@
  <script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/rgbcolor.js"></script> 
  <script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/StackBlur.js"></script>
  <script type="text/javascript" src="http://canvg.googlecode.com/svn/trunk/canvg.js"></script>
+ <!-- moment -->
+ <script type="text/javascript" src="bower_components/momentjs/min/moment-with-langs.min.js"></script>
+
 
  <!-- raw -->
  <script type="text/javascript" src="lib/raw.js"></script>
@@ -117,6 +120,7 @@
  <script src="charts/reingoldTilford.js"></script>
  <script src="charts/parallelCoordinates.js"></script>
  <script src="charts/circularDendrogram.js"></script>
+ <script src="charts/smallMultiplesArea.js"></script>
 
  <!-- angular -->
  <script type="text/javascript" src="bower_components/angular/angular.min.js"></script>