D3 Examples - Fatal Accidents 1976-2015 Per Capita (Refactored)

xxxxxxxxxx
 
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700" rel="stylesheet" type="text/css">
  
  <style>    
    #chartContainer {
        font-family: Roboto, sans-serif;
    }
    
    .domain dimple-custom-axis-line {
        fill: none; 
      stroke: orange; 
      shape-rendering: crispEdges;
    }
    
    .dimple-axis dimple-title dimple-custom-axis-title dimple-axis-x {
      fill: white;
    }
    
    .dimple-custom-gridline {
      stroke: rgba(250, 250, 255, 0.6);
    } 
    
    //x.shapes.selectAll("line").colorBlack
    
    
    </style>
</head>
  
<div id="chartContainer">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://dimplejs.org/dist/dimple.v2.3.0.min.js"></script>
​
  <script type="text/javascript"> 
    var svg = dimple.newSvg("#chartContainer", 850, 500);
    
    // Fill the SVG background
    svg.append("rect")
      .attr("x", "0px")
      .attr("y", "0px")
        .attr("rx", 25)
      .attr("ry", 25)
      .attr("width", "100%")
      .attr("height", "100%")
      .style("fill", "#274b61");
    
    var myChart;
    var myLegend;
    var filterValues;
    var toggleSeries;
    var defaultColor = new dimple.color("rgb(245, 245, 245)", "#226d9e", 1);
    var indicatorColor = new dimple.color("#09c1ab", "#226d9e", 1);
    var toggles;
    var isPerCapita = false;
