Skip to content

Instantly share code, notes, and snippets.

@miroli

miroli/PejlChart.js

Created February 25, 2014 09:49
Show Gist options
  • Save miroli/9205992 to your computer and use it in GitHub Desktop.
Save miroli/9205992 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
app.js
var svg = d3.select('#chart')
.append('svg')
.attr('width', '100%')
.attr('height', '100%');
// Instantiate a new Pejlchart
d3.csv('data.csv', function(data) {
var barChart = PejlCharts.BarChart()
.data(data)
.distribution('name')
.value('age')
.fill(d3.scale.category20c())
.colorBy('name');
barChart(svg);
});
Raw
data.csv
We can make this file beautiful and searchable if this error is corrected: It looks like row 2 should actually have 3 columns, instead of 4. in line 1.
name,age,sex
Alberto,35,Male,
Christina,47,Female,
Guido,21,Male
Mario,58,Male
Luigi,88,Male
Robin,26,Male
Maria,50,Female
Rafaela,31,Female
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="chart"></div>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.1/d3.min.js"></script>
<script src="PejlChart.js"></script>
<script src="app.js"></script>
</body>
</html>
Raw
PejlChart.js
var PejlCharts = PejlCharts || {};
// Extend D3
d3.scale.pejl5 = d3.scale.ordinal().range(['#008EBD','#EA6899','#F02A09','#0ACA91','#EDE481']);
d3.scale.pejlSignals = d3.scale.ordinal().range(['#079100','#C3CE0F','#F49D06','#FF5A00','#B60C0C']);
// The charts
PejlCharts.BarChart = function() {
var margin = {top: 20, right: 20, bottom: 30, left: 40};
var data = [],
distribution = '',
value = '',
fill = 'steelblue',
color = d3.scale.category10(),
colorBy = '',
width,
height;
function chart(svg) {
width = svg.style('width').replace('px','') - (margin.left + margin.right);
height = svg.style('height').replace('px','') - (margin.top + margin.bottom);
var g = svg.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
.attr('class', 'pejlChart');
var x = d3.scale.ordinal()
.domain(data.map(function(d) { return d[distribution]; }))
.rangeRoundBands([0, width]);
var y = d3.scale.linear()
.domain([0, d3.max(data, function(d) { return +d[value]; })])
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient('bottom');
var yAxis = d3.svg.axis()
.scale(y)
.orient('left');
var xAxisG = g.append('g')
.attr('transform', 'translate(0,' + height + ')')
.attr('class', 'x axis')
.call(xAxis);
var yAxisG = g.append('g')
.call(yAxis)
yAxisG.append('text')
.attr({
'transform': 'rotate(-90)',
'font-size': '150%',
'x': -5,
'y': 5,
"dy": ".91em",
'text-anchor': 'end'
})
.text('Ålder');
var bars = g.selectAll('.bar')
.data(data)
.enter().append('rect')
.attr({
'class': 'bar',
'x': function(d) { return x( d[distribution] ); },
'y': function(d) { return y( d[value] ); },
'width': x.rangeBand(),
'height': function(d) { return height - y( d[value] ); },
'fill': function(d) { return color( d[colorBy] ); }
})
.on('mouseover', function() { d3.select(this).style('opacity', 0.8); })
.on('mouseout', function() { d3.select(this).style('opacity', 1); })
var labels = g.selectAll('.bar-label')
.data(data)
.enter().append('text')
.attr({
'class': 'bar-label',
'fill': '#fff',
'font-size': '150%',
'text-anchor': 'middle',
'x': function(d) { return x( d[distribution] ) + (x.rangeBand() / 2); },
'y': function(d) { return y( d[value] ); },
'dy': '1em'
})
.text(function(d) { return d[value]; });
d3.select(window).on('resize', resize);
function resize() {
width = svg.style('width').replace('px','') - (margin.left + margin.right);
height = svg.style('height').replace('px','') - (margin.top + margin.bottom);
width < 600 ? height = height - 50 : height = height;
x.rangeRoundBands([0, width]);
y.range([height, 0]);
xAxisG
.attr('transform', 'translate(0,' + height + ')')
.call(xAxis)
.selectAll('text')
.style('text-anchor', function() {
return width < 600 ? 'end' : 'middle';
})
.attr('transform', function() {
return width < 600 ? 'rotate(-50),translate(-10,0)' : 'rotate(0)';
})
.attr('')
yAxisG
.call(yAxis);
bars
.attr('x', function(d) { return x( d[distribution] ); })
.attr('y', function(d) { return y( d[value] ); })
.attr('width', x.rangeBand())
.attr('height', function(d) { return height - y( d[value] ); });
labels
.attr('x', function(d) { return x( d[distribution] ) + (x.rangeBand() / 2.3); })
.attr('y', function(d) { return y( d[value] ); })
}
}
chart.data = function(value) {
if (!arguments.length) return data;
data = value;
return chart;
}
// Data variable to determine horizontal position
chart.distribution = function(value) {
if (!arguments.length) return distribution;
distribution = value;
return chart;
}
// Data variable to determine height
chart.value = function(val) {
if (!arguments.length) return value;
value = val;
return chart;
}
chart.fill = function(value) {
if (!arguments.length) return color;
color = value;
return chart;
}
chart.colorBy = function(value) {
if (!arguments.length) return colorBy;
colorBy = value;
return chart;
}
chart.width = function(value) {
if (!arguments.length) return width;
width = value;
return chart;
}
chart.height = function(value) {
if (!arguments.length) return height;
height = value;
return chart;
}
return chart;
}
Raw
style.css
html, body {
margin: 0;
padding: 0; }
.pejlChart .x text {
font-family: 'Helvetica Neue',Arial,Helvetica,"Nimbus Sans L","Bitstream Vera Sans",sans-serif;
font-size: 85%; }
.bar {
stroke: #fff; }
/* Instance styling */
#chart {
width: 90%;
height: 100%;
border: 1px dotted #000; }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment