1Cr18Ni9/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org
This example is ameliorated from the book Create Web Charts with D3 's chapter 10, with my personal tastes.
That book's example focus on functional redraw.

  
## data.tsv

          
            date
            europe
            asia
            america

            
              12-Feb-12
              52
              40
              65

            
              27-Feb-12
              56
              35
              70

            
              02-Mar-12
              51
              45
              62

            
              14-Mar-12
              63
              44
              82

            
              30-Mar-12
              64
              54
              85

            
              07-Apr-12
              70
              34
              72

            
              18-Apr-12
              65
              36
              69

            
              02-May-12
              56
              40
              71

            
              19-May-12
              71
              55
              75

            
              28-May-12
              45
              32
              68

            
              03-Jun-12
              64
              44
              75

            
              18-Jun-12
              53
              36
              78

            
              29-Jun-12
              59
              42
              79

## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    .tick line,
    path.domain
    	{stroke: black;stroke-width: 1;fill: none;}
    .invisided{opacity: 0;}
    form{margin: 10px;padding: 5px;}
    label{display: inline-block;min-width: 80px;}
  </style>
</head>

<body>
  <div id="container">
    <div>
      <form>
       <label><input name='country' type="radio" value="all" checked>All</label>
        <label><input name='country' type="radio" value="europe">Europe</label>
        <label><input name='country' type="radio" value="asia">Asia</label>
        <label><input name='country' type="radio" value="america">America</label>
      </form>
    </div>
</div>
  <script>

    var margin = {top: 40, bottom: 40, left: 40, right: 40},
        svgHeight = 400, svgWidth = 500,
        Height = svgHeight - margin.top - margin.bottom,
        Width = svgWidth - margin.left - margin.right;

    var dateParse = d3.time.format('%d-%b-%y').parse;

    var xScale = d3.time.scale().range([0, Width]),
        yScale = d3.scale.linear().range([Height, 0]),
        colors = d3.scale.category10(),
        xAxis = d3.svg.axis().orient('bottom')
            .scale(xScale).ticks(5),
        yAxis = d3.svg.axis().orient('left')
            .scale(yScale).ticks(5);

    var svg = d3.select('#container')
            .append('svg')
            .attr('width', svgWidth)
            .attr('height', svgHeight);

    var inputs = d3.select('#container').selectAll('input')
    inputs.on('change', function(){
        // If val = d3.selectAll('input').property('value')
        // val is always 'all'
        var val = document.forms[0]['country'].value;

        if(val === 'all'){
            d3.selectAll('.graph path').classed('invisided', 0);
        }else{
            d3.selectAll('.graph path').classed('invisided', 1);
            d3.select('.' + val).classed('invisided', 0);
        }
    })

    var url = 'data.tsv';
    d3.tsv(url, function(error, data){
        // data processing
        var countryList = d3.keys(data[0])
            .filter(function(d){ return d !== 'date'; });
        data.map(function(d){
            d.date    = dateParse(d.date);
            d.europe  = +d.europe;
            d.asia    = +d.asia;
            d.america = +d.america;
        });
        var maxAll = d3.max(data, function(d0){
            return d3.max(countryList.map(function(name){return d0[name]}));
        });

        // construct a nested data
        var nestData = [];
        countryList.map(function(name){
            nestData.push({
                key: name,
                values: data.map(function(d){
                    return {date: d.date, value: d[name]};
                }),
            })
        });

        xScale.domain(d3.extent(data, function(d){return d.date;})).nice();
        yScale.domain([0, maxAll]).nice();

        var line = d3.svg.line()
            .x(function(d){return xScale(d.date);})
            .y(function(d){return yScale(d.value);})

        // asxis groups
        var xGroup = svg.append('g')
            .attr('transform', 'translate(' +
                  [margin.left, margin.top + Height] + ')');
        xGroup.call(xAxis);

        var yGroup = svg.append('g')
            .attr('transform', 'translate(' +
                  [margin.left, margin.top] + ')');
        yGroup.call(yAxis);

        // main graph drawing
        var graph = svg.append('g')
            .attr('transform', 'translate(' +
                  [margin.left, margin.top] + ')')
            .attr('class', 'graph')
            .selectAll('g')
            .data(nestData)
            .enter()
            .append('path')
            .style('transition', 'all 1s ease')
            .attr('class', function(d){return d.key;})
            .attr('d', function(d){return line(d.values)})
            .attr('fill', 'none')
            .attr('stroke', function(d,i){return colors(i)})
            .attr('stroke-width', 2)
    })

  </script>
