StatBytes Seminar Presentation
Philipp Burckhardt
11/05/2015
JavaScript library by Mike Bostock to visualize data with HTML, SVG, and CSS.
{
"name": "sandbox",
"version": "0.0.0",
"scripts": {
"browserify": "node_modules/.bin/browserify script.js > bundle.js",
"start": "node_modules/.bin/beefy script.js:bundle.js 8000 --live"
},
"devDependencies": {
"beefy": "^2.1.5",
"browserify": "^12.0.1"
},
"dependencies": {
"compute.io": "^0.106.0",
"d3": "^3.5.6",
"datasets-iris-setosa-sepal": "^1.0.0"
}
}
var compute = require( 'compute.io' );
var sepal = require( 'datasets-iris-setosa-sepal' );
var d3 = require( 'd3' );
var svg = d3.select( '#histogram' ).append( 'svg' )
var margin = {top: 10, right: 30, bottom: 30, left: 30},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var svg = d3.select( '#histogram' ).append( 'svg' )
.attr( 'width', width + margin.left + margin.right )
.attr( 'height', height + margin.top + margin.bottom );
var x = d3.scale.linear()
.domain([0,5.6])
.range([0,width]);
var y = d3.scale.linear()
.domain([0,1])
.range([height, 0]);
var bars = svg.selectAll( 'rect' )
.data( data );
// Enter Selection
bars.enter()
.append( 'rect' )
// Update Selection
// set attributes of bars...
// Exit Selection
bars.exit().remove();
function draw( dat ) {
var data = d3.layout.histogram()
.bins(x.ticks(20))
.frequency( false )( dat );
var bars = svg.selectAll( 'rect' )
.data( data );
// Enter Selection
bars.enter()
.append( "rect" )
// Update Selection
bars.attr( "width", x(data[0].dx) - 1)
.attr( "height", function(d) {
return height - y(d.y);
})
.attr( "transform", function(d) {
return "translate(" +
x(d.x) + "," + y(d.y) + ")";
});
// Exit Selection
bars.exit().remove();
}
var xAxis = d3.svg.axis()
.scale( x )
.orient( 'bottom' );
svg.append( 'g' )
.attr( 'class', 'x axis' )
.attr( 'transform', 'translate(0,' + height + ')' )
.call(xAxis);
function updateData() {
var option = d3.select( '#dataSelect' ).property( 'value' );
switch ( option ) {
case 'sepalWidth':
draw( sepal.width );
break;
case 'sepalLength':
draw( sepal.len )
break;
}
}
d3.select( '#dataSelect' ).on( 'change', updateData );