Chart Controls I

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.

<!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);
        }
    })

// 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>

https://d3js.org/d3.v3.min.js