martinjc/.block

## .block
border: no
license: MIT

## README.md

      
    Raw
  

              README.md
            
          
    This example is very similar to the previous example, but uses a queue to load the data initially

  
## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="//d3js.org/d3.v4.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/d3-queue/3.0.4/d3-queue.min.js"></script>
    <style>
        html, body, #vis {
            height: 100%;
            margin: 0;
        }
    </style>
</head>
<body>
    <form>
        <label for="year">Please select a year: </label>
        <label for="year">Please select a year: </label>
        <input type="range" min=2009 max=2014 step=1 id="year" value=2014 oninput="selected_year.value = year.value">
        <output name="selected_year" id="selected_year">2014</output>
    </form>
    <div id="vis">
    </div>
    <script src="script.js"></script>
</body>
</html>

## monthly_data_2009.csv

          
            month
            value

            
              Jan
              46396

            
              Feb
              33159

            
              Mar
              33494

            
              Apr
              33385

            
              May
              38177

            
              Jun
              95841

            
              Jul
              46438

            
              Aug
              42125

            
              Sep
              37893

            
              Oct
              37636

            
              Nov
              45746

            
              Dec
              160841

## monthly_data_2010.csv

          
            month
            value

            
              Jan
              43009

            
              Feb
              42299

            
              Mar
              42677

            
              Apr
              37992

            
              May
              44881

            
              Jun
              93920

            
              Jul
              45514

            
              Aug
              43251

            
              Sep
              41273

            
              Oct
              46500

            
              Nov
              49092

            
              Dec
              133044

## monthly_data_2011.csv

          
            month
            value

            
              Jan
              43920

            
              Feb
              36070

            
              Mar
              33698

            
              Apr
              33882

            
              May
              35240

            
              Jun
              76949

            
              Jul
              41603

            
              Aug
              36160

            
              Sep
              32501

            
              Oct
              33520

            
              Nov
              33592

            
              Dec
              122095

## monthly_data_2012.csv

          
            month
            value

            
              Jan
              38921

            
              Feb
              30774

            
              Mar
              33217

            
              Apr
              27501

            
              May
              31522

            
              Jun
              72441

            
              Jul
              31661

            
              Aug
              27590

            
              Sep
              29600

            
              Oct
              28737

            
              Nov
              31191

            
              Dec
              120922

## monthly_data_2013.csv

          
            month
            value

            
              Jan
              26045

            
              Feb
              24982

            
              Mar
              31351

            
              Apr
              29663

            
              May
              32617

            
              Jun
              83406

            
              Jul
              34535

            
              Aug
              29303

            
              Sep
              25480

            
              Oct
              27025

            
              Nov
              31469

            
              Dec
              121914

## monthly_data_2014.csv

          
            month
            value

            
              Jan
              23046

            
              Feb
              20109

            
              Mar
              22824

            
              Apr
              21681

            
              May
              20956

            
              Jun
              43460

            
              Jul
              22769

            
              Aug
              21712

            
              Sep
              19359

            
              Oct
              19768

            
              Nov
              20566

            
              Dec
              67668

## preview.png

      
    Raw
  

              preview.png
            
          
## script.js
var width = document.getElementById('vis')
    .clientWidth;
var height = document.getElementById('vis')
    .clientHeight;

var margin = {
    top: 10,
    bottom: 70,
    left: 70,
    right: 20
}

var svg = d3.select('#vis')
    .append('svg')
    .attr('width', width)
    .attr('height', height)
    .append('g')
    .attr('transform', 'translate(' + margin.left + ',' + margin.right + ')');

width = width - margin.left - margin.right;
height = height - margin.top - margin.bottom;

var data = {};

var x_scale = d3.scaleBand()
    .rangeRound([0, width])
    .padding(0.1);

var y_scale = d3.scaleLinear()
    .range([height, 0]);

var colour_scale = d3.scaleQuantile()
    .range(["#ffffe5", "#fff7bc", "#fee391", "#fec44f", "#fe9929", "#ec7014", "#cc4c02", "#993404", "#662506"]);

var y_axis = d3.axisLeft(y_scale);
var x_axis = d3.axisBottom(x_scale);

svg.append('g')
    .attr('class', 'x axis')
    .attr('transform', 'translate(0,' + height + ')');

svg.append('g')
    .attr('class', 'y axis');

function draw(year) {

    var csv_data = data[year];

    var t = d3.transition()
        .duration(2000);

    var months = csv_data.map(function(d) {
        return d.month;
    });
    x_scale.domain(months);

    var max_value = d3.max(csv_data, function(d) {
        return +d.value;
    });

    y_scale.domain([0, max_value]);
    colour_scale.domain([0, max_value]);

    var bars = svg.selectAll('.bar')
        .data(csv_data)

    bars
        .exit()
        .remove();

    var new_bars = bars
        .enter()
        .append('rect')
        .attr('class', 'bar')
        .attr('x', function(d) {
            return x_scale(d.month);
        })
        .attr('width', x_scale.bandwidth())
        .attr('y', height)
        .attr('height', 0)

    new_bars.merge(bars)
        .transition(t)
        .attr('y', function(d) {
            return y_scale(+d.value);
        })
        .attr('height', function(d) {
            return height - y_scale(+d.value)
        })
        .attr('fill', function(d) {
            return colour_scale(+d.value);
        })

    svg.select('.x.axis')
        .call(x_axis);

    svg.select('.y.axis')
        .transition(t)
        .call(y_axis);

}

