var div = d3.select('#chart').append('div')

var margin = {

  top: 20,

  right: 20,

  bottom: 30,

  left: 50

 },

 width = 960 - margin.left - margin.right,

 height = 500 - margin.top - margin.bottom,

 barheight = 20,

 barwidth = 10;

​

var parseDate = d3.time.format("%Y-%m-%d").parse;

//var formatPct = d3.format('.0%')

var x = d3.time.scale()

          .range([0, width]);

​

var y = d3.scale.linear()

          .range([height, 0]);

​

var xAxis = d3.svg.axis()

          .scale(x)

          .orient("bottom")

          .ticks(5)

          .tickFormat(d3.time.format("%Y"));

​

var yAxis = d3.svg.axis()

          .scale(y)

          .orient("left");

​

//create line of values

var valueline = d3.svg.line()

  .x(function(d) { return x(d.mes); })

  .y(function(d) { return y(d.jornalistas); });

​

var svg = d3.select("#chart")

            .append("svg")

            .attr("width", width + margin.left + margin.right)

            .attr("height", height + margin.top + margin.bottom)

           .append("g")

            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

​

​

d3.json("https://raw.githubusercontent.com/voltdatalab/dados/master/passaralhos/total.json", function(error, data) {

 data.forEach(function(d) {

  d.mes = parseDate(d.mes);

  d.jornalistas = +d.jornalistas;

  d.total = +d.total;

 });

 var dataNested = d3.nest().key(function(d) { return d.midia })

                    .entries(data)

​

                  div.append('select')

                     .attr('id', 'variableSelect')

                     .on('change', variableChange)

                     .selectAll('option')

                     .data(dataNested)

                     .enter()

                    .append('option')

                     .attr('value', function(d) { return d.key })

                     .text(function(d) {return d.key})

                    var dataFiltered = dataNested.filter(function(d) {

                     return d.key === d3.select('#variableSelect')

                      .property('value')})

                    x.domain

                    (d3.extent(dataFiltered[0]

                       .values, function(d) {return d.mes;}));

                    y.domain

                     (d3.extent(dataFiltered[0]

                       .values, function(d) {return d.jornalistas;}));

​

  svg.append("g")

    .attr("class", "xAxis")

    .attr("transform", "translate(0," + height + ")").

  call(xAxis);

​

  svg.append("g")

    .attr("class", "yAxis")

    .call(yAxis)

    .append("text")

    .attr("transform", "rotate(-90)")

    .attr("y", 6)

    .attr("dy", ".71em")

    .style("text-anchor", "end")

    .text("Demissões");

​

 svg.append("path")

  .datum(dataFiltered[0].values)

  .attr("class", "line")

  .attr("width", 0)

  .attr("d", valueline);

​

 function variableChange() {

  var value = this.value

  var dataFiltered = dataNested.filter(function(d) {

   return d.key === value

  })

  x.domain(d3.extent(dataFiltered[0].values, function(d) {

   return d.mes;

  }));

  y.domain(d3.extent(dataFiltered[0].values, function(d) {

   return d.jornalistas;

  }));

  d3.select('.xAxis').transition().duration(1000).call(xAxis)

  d3.select('.yAxis').transition().duration(1000).call(yAxis)

  d3.select('.line').datum(dataFiltered[0].values).attr('d', valueline)

 }

});