Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Multiple Area Charts

Since area charts are pretty common, it’s a great place to start. This example goes over the basics of how to create an infographic with multiple area charts along with a context tool to zoom and pan the data. The data for this chart is electricity consumption per capita and was downloaded from Gapminder.org, which is a great resource if you need some data while learning D3.

Built with D3.js.

Year France Germany Japan UK USA
1960 1321.93705189402 1331.88763810213 1010.89873682505 2095.84804704804 3808.71218956003
1961 1407.7746251272 1412.58400581988 1159.84831071743 2224.21531122768 3931.22123566206
1962 1490.82512902131 1501.11535482585 1223.1967739045 2430.01399572168 4171.48270057575
1963 1590.0828501506 1611.6780110804 1402.9720301029 2637.24851207459 4402.56359581911
1964 1714.97558254034 1739.05332668074 1567.3458540537 2748.98984867848 4670.20662987456
1965 1763.74460554109 1861.48173377197 1663.88949943374 2936.75667194112 4910.74105906754
1966 1863.0217900557 1967.97692622617 1861.2371253529 3025.15874531047 5266.51556776557
1967 1941.01788335452 2038.4728293501 2105.0097565314 3098.61256354737 5531.61268569588
1968 2024.79664837586 2248.15998417223 2328.76782138117 3315.93345057413 5994.92063017548
1969 2210.3554910333 2463.03628512994 2677.56919037329 3532.39677430988 6484.38905253186
1970 2356.30253096265 3268.39047586185 3000.2052901964 3684.31635066149 6572.50133214989
1971 2462.02054323876 3456.72580265725 3219.60824220332 3746.03700001789 6935.0632951782
1972 2625.38549756437 3720.8910992744 3529.70599218442 3862.88959931525 7419.82829668026
1973 2850.06331499128 3964.07158130782 3819.59304145444 4147.21496424124 7869.61913717681
1974 2992.72951678952 4120.31748824183 3718.94670937432 4031.83331139727 7806.42608648891
1975 2990.05104833774 4086.87556271374 3780.64114979096 3995.09771271013 7851.99627972015
1976 3238.98328335028 4429.57903538868 4012.52117393808 4062.55726826317 8254.40363473754
1977 3397.84531103055 4566.93590248909 4142.23803113506 4141.10020078677 8567.50430495961
1978 3619.0599245056 4824.03886072201 4327.00277708568 4214.42484768636 8776.70812570479
1979 3795.2173965358 5009.16902553303 4504.05555002207 4386.93164117522 8882.25880189287
1980 3882.48817114275 5005.7858120953 4394.94234406171 4161.91674823312 8896.12725166684
1981 3887.50584055149 5034.10481821662 4382.87429191797 4077.50594780159 9026.19701717344
1982 3947.02544578883 5014.17444449605 4332.92374467956 3990.01840833243 8660.28093590691
1983 4150.09342173376 5140.38355357423 4569.39141258457 4036.29601411059 8849.57058149731
1984 4310.91386821727 5387.81346660737 4770.22113047863 4077.4769419301 9333.54746976551
1985 4521.14113980868 5568.81475445417 4895.46307020779 4249.91674072734 9449.64006798395
1986 4772.68765016625 5652.40452181497 4887.88806675552 4370.70460449332 9453.57694049204
1987 4963.83605314389 5797.70919919013 5160.97601086728 4499.13740535983 9788.93805873904
1988 5043.03285765552 5863.14215356514 5418.23102509522 4641.01791574725 10173.8520917196
1989 5196.07042356752 5912.26636067019 5731.86029640761 4717.82228783546 10372.6777783044
1990 5327.99054540446 5733.92107653182 6068.82557532234 4774.14523676643 10530.6404608282
1991 5633.4645757229 5693.68334768533 6236.27577330525 4874.62827764038 10940.8605542074
1992 5758.45205314398 5595.77765308725 6265.54953186446 4864.99786637654 10805.8169480821
1993 5769.47171706743 5498.99911443377 6295.2732251244 4931.89201804955 11041.2566855494
1994 5829.254504912 5449.33241763681 6698.02070471279 4884.089836485 11223.9549517654
1995 5897.04768519378 5526.8800625843 6851.677666734 5045.27058717372 11414.1610137845
1996 6095.35457997074 5598.20210574179 6997.50926861091 5278.55242757754 11601.4732967102
1997 6064.5034684768 5631.07021974947 7130.84000945438 5292.65758796561 11632.9298325583
1998 6243.01512223719 5683.85798260775 7158.89584102466 5348.20589497343 11886.0446403098
1999 6343.89472564915 5769.93612556588 7299.54963683255 5444.15617003737 12067.8674619236
2000 6483.02000982526 5883.347409897 7449.8143548532 5535.37692019088 12396.7906585904
2001 6635.27581179864 6020.33095354454 7308.36846444855 5572.06664011866 12127.7031895495
2002 6567.48598444707 6176.02170406116 7421.93744186528 5565.80673850474 12301.6230550666
2003 6787.46961496467 6225.57938009566 7355.06878457305 5595.79813263903 12290.1729012138
2004 6954.75551828867 6306.30284433621 7560.23366919442 5624.75573474266 12358.6313939039
2005 6971.21237642108 6320.98732922009 7677.52481869722 5733.45486492822 12568.1464588055
2006 7014.2731545905 6380.53841133454 7726.48940896551 5681.63315959885 12476.8413915478
2007 6975.51353289138 6400.97752410663 7935.13081654739 5617.74563144234 12706.6291915765
2008 7075.05262208671 6381.52826600432 7569.38685409214 5605.53909240352 12553.9731019715
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<script src="http://d3js.org/d3.v2.js"></script>
<style type="text/css">
body {
font: 300 13px "Helvetica Neue", Helvetica;
}
#chart-container {
width: 1000px;
margin: 0 auto 50px auto;
background: rgba(255,255,255,0.5);
box-shadow: 1px 1px 4px rgba(0,0,0,0.2);
padding: 10px 30px;
}
svg {
font-family: 'Lato', Arial, serif;
font-size: 10px;
font-weight: 700;
text-shadow: 0 1px 1px rgba(255,255,255,0.8);
}
text.country-title {
font-size: 20px;
}
text.instructions {
font-size: 16px;
}
g.context g.brush rect.background {
fill: rgba(0,0,0,.1);
}
g.context g.axis path {
stroke-opacity: 0;
}
g.context g.axis line {
stroke-opacity: .1;
}
g.france path.chart {
fill: rgba(127,201,127,0.5);
}
g.germany path.chart {
fill: rgba(127,201,174,0.5);
}
g.japan path.chart {
fill: rgba(127,183,201,0.5);
}
g.uk path.chart {
fill: rgba(127,130,201,0.5);
}
g.usa path.chart {
fill: rgba(171,127,201,0.5);
}
.axis path, .axis line {
fill: none;
stroke: #aaa;
shape-rendering: crispEdges;
}
.brush .extent {
stroke: #f09f8c;
fill-opacity: .125;
shape-rendering: crispEdges;
}
g.context rect.background{
fill: rgb(200,200,255);
visibility: visible !important;
}
</style>
</head>
<body>
<div id="chart-container">
<script type="text/javascript">
var margin = {top: 10, right: 40, bottom: 150, left: 60},
width = 940 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom,
contextHeight = 50;
contextWidth = width * .5;
var svg = d3.select("#chart-container").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", (height + margin.top + margin.bottom));
d3.csv('data.csv', createChart);
function createChart(data){
var countries = [];
var charts = [];
var maxDataPoint = 0;
/* Loop through first row and get each country
and push it into an array to use later */
for (var prop in data[0]) {
if (data[0].hasOwnProperty(prop)) {
if (prop != 'Year') {
countries.push(prop);
}
}
};
var countriesCount = countries.length;
var startYear = data[0].Year;
var endYear = data[data.length - 1].Year;
var chartHeight = height * (1 / countriesCount);
/* Let's make sure these are all numbers,
we don't want javaScript thinking it's text
Let's also figure out the maximum data point
We'll use this later to set the Y-Axis scale
*/
data.forEach(function(d) {
for (var prop in d) {
if (d.hasOwnProperty(prop)) {
d[prop] = parseFloat(d[prop]);
if (d[prop] > maxDataPoint) {
maxDataPoint = d[prop];
}
}
}
// D3 needs a date object, let's convert it just one time
d.Year = new Date(d.Year,0,1);
});
for(var i = 0; i < countriesCount; i++){
charts.push(new Chart({
data: data.slice(),
id: i,
name: countries[i],
width: width,
height: height * (1 / countriesCount),
maxDataPoint: maxDataPoint,
svg: svg,
margin: margin,
showBottomAxis: (i == countries.length - 1)
}));
}
/* Let's create the context brush that will
let us zoom and pan the chart */
var contextXScale = d3.time.scale()
.range([0, contextWidth])
.domain(charts[0].xScale.domain());
var contextAxis = d3.svg.axis()
.scale(contextXScale)
.tickSize(contextHeight)
.tickPadding(-10)
.orient("bottom");
var contextArea = d3.svg.area()
.interpolate("monotone")
.x(function(d) { return contextXScale(d.date); })
.y0(contextHeight)
.y1(0);
var brush = d3.svg.brush()
.x(contextXScale)
.on("brush", onBrush);
var context = svg.append("g")
.attr("class","context")
.attr("transform", "translate(" + (margin.left + width * .25) + "," + (height + margin.top + chartHeight - 10) + ")");
context.append("g")
.attr("class", "x axis top")
.attr("transform", "translate(0,0)")
.call(contextAxis)
context.append("g")
.attr("class", "x brush")
.call(brush)
.selectAll("rect")
.attr("y", 0)
.attr("height", contextHeight);
context.append("text")
.attr("class","instructions")
.attr("transform", "translate(0," + (contextHeight + 20) + ")")
.text('Click and drag above to zoom / pan the data');
function onBrush(){
/* this will return a date range to pass into the chart object */
var b = brush.empty() ? contextXScale.domain() : brush.extent();
for(var i = 0; i < countriesCount; i++){
charts[i].showOnly(b);
}
}
}
function Chart(options){
this.chartData = options.data;
this.width = options.width;
this.height = options.height;
this.maxDataPoint = options.maxDataPoint;
this.svg = options.svg;
this.id = options.id;
this.name = options.name;
this.margin = options.margin;
this.showBottomAxis = options.showBottomAxis;
var localName = this.name;
/* XScale is time based */
this.xScale = d3.time.scale()
.range([0, this.width])
.domain(d3.extent(this.chartData.map(function(d) { return d.Year; })));
/* YScale is linear based on the maxData Point we found earlier */
this.yScale = d3.scale.linear()
.range([this.height,0])
.domain([0,this.maxDataPoint]);
var xS = this.xScale;
var yS = this.yScale;
/*
This is what creates the chart.
There are a number of interpolation options.
'basis' smooths it the most, however, when working with a lot of data, this will slow it down
*/
this.area = d3.svg.area()
.interpolate("basis")
.x(function(d) { return xS(d.Year); })
.y0(this.height)
.y1(function(d) { return yS(d[localName]); });
/*
This isn't required - it simply creates a mask. If this wasn't here,
when we zoom/panned, we'd see the chart go off to the left under the y-axis
*/
this.svg.append("defs").append("clipPath")
.attr("id", "clip-" + this.id)
.append("rect")
.attr("width", this.width)
.attr("height", this.height);
/*
Assign it a class so we can assign a fill color
And position it on the page
*/
this.chartContainer = svg.append("g")
.attr('class',this.name.toLowerCase())
.attr("transform", "translate(" + this.margin.left + "," + (this.margin.top + (this.height * this.id) + (10 * this.id)) + ")");
/* We've created everything, let's actually add it to the page */
this.chartContainer.append("path")
.data([this.chartData])
.attr("class", "chart")
.attr("clip-path", "url(#clip-" + this.id + ")")
.attr("d", this.area);
this.xAxisTop = d3.svg.axis().scale(this.xScale).orient("bottom");
this.xAxisBottom = d3.svg.axis().scale(this.xScale).orient("top");
/* We only want a top axis if it's the first country */
if(this.id == 0){
this.chartContainer.append("g")
.attr("class", "x axis top")
.attr("transform", "translate(0,0)")
.call(this.xAxisTop);
}
/* Only want a bottom axis on the last country */
if(this.showBottomAxis){
this.chartContainer.append("g")
.attr("class", "x axis bottom")
.attr("transform", "translate(0," + this.height + ")")
.call(this.xAxisBottom);
}
this.yAxis = d3.svg.axis().scale(this.yScale).orient("left").ticks(5);
this.chartContainer.append("g")
.attr("class", "y axis")
.attr("transform", "translate(-15,0)")
.call(this.yAxis);
this.chartContainer.append("text")
.attr("class","country-title")
.attr("transform", "translate(15,40)")
.text(this.name);
}
Chart.prototype.showOnly = function(b){
this.xScale.domain(b);
this.chartContainer.select("path").data([this.chartData]).attr("d", this.area);
this.chartContainer.select(".x.axis.top").call(this.xAxisTop);
this.chartContainer.select(".x.axis.bottom").call(this.xAxisBottom);
}
</script>
</div>
</body>
</html>
@reeganlourduraj
Copy link

reeganlourduraj commented Mar 12, 2015

Hi, I am very impressed with your sample. Is there any option or way to connect with OLAP data.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment