Skip to content

Commit

Permalink
Added Small Multiples and improved dates parsing
Browse files Browse the repository at this point in the history
  • Loading branch information
@giorgiocaviglia
giorgiocaviglia committed Jun 4, 2014
1 parent 5c9698f commit 82b1c0c
Show file tree
Hide file tree
Showing 12 changed files with 241 additions and 32 deletions.
3 changes: 2 additions & 1 deletion bower.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
12 changes: 10 additions & 2 deletions charts/hexagonalBinning.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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() )
Expand All @@ -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");

Expand Down
16 changes: 12 additions & 4 deletions charts/scatterPlot.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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() )
Expand All @@ -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");


Expand Down
142 changes: 142 additions & 0 deletions charts/smallMultiplesArea.js
View file
Original file line number Diff line number Diff line change
@@ -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));*/

}

})

})();
28 changes: 20 additions & 8 deletions charts/streamgraph.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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')
Expand All @@ -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()
Expand Down Expand Up @@ -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")
Expand Down
8 changes: 3 additions & 5 deletions css/raw.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -383,7 +381,7 @@ textarea:focus {

.chart-description hr{
background-color: #3F403F;
height: 2px;
height: 1px;
width: 20px;
margin-left: 0;
margin-top: 10px;
Expand Down Expand Up @@ -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");
Expand Down
Binary file modified imgs/alluvial.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified imgs/circlePacking.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added imgs/smallMultiples.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified imgs/streamgraph.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
12 changes: 8 additions & 4 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand Down
Loading

0 comments on commit 82b1c0c

Please sign in to comment.