d3.queue()
    .defer(d3.csv, 'monthly_data_2014.csv')
    .defer(d3.csv, 'monthly_data_2013.csv')
    .defer(d3.csv, 'monthly_data_2012.csv')
    .defer(d3.csv, 'monthly_data_2011.csv')
    .defer(d3.csv, 'monthly_data_2010.csv')
    .defer(d3.csv, 'monthly_data_2009.csv')
    .await(function(error, d2014, d2013, d2012, d2011, d2010, d2009) {
        data['2009'] = d2009;
        data['2010'] = d2010;
        data['2011'] = d2011;
        data['2012'] = d2012;
        data['2013'] = d2013;
        data['2014'] = d2014;
        draw('2014');
    });

var slider = d3.select('#year');
slider.on('change', function() {
    draw(this.value);
});

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="//d3js.org/d3.v4.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/d3-queue/3.0.4/d3-queue.min.js"></script>
	<style>
	html, body, #vis {
	height: 100%;
	margin: 0;
	}
	</style>
	</head>
	<body>
	<form>
	<label for="year">Please select a year: </label>
	<label for="year">Please select a year: </label>
	<input type="range" min=2009 max=2014 step=1 id="year" value=2014 oninput="selected_year.value = year.value">
	<output name="selected_year" id="selected_year">2014</output>
	</form>
	<div id="vis">
	</div>
	<script src="script.js"></script>
	</body>
	</html>
	month	value
	Jan	46396
	Feb	33159
	Mar	33494
	Apr	33385
	May	38177
	Jun	95841
	Jul	46438
	Aug	42125
	Sep	37893
	Oct	37636
	Nov	45746
	Dec	160841
	month	value
	Jan	43009
	Feb	42299
	Mar	42677
	Apr	37992
	May	44881
	Jun	93920
	Jul	45514
	Aug	43251
	Sep	41273
	Oct	46500
	Nov	49092
	Dec	133044
	month	value
	Jan	43920
	Feb	36070
	Mar	33698
	Apr	33882
	May	35240
	Jun	76949
	Jul	41603
	Aug	36160
	Sep	32501
	Oct	33520
	Nov	33592
	Dec	122095
	month	value
	Jan	38921
	Feb	30774
	Mar	33217
	Apr	27501
	May	31522
	Jun	72441
	Jul	31661
	Aug	27590
	Sep	29600
	Oct	28737
	Nov	31191
	Dec	120922
	month	value
	Jan	26045
	Feb	24982
	Mar	31351
	Apr	29663
	May	32617
	Jun	83406
	Jul	34535
	Aug	29303
	Sep	25480
	Oct	27025
	Nov	31469
	Dec	121914
	month	value
	Jan	23046
	Feb	20109
	Mar	22824
	Apr	21681
	May	20956
	Jun	43460
	Jul	22769
	Aug	21712
	Sep	19359
	Oct	19768
	Nov	20566
	Dec	67668
	var width = document.getElementById('vis')
	.clientWidth;
	var height = document.getElementById('vis')
	.clientHeight;

	var margin = {
	top: 10,
	bottom: 70,
	left: 70,
	right: 20
	}

	var svg = d3.select('#vis')
	.append('svg')
	.attr('width', width)
	.attr('height', height)
	.append('g')
	.attr('transform', 'translate(' + margin.left + ',' + margin.right + ')');

	width = width - margin.left - margin.right;
	height = height - margin.top - margin.bottom;

	var data = {};

	var x_scale = d3.scaleBand()
	.rangeRound([0, width])
	.padding(0.1);

	var y_scale = d3.scaleLinear()
	.range([height, 0]);

	var colour_scale = d3.scaleQuantile()
	.range(["#ffffe5", "#fff7bc", "#fee391", "#fec44f", "#fe9929", "#ec7014", "#cc4c02", "#993404", "#662506"]);

	var y_axis = d3.axisLeft(y_scale);
	var x_axis = d3.axisBottom(x_scale);

	svg.append('g')
	.attr('class', 'x axis')
	.attr('transform', 'translate(0,' + height + ')');

	svg.append('g')
	.attr('class', 'y axis');

	function draw(year) {

	var csv_data = data[year];

	var t = d3.transition()
	.duration(2000);

	var months = csv_data.map(function(d) {
	return d.month;
	});
	x_scale.domain(months);

	var max_value = d3.max(csv_data, function(d) {
	return +d.value;
	});

	y_scale.domain([0, max_value]);
	colour_scale.domain([0, max_value]);

	var bars = svg.selectAll('.bar')
	.data(csv_data)

	bars
	.exit()
	.remove();

	var new_bars = bars
	.enter()
	.append('rect')
	.attr('class', 'bar')
	.attr('x', function(d) {
	return x_scale(d.month);
	})
	.attr('width', x_scale.bandwidth())
	.attr('y', height)
	.attr('height', 0)

	new_bars.merge(bars)
	.transition(t)
	.attr('y', function(d) {
	return y_scale(+d.value);
	})
	.attr('height', function(d) {
	return height - y_scale(+d.value)
	})
	.attr('fill', function(d) {
	return colour_scale(+d.value);
	})

	svg.select('.x.axis')
	.call(x_axis);

	svg.select('.y.axis')
	.transition(t)
	.call(y_axis);

	}

	d3.queue()
	.defer(d3.csv, 'monthly_data_2014.csv')
	.defer(d3.csv, 'monthly_data_2013.csv')
	.defer(d3.csv, 'monthly_data_2012.csv')
	.defer(d3.csv, 'monthly_data_2011.csv')
	.defer(d3.csv, 'monthly_data_2010.csv')
	.defer(d3.csv, 'monthly_data_2009.csv')
	.await(function(error, d2014, d2013, d2012, d2011, d2010, d2009) {
	data['2009'] = d2009;
	data['2010'] = d2010;
	data['2011'] = d2011;
	data['2012'] = d2012;
	data['2013'] = d2013;
	data['2014'] = d2014;
	draw('2014');
	});

	var slider = d3.select('#year');
	slider.on('change', function() {
	draw(this.value);
	});