Fatal Accidents 1976-2015 Per Capita (Refactored)

forked from azizkamoun's block: NHTSA Time Series

forked from azizkamoun's block: Fatal Accidents 1976-2015 Per Capita

forked from azizkamoun's block: Fatal Accidents 1976-2015 Per Capita (Refactored)

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

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>

Modified http://d3js.org/d3.v4.min.js to a secure url

Modified http://dimplejs.org/dist/dimple.v2.3.0.min.js to a secure url

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

https://dimplejs.org/dist/dimple.v2.3.0.min.js