View this code at http://livecoding.io/3860275
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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(); |
View this code at http://livecoding.io/4137610
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
{ | |
"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": [ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// transform around center: | |
// formula: matrix(sx, 0, 0, sy, cx-sx*cx, cy-sy*cy) | |
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])+')'); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var data = [1,3,5,10,11,12,50]; | |
var width = 500, | |
height = 100, | |
r = 5; | |
var xScale = d3.scale.linear() | |
.range([5, width-r]) | |
.domain([1,50]); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); |
This example uses d3, miso.dataset & rickshaw to build a stacked graph.
This example uses d3, miso.dataset & rickshaw to build a stacked graph.