Skip to content

Instantly share code, notes, and snippets.

@jekkilekki jekkilekki/_.md
Last active Jan 19, 2017

Embed
What would you like to do?
Bar Chart
{"description":"Bar Chart","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/8f1jkRQ.png"}
/**
* Data Array
*/
var dataArray = [
{
name: 'Morten Rand-Hendriksen',
courses: 18
},
{
name: 'Ray Villalobos',
courses: 7
},
{
name: 'Kevin Skoglund',
courses: 8
},
{
name: 'David Powers',
courses: 5
},
{
name: 'Simon Allardice',
courses: 3
},
{
name: 'James Williamson',
courses: 5
}
];
//dataArray.sort( function compareNumbers(a,b) {
// return b-a;
//});
/**
* Variables and Scales
*/
var margin = { top:30, right:30, bottom:40, left:50 };
var width = 600 - margin.right - margin.left,
height = 500 - margin.top - margin.bottom,
barWidth = 50,
barOffset = 5,
tempColor = '';
// Color scale (Quantitative - linear)
var colors = d3.scale.linear()
.domain([0, dataArray.length*0.5, dataArray.length])
.range(['#91a8d0', '#839791', '#896978']);
// Y Scale : Quantitative - Linear scale
var yScale = d3.scale.linear()
.domain([0, 18])
.range([height, 0]);
// Y Axis
var yAxis = d3.svg.axis()
.scale( yScale )
.orient( 'left' )
.ticks( 10 );
// X Scale : Ordinal scale
var xScale = d3.scale.ordinal()
.domain( d3.range(0, dataArray.length) )
.rangeBands([ 0, width ])
// .paddingInner( 0.1 );
// X Axis
var xAxis = d3.svg.axis()
.scale( xScale )
.orient( 'bottom' )
.tickValues( dataArray.name );
// Tooltip
var tooltip = d3.select( 'body' ).append( 'div' )
.style( 'position', 'absolute' )
.style( 'background', 'white' )
.style( 'color', '#3399cc' )
.style( 'padding', '3px 15px' )
.style( 'border-radius', '5px' );
tooltip.style( 'opacity', 0 );
/**
* D3 Chart Creation
*/
var chart = d3.select( 'svg' ).append( 'svg' )
//.style( 'background', '#f7f5f5' )
//.style( 'transform', 'translate(' + margin.left + ',' + margin.top + ')' )
.attr( 'width', width + margin.left + margin.right )
.attr( 'height', height + margin.top + margin.bottom );
chart.append( 'g' )
.attr( 'class', 'chart' )
.attr( 'transform', 'translate(' + margin.left + ',' + margin.top + ')' )
.selectAll( 'rect' ).data( dataArray )
.enter().append( 'rect' )
//.attr( 'fill', function(d,i) { if ( i == 0 ) { return 'white'; } else { return 'rgba(0,0,0,' + 1/i + ')'; } })
.attr( 'fill', function(d,i) { return colors(i); })
.attr( 'width', xScale.rangeBand() )
.attr( 'height', 0 )
.attr( 'x', function(d,i) { return xScale(i); })
.attr( 'y', height )
.on( 'mouseover', function(d) {
tooltip.transition().style( 'opacity', 1 );
tooltip.html(d)
.style( 'left', (d3.event.pageX - 30) + 'px')
.style( 'top', (d3.event.pageY - 30) + 'px');
tempColor = this.style.fill;
d3.select( this )
.style( 'opacity', 0.5 )
.style( 'fill', '#3399cc' );
})
.on( 'mouseout', function(d) {
d3.select( this )
.style( 'opacity', 1 )
.style( 'fill', tempColor )
})
.transition()
.attr( 'height', function(d) { return yScale(d.courses)+height; })
.attr( 'y', function(d) { return yScale(d.courses); })
.delay( function(d,i) { return i * 100; })
.duration( 1000 )
.ease( 'elastic' );
// Add Axes
chart.append( 'g' ).attr( 'class', 'y axis' ).attr( 'transform', 'translate(' + margin.left + ',' + margin.top + ')' ).call( yAxis );
chart.append( 'g' ).attr( 'class', 'x axis' ).attr( 'transform', 'translate(' + margin.left + ',' + (height + margin.top) + ')' ).call( xAxis );
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.