</body>

## thumbnail.png

      
    Raw
  

              thumbnail.png
date	europe	asia	america
12-Feb-12	52	40	65
27-Feb-12	56	35	70
02-Mar-12	51	45	62
14-Mar-12	63	44	82
30-Mar-12	64	54	85
07-Apr-12	70	34	72
18-Apr-12	65	36	69
02-May-12	56	40	71
19-May-12	71	55	75
28-May-12	45	32	68
03-Jun-12	64	44	75
18-Jun-12	53	36	78
29-Jun-12	59	42	79
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v3.min.js"></script>
	<style>
	body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
	.tick line,
	path.domain
	{stroke: black;stroke-width: 1;fill: none;}
	.invisided{opacity: 0;}
	form{margin: 10px;padding: 5px;}
	label{display: inline-block;min-width: 80px;}
	</style>
	</head>

	<body>
	<div id="container">
	<div>
	<form>
	<label><input name='country' type="radio" value="all" checked>All</label>
	<label><input name='country' type="radio" value="europe">Europe</label>
	<label><input name='country' type="radio" value="asia">Asia</label>
	<label><input name='country' type="radio" value="america">America</label>
	</form>
	</div>
	</div>
	<script>

	var margin = {top: 40, bottom: 40, left: 40, right: 40},
	svgHeight = 400, svgWidth = 500,
	Height = svgHeight - margin.top - margin.bottom,
	Width = svgWidth - margin.left - margin.right;

	var dateParse = d3.time.format('%d-%b-%y').parse;

	var xScale = d3.time.scale().range([0, Width]),
	yScale = d3.scale.linear().range([Height, 0]),
	colors = d3.scale.category10(),
	xAxis = d3.svg.axis().orient('bottom')
	.scale(xScale).ticks(5),
	yAxis = d3.svg.axis().orient('left')
	.scale(yScale).ticks(5);

	var svg = d3.select('#container')
	.append('svg')
	.attr('width', svgWidth)
	.attr('height', svgHeight);

	var inputs = d3.select('#container').selectAll('input')
	inputs.on('change', function(){
	// If val = d3.selectAll('input').property('value')
	// val is always 'all'
	var val = document.forms[0]['country'].value;

	if(val === 'all'){
	d3.selectAll('.graph path').classed('invisided', 0);
	}else{
	d3.selectAll('.graph path').classed('invisided', 1);
	d3.select('.' + val).classed('invisided', 0);
	}
	})

	var url = 'data.tsv';
	d3.tsv(url, function(error, data){
	// data processing
	var countryList = d3.keys(data[0])
	.filter(function(d){ return d !== 'date'; });
	data.map(function(d){
	d.date = dateParse(d.date);
	d.europe = +d.europe;
	d.asia = +d.asia;
	d.america = +d.america;
	});
	var maxAll = d3.max(data, function(d0){
	return d3.max(countryList.map(function(name){return d0[name]}));
	});

	// construct a nested data
	var nestData = [];
	countryList.map(function(name){
	nestData.push({
	key: name,
	values: data.map(function(d){
	return {date: d.date, value: d[name]};
	}),
	})
	});

	xScale.domain(d3.extent(data, function(d){return d.date;})).nice();
	yScale.domain([0, maxAll]).nice();

	var line = d3.svg.line()
	.x(function(d){return xScale(d.date);})
	.y(function(d){return yScale(d.value);})

	// asxis groups
	var xGroup = svg.append('g')
	.attr('transform', 'translate(' +
	[margin.left, margin.top + Height] + ')');
	xGroup.call(xAxis);

	var yGroup = svg.append('g')
	.attr('transform', 'translate(' +
	[margin.left, margin.top] + ')');
	yGroup.call(yAxis);

	// main graph drawing
	var graph = svg.append('g')
	.attr('transform', 'translate(' +
	[margin.left, margin.top] + ')')
	.attr('class', 'graph')
	.selectAll('g')
	.data(nestData)
	.enter()
	.append('path')
	.style('transition', 'all 1s ease')
	.attr('class', function(d){return d.key;})
	.attr('d', function(d){return line(d.values)})
	.attr('fill', 'none')
	.attr('stroke', function(d,i){return colors(i)})
	.attr('stroke-width', 2)
	})

	</script>
	</body>