​
    d3.csv("timeseries_data_per_capita copy.csv", function (data) {
      var agregateData = dimple.filterData(data, "Per Capita", ["FALSE"]); 
​
      myChart = new dimple.chart(svg, agregateData);  
      myChart.setBounds(50, 50, "65%", 400);
      var x = myChart.addCategoryAxis("x", "Year");
      var y = myChart.addMeasureAxis("y", "Fatal Accidents");
      var s = myChart.addSeries("state", dimple.plot.line);
      s.interpolation = "cardinal";
      
      myLegend = myChart.addLegend("75%", "11%", 300, "80%", "left");
      
      
​
      // Chart must be drawn in order to access and modify its objects
      myChart.draw();
​
      // This is a critical step.  By doing this we orphan the legend. This
      // means it will not respond to graph updates.  Without this the legend
      // will redraw when the chart refreshes removing the unchecked item and
      // also dropping the events we define below.
      myChart.legends = [];
​
      filterValues = []; 
      // Get all the rectangles from our now orphaned legend
      myLegend.shapes.selectAll("rect").on("click", function (e) {
        // This indicates whether the item is already visible or not
        var hide = false;
        var newFilters = [];
​
        // If the filters contain the clicked shape hide it
        filterValues.forEach(function (f) {
          if (f === e.aggField.slice(-1)[0]) {
            hide = true;
          } else {
            newFilters.push(f); 
          }
        });
​
        // Hide the shape or show it
        if (hide) {
          d3.select(this).style("opacity", 0.2);
        } else {
          newFilters.push(e.aggField.slice(-1)[0]);
          d3.select(this).style("opacity", 0.8);
        }
​
        // Update the filters
        filterValues = newFilters;
​
        // Filter the data
        if (isPerCapita) {
          var perCapitaData = dimple.filterData(data, "state", filterValues);
          myChart.data = dimple.filterData(perCapitaData, "Per Capita", ["TRUE"]);
        } else {
          myChart.data = dimple.filterData(agregateData, "state", filterValues);
        }
        myChart.draw(800);
      });
​
      // set all legend rectangles to opacity of 0.2
      myLegend.shapes.selectAll("rect").style("opacity", 0.2);
​
      // on load default data series 
      filterValues = ["California", "Texas", "Florida", "New York", "Pennsylvania"]; 
​
      // Set chart data to default data series
      myChart.data = dimple.filterData(agregateData, "state", filterValues);
​
      myLegend.shapes.selectAll("rect").each(function(d) {
        if (this.getAttribute("class") === "dimple-legend dimple-legend-key dimple-texas dimple-custom-legend-key dimple-custom-format-2"
          || this.getAttribute("class") === "dimple-legend dimple-legend-key dimple-florida dimple-custom-legend-key dimple-custom-format-3" 
          || this.getAttribute("class") === "dimple-legend dimple-legend-key dimple-california dimple-custom-legend-key dimple-custom-format-1"
          || this.getAttribute("class") === "dimple-legend dimple-legend-key dimple-new-york dimple-custom-legend-key dimple-custom-format-4"
          || this.getAttribute("class") === "dimple-legend dimple-legend-key dimple-pennsylvania dimple-custom-legend-key dimple-custom-format-5") { 
            d3.select(this).style("opacity", 0.8);
        } 
      }); 
​
      toggle_data = [
        { "Timeframe":"Total","Height":1},
        { "Timeframe":"Per Capita","Height":1}
      ];
​
      drawToggles();
      //styleGraph();
      
      x.shapes.selectAll("*").style("fill", "white");
      y.shapes.selectAll("*").style("fill", "white");
        x.titleShape.style("fill","white"); 
        //x.shapes.selectAll("*").style("stroke", "white");
        //y.shapes.selectAll("*").style("stroke", "white");
        myLegend.shapes.selectAll("text").style("fill", "white");
      
      myLegend.shapes.selectAll("rect").each(function(d) {
        console.log(this.getAttribute("rx"));  
      });
      
      /*
      var legendRectangles = myLegend.shapes.selectAll("rect");
      console.log(legendRectangles);
      legendRectangles.forEach(function (f) {
        //f.attr("rx", 10); 
        //f.attr("ry", 10); 
      });
      */
      //myChart.shapes.selectAll("text").style("fill", "white");
      /*
      x.shapes.selectAll("titleShape").style("fill", "white");
            x.titleShape.style("stroke", "white");
      x.shapes.selectAll("path").style("stroke", "rbg(255, 255, 255)"); 
      x.shapes.select("path.dimple-custom-axis-line").style("stroke", "white");
      */
​
      //myChart.shapes.selectAll("text").style("fill", "white");
      //myChart.axes[0].titleShape
        //  .style("fill", "white");
      /*
      x.shapes.selectAll("line").each(function (d) {
                d3.select(this)
                    .style("stroke", "white");
                    console.log(this);
            });
      */
      function capitalizeAxisTitles(chart) {
        for (i = 0; i< chart.axes.length; i++) {
        chart.axes[i].titleShape
          .style("font-weight", "bold")
          .style("font-size", "14px");
        }
    }
      capitalizeAxisTitles(myChart);
      
      
      
      
      // For some reason this line is necesary for the toggles to render - to investigate
      myChart.draw(); 
 
      // Remove tooltip from toggles chart
      function onHover(e) {
      }
​
      // On click of the toggles 
      function onClick(e) {
        if (isPerCapita) {
          isPerCapita = false;
        } else {
          isPerCapita = true;
        }
        
        // change color toggles
        toggleSeries.shapes
            .transition()
          .duration(500)
          .style("fill", function (d) { return (d.x === e.xValue ? indicatorColor.fill : defaultColor.fill) })
            .style("stroke", function (d) { return (d.x === e.xValue ? indicatorColor.stroke : defaultColor.stroke) })
        
        // Reset legend listeners to null in order to accomodate 
        // listeners for newly toggled data
        // Could potential refactor this functionality into original
        // legend listeners with boolean filterValues
        //myLegend.shapes.selectAll("rect").on("click",null);
        var newData;
        if (e.xValue === "Per Capita") {
          newData = dimple.filterData(data, e.xValue, ["TRUE"]);
        } else {
          newData = dimple.filterData(data, "Per Capita", ["FALSE"]);
        } 
        newData = dimple.filterData(newData, "state", filterValues);
        myChart.data = newData;
        myChart.ease = "cubic";
        myChart.draw(800);
        
         
​
        /*
        myLegend.shapes.selectAll("rect").on("click", function (e) {
          // This indicates whether the item is already visible or not
          var hide = false;
          var newFilters = [];
          // If the filters contain the clicked shape hide it
          filterValues.forEach(function (f) {
            if (f === e.aggField.slice(-1)[0]) {
                hide = true;
            } else {
                newFilters.push(f); 
            }
          });
​
          // Hide the shape or show it
          if (hide) {
            d3.select(this).style("opacity", 0.2);
          } else {
            newFilters.push(e.aggField.slice(-1)[0]);
            d3.select(this).style("opacity", 0.8);
          }
​
          // Update the filters
          filterValues = newFilters;
​
          // Filter the data
          myChart.data = dimple.filterData(newData, "state", filterValues);
          myChart.draw(800);
        });
        */
​
        //myChart.draw(800);
      }
​
      function drawToggles() {
        // Create the toggles
        toggles = new dimple.chart(svg, toggle_data);
        var defaultColor = new dimple.color("rgb(245, 245, 245)", "#226d9e", 1);
        var indicatorColor = new dimple.color("#08d6be", "#08d6be", 1);
​
        // Place the toggles bar chart just below title
        toggles.setBounds("75%", "85%", 200, 20);
​
        var toggleX = toggles.addCategoryAxis("x", "Timeframe");
        var toggleY = toggles.addMeasureAxis("y", "Height");
        toggleY.hidden = true;      
​
        // Add the bars to the toggles and add event handlers
        toggleSeries = toggles.addSeries(null, dimple.plot.bar);
        toggleSeries.barGap = 0.08;
        toggleSeries.addEventHandler("mouseover", onHover);
        toggleSeries.addEventHandler("click", onClick)
​
        // Draw toggles
        toggles.draw();
​
        // Manually set the bar colors
        toggleSeries.shapes
          .attr("rx", 10)
          .attr("ry", 10)
          .style("fill", function (d) { return (d.x === 'Total' ? indicatorColor.fill : defaultColor.fill) })
          .style("stroke", function (d) { return (d.x === 'Total' ? indicatorColor.stroke : defaultColor.stroke) })
          .style("opacity", 0.4);
​
          moveToggleLabels(toggleX);
       }
​
       function moveToggleLabels(toggleX) {
            // remove x axis marks and title
          toggleX.titleShape.remove();
          toggleX.shapes.selectAll("line,path").remove();
​
          // Move the x axis text inside the plot area
          toggleX.shapes.selectAll("text")
              .style("font-size", "12px")
                .style('fill', 'white')
              .attr("transform", function(d, i) {
                return "translate(" + (1 + 4*i) + " -22.5)" 
          });
        } 
      });
    
    
        function styleGraph(chart, legend) {
        //var x = 
        x.shapes.selectAll("*").style("fill", "white");
        y.shapes.selectAll("*").style("fill", "white");
        x.titleShape.style("fill","white"); 
        //x.shapes.selectAll("*").style("stroke", "white");
        //y.shapes.selectAll("*").style("stroke", "white");
        myLegend.shapes.selectAll("text").style("fill", "white");
      }
​
      // Add a method to draw the chart on resize of the window
      window.onresize = function () {
        // As of 1.1.0 the second parameter here allows you to draw
        // without reprocessing data.  This saves a lot on performance
        // when you know the data won't have changed.
        myChart.draw(0, true);      
      }
    </script>
  </div>
</html>
    