Irene Ros iros

This example uses d3, miso.dataset & rickshaw to build a stacked graph.

This example uses d3, miso.dataset & rickshaw to build a stacked graph.

	var data = [
	{ age : 23, weight : 140, height : 65 },
	{ age : 40, weight : 290, height : 72 },
	{ age : 13, weight : 110, height : 60 }
	];

	var healthData = new Miso.Dataset({
	data: data
	});

	var interactive = new Miso.Storyboard({
	// our initial state will be loading
	initial : 'loading',

	scenes : {

	loading: {
	enter : function() {
	// show that we are in a loading state
	$('#loading').show();

	Backbone.sync = function(method, model, options) {

	// we need to make sure we initialize a store, in this case
	// we will just use a JS object.
	var cache = {};

	// The size will be primarily used to assign ids to newly
	// created models. Each time a new model is created, the size
	// will be incremented.
	var size = 0;

	{
	"url": "http://mynewsapp.com/article/19928034",
	"id": "19928034",
	"body": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae lorem quam, a luctus quam. Proin scelerisque cursus dolor, ut iaculis urna tempus vitae.",
	"original_body": "<b>Lorem ipsum</b> dolor sit amet, consectetur adipiscing elit. Pellentesque vitae lorem quam, a luctus quam. Proin scelerisque cursus dolor, ut iaculis urna tempus vitae. ",
	"title": "Lorem ipsum",
	"byline": "By Cicero",
	"pub_date": "1011-01-04T16:00:25Z",
	"decompositions": {
	"sentences": [

	// transform around center:
	// formula: matrix(sx, 0, 0, sy, cx-sxcx, cy-sycy)
	var b = el.getBBox();
	var center = [b.x + b.width/2, b.y + b.height/2];
	var factor = 1.8;
	el.attr('transform','matrix(' + factor + ', 0, 0, ' + factor + ', ' +
	(center[0] - factor * center[0]) +
	',' + (center[1] - factor * center[1])+')');

	var data = [1,4,6,9,12,13,30];
	var circleChart = d3.select("div#vis")
	.append("svg")
	.chart("CircleChart")
	.width(200)
	.height(100)
	.radius(3);

	// render it with some data
	circleChart.draw(data);