martinjc/.block

## .block
license: mit
border: no

## README.md

      
    Raw
  

              README.md
            
          
    Pulls the latest UK Unemployment Rate data from the Office for National Statistics, and draws a line representing the unemployment rate using a d3.line() generator.
It also draws a hidden set of bars, one for each datapoint. These bars are used to provide interaction with the data. On mouseover, the tooltip is updated with the correct values and the bar is shown. On mouseout the bar is hidden.
Concepts covered:

Scales

Time Scale (x-axis)
Linear scale (y-axis)


Interaction

Mouseover, Mouseout, Mousemove
Using hidden elements for interaction


## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>UK Unemployment Rate</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.7.3/d3.min.js"></script>
    <style>
    #vis {
        height: 500px;
        margin: 0;
    }

    .tooltip {
        position: absolute;
    }

    .tooltip p {
        background-color: white;
        border: #eee 1px solid;
        padding: 2px;
        font-family: sans-serif;
        font-size: 11px;
    }
</style>
</head>
<body>
    <div id="vis">

    </div>
    <script src="script.js"></script>

</body>
</html>

## preview.png

      
    Raw
  

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

    var margin = {
        top: 10,
        bottom: 100,
        left: 100,
        right: 120
    };

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

    var tooltip = d3.select('body')
        .append('div')
        .attr('class', 'tooltip');

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

    var dateParse = d3.timeParse('%Y %b');
    var tooltipFormat = d3.timeFormat('%B %Y');

    var x_scale = d3.scaleTime()
        .range([0, width]);

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

    var band_scale = d3.scaleBand()
        .range([0, width]);

    var line = d3.line()
        .x(function(d) {
            return x_scale(dateParse(d.date));
        })
        .y(function(d) {
            return y_scale(+d.value);
        })
        .curve(d3.curveBasis);

    var x_axis = d3.axisBottom()
        .scale(x_scale);

    var y_axis = d3.axisLeft()
        .scale(y_scale);

    d3.json('https://www.ons.gov.uk/employmentandlabourmarket/peoplenotinwork/unemployment/timeseries/mgsx/lms/data', function(data) {
        data = data['months'];

        x_scale.domain(d3.extent(data, function(d) {
            return dateParse(d.date);
        }))

        y_scale.domain([0, d3.max(data, function(d) {
            return +d.value;
        })]);

        band_scale.domain(data.map(function(d) {
            return dateParse(d.date);
        }));

        var lines = svg.selectAll('.line')
            .data([data]);

        lines
            .enter()
            .append('path')
            .attr('class', 'line')
            .attr('fill', 'none')
            .attr('stroke', 'black')
            .attr('d', line);

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

        bars
            .enter()
            .append('rect')
            .attr('class', 'bar')
            .attr('x', function(d) {
                return band_scale(dateParse(d.date));
            })
            .attr('width', band_scale.bandwidth())
            .attr('height', height)
            .attr('y', 0)
            .attr('fill', 'black')
            .attr('opacity', 0)
            .on('mouseover', mouseOver)
            .on('mousemove', mouseMove)
            .on('mouseout', mouseOut);

        svg.append('g')
            .attr('transform', 'translate(0, ' + height + ')')
            .call(x_axis);

        svg.append('g')
            .call(y_axis);

        function mouseOver(d) {
            console.log(d);
            var date = dateParse(d.date);
            var displayDate = tooltipFormat(date);

            d3.select(this)
                .style('opacity', 1)

            tooltip
                .style('display', null)
                .html('<p>Date: ' + displayDate + '<br>Unemployment Rate: ' + d.value + '%</p>');
        };

        function mouseMove(d) {
            tooltip
                .style('top', (d3.event.pageY - 20) + "px")
                .style('left', (d3.event.pageX + 20) + "px");
        };

        function mouseOut(d) {
            d3.select(this)
                .style('opacity', 0)

            tooltip
                .style('display', 'none');
        };
    })

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>UK Unemployment Rate</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.7.3/d3.min.js"></script>
	<style>
	#vis {
	height: 500px;
	margin: 0;
	}

	.tooltip {
	position: absolute;
	}

	.tooltip p {
	background-color: white;
	border: #eee 1px solid;
	padding: 2px;
	font-family: sans-serif;
	font-size: 11px;
	}
	</style>
	</head>
	<body>
	<div id="vis">

	</div>
	<script src="script.js"></script>

	</body>
	</html>
	var width = document.getElementById('vis')
	.clientWidth;
	var height = document.getElementById('vis')
	.clientHeight;

	var margin = {
	top: 10,
	bottom: 100,
	left: 100,
	right: 120
	};

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

	var tooltip = d3.select('body')
	.append('div')
	.attr('class', 'tooltip');

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

	var dateParse = d3.timeParse('%Y %b');
	var tooltipFormat = d3.timeFormat('%B %Y');

	var x_scale = d3.scaleTime()
	.range([0, width]);

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

	var band_scale = d3.scaleBand()
	.range([0, width]);

	var line = d3.line()
	.x(function(d) {
	return x_scale(dateParse(d.date));
	})
	.y(function(d) {
	return y_scale(+d.value);
	})
	.curve(d3.curveBasis);

	var x_axis = d3.axisBottom()
	.scale(x_scale);

	var y_axis = d3.axisLeft()
	.scale(y_scale);

	d3.json('https://www.ons.gov.uk/employmentandlabourmarket/peoplenotinwork/unemployment/timeseries/mgsx/lms/data', function(data) {
	data = data['months'];

	x_scale.domain(d3.extent(data, function(d) {
	return dateParse(d.date);
	}))

	y_scale.domain([0, d3.max(data, function(d) {
	return +d.value;
	})]);

	band_scale.domain(data.map(function(d) {
	return dateParse(d.date);
	}));

	var lines = svg.selectAll('.line')
	.data([data]);

	lines
	.enter()
	.append('path')
	.attr('class', 'line')
	.attr('fill', 'none')
	.attr('stroke', 'black')
	.attr('d', line);

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

	bars
	.enter()
	.append('rect')
	.attr('class', 'bar')
	.attr('x', function(d) {
	return band_scale(dateParse(d.date));
	})
	.attr('width', band_scale.bandwidth())
	.attr('height', height)
	.attr('y', 0)
	.attr('fill', 'black')
	.attr('opacity', 0)
	.on('mouseover', mouseOver)
	.on('mousemove', mouseMove)
	.on('mouseout', mouseOut);

	svg.append('g')
	.attr('transform', 'translate(0, ' + height + ')')
	.call(x_axis);

	svg.append('g')
	.call(y_axis);

	function mouseOver(d) {
	console.log(d);
	var date = dateParse(d.date);
	var displayDate = tooltipFormat(date);

	d3.select(this)
	.style('opacity', 1)

	tooltip
	.style('display', null)
	.html('<p>Date: ' + displayDate + '<br>Unemployment Rate: ' + d.value + '%</p>');
	};

	function mouseMove(d) {
	tooltip
	.style('top', (d3.event.pageY - 20) + "px")
	.style('left', (d3.event.pageX + 20) + "px");
	};

	function mouseOut(d) {
	d3.select(this)
	.style('opacity', 0)

	tooltip
	.style('display', 'none');
	};
	})