Bar Chart 1

This is a bar chart that initially displays a portion of the data in the csv file. It has a legend with one rectangle for each bar in the chart. When the rectangle is clicked, depending on the current state, the bar will be added or removed from the chart, by way of transitions.

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8'>
    <title>Bar Chart</title>
    <style>
      .bar {
        fill: steelblue;
      }
      .legend rect {
        stroke: steelblue;
        stroke-width: 1;
        fill: steelblue;
      }
      .axis text {
        font: 10px sans-serif;
      }
      .axis path,
      .axis line {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
      }
      .x.axis path {
        display: none;
      }
    </style>
  </head>
  <body>
    <svg class="chart"></svg>
    <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
    <script>
      /* set everything up */
      var margin = {top: 20,right: 80,bottom: 30,left: 40},
        width = 960 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom,
        xScale = d3.scale.ordinal().rangeRoundBands([0, width], .1),
        yScale = d3.scale.linear().range([height, 0]);

var svg = d3.select(".chart")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var xAxis = d3.svg.axis()
          .scale(xScale)
          .orient("bottom")
        svg.append("g")
          .attr("class", "x axis");

var yAxis = d3.svg.axis()
          .scale(yScale)
          .orient("left")
          .ticks(10);
        svg.append("g")
          .attr("class", "y axis");

var initNumYearsToDisplay = 15,
          yearsToRemove = [], // array holds the years not wanted in the display data
          initialData = []; // array to hold the initial data (all the data)
          filteredData = []; // array to hold the initial data (only data to be displayed)

/* get the data */
      d3.csv("data.csv", type, function(error, data) {
        if (error) throw error;

initialData = data;
        filteredData = data;

// remove the extra years from the data so the display is good
        yearsToRemove = getElementsInArray("year", data).slice(initNumYearsToDisplay);
        yearsToRemove.forEach(function(e) { // and now filter out all unwanted YEARS
          filteredData = filteredData.filter(function(item) { return item.year != e; });
        });

update(filteredData); // call the update function and pass the data for the number of rectangles
      });

/* display and update data */
      function update(data) {
        xScale.domain(data.map(function(d) { return d.year; })); // scale X inputs
        yScale.domain([0, d3.max(data, function(d) { return d.value; })]); // scale Y inputs

svg.select(".x.axis") // display/update the X axis
            .transition()
            .duration(200)
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis);

svg.select(".y.axis") // display/update the Y axis
            .transition()
            .duration(200)
            .call(yAxis);

// bind the data to the rectangles and specify a key function
        var bar = svg.selectAll(".bar")
            .data(data, function(d) { return d.year; });

bar.enter().append("rect")
            .attr("class", "bar")
            .attr("y", yScale(0))
            .attr("height", height - yScale(0))
            .on("click", function(d, i) { return console.log(this); });

// UPDATE    
        bar.transition()
            .duration(200)
            .attr("x", function(d) { return xScale(d.year); })
            .attr("width", xScale.rangeBand())
            .attr("y", function(d) { return yScale(d.value); })
            .attr("height", function(d) { return height - yScale(d.value); });

// REMOVE
        bar.exit()
            .transition()
            .duration(200)
            .attr("y", yScale(0))
            .attr("height", height - yScale(0))
            .style('fill-opacity', 1e-6)
            .remove();

/* legend */
        // append the g containers and bind the data to them
        var legend = svg.selectAll(".legend")
            .data(initialData.slice().reverse())
            .enter().append("g")
            .attr("class", "legend")
            .attr("transform", function(d, i) { return "translate(20," + i * 22 + ")"; });

// append the rectangles
        var legendRect = legend.append("rect")
            .attr("x", width - 18)
            .attr("width", 18)
            .attr("height", 18)
            .attr("id", function(d, i) { return "myRect" + i; }) // add an id for the onclick
            .attr("class", function(d, i) {
              if (yearsToRemove.indexOf(d.year) < 0) { return "visible"; }
            })
            .attr("fill-opacity", function(d) {
              if (yearsToRemove.indexOf(d.year) > -1) { return 0; }
            });

// add the on click event
        legendRect.on("click", function(d, i) {
          var theRect = d3.select("#myRect" + i); // store the selection in a variable
          var hasClass = theRect.classed("visible"); // store true or false if the visible class is in the selection
          if (hasClass == true) { //Its visible!
            // fade out the legend sqare fill
            theRect.transition().duration(200).style('fill-opacity', 1e-6);
            // remove the visible class from the selection
            theRect.classed("visible", !theRect.classed("visible"));
            // remove the year from the data array
            filteredData = filteredData.filter(function(item) { return item.year != d.year; });
            // update the display
            update(filteredData);
          } else { //Its NOT visible!
            // fade in the legend sqare fill
            theRect.transition().duration(200).style('fill-opacity', 1);
            // add the visible class to the selection
            theRect.classed("visible", !theRect.classed("visible"));
            // add the year to the data array
            filteredDataRemoved = filteredData.splice(filteredData.length, 0, d);
            var filteredData2 = filteredData.sort(function(a, b) { return a.year - b.year; });
            // update the display
            update(filteredData2);
          }
        });

// append the text (year) to the group container
        legend.append("text")
          .attr("x", width + 5)
          .attr("y", 9)
          .attr("dy", ".35em")
          .style("font-family", "sans-serif")
          .style("text-anchor", "front")
          .text(function(d) { return d.year; });
      }

// get the unique elements from a d2 nested array
      function getElementsInArray(elementType, data) {
        return d3.nest()
          .key(function(d) { return d[elementType]; })
          .entries(data)
          .map(function(d) { return d.key; });
      }

// convert the value from string to number
      function type(d) {
        d.value = +d.value;
        return d;
      }
    </script>
  </body>
</html>

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