D3 Examples - Trump vs Cruz responsive dimple plot

xxxxxxxxxx
 
<html>
<div id="chartContainer">
  <style>
    h2 {
      text-align: center;
      font-size: 20px;
      font-family: : sans-serif;
    }
    text.dimple-title {
      font-size: 20px;
    }
    svg {
      text-align: center;
      display: block;
      margin: auto;
    }
    text.dimple-axis {
      font-size: 15px;
    }
​
  </style>
  <script src="https://d3js.org/d3.v3.min.js"></script>
  <script src="https://dimplejs.org/dist/dimple.v2.1.6.min.js"></script>
  <script type="text/javascript">
    var margin = 100,
    width = 1000 - margin,
    height = 600 - margin;
​
    // adding a header to the chart
    d3.select("body").append("h2")
      .text("Comparison of tweet mentions of Donald Trump Vs. Ted Cruz(Ignoring tweets mentioning both) - Feb 07, 2016");
    var svg = dimple.newSvg("body", width, height);
​
    d3.csv("tweets.csv", function (data) {
      // Latest period only
      data = dimple.filterData(data, "TrumpVsCruz", ["Trump", "Cruz"]);
      // Create the chart
      var myChart = new dimple.chart(svg, data);
​
      // Create a standard bubble of SKUs by Price and Sales Value
      // We are coloring by Owner as that will be the key in the legend
      var x = myChart.addCategoryAxis("x", "Time_15mins");
      x.addOrderRule(["14:18", "14:33", "14:48", "15:03", "15:33", "15:48", "16:03", "16:18",
                      "16:33", "16:48", "17:03", "17:18", "17:33", "17:48", "18:03", "18:18",
                      "18:33", "18:48"])
      var y = myChart.addMeasureAxis("y", "count");
      var s = myChart.addSeries("TrumpVsCruz", dimple.plot.line);
      x.title = "Time bins - 14:18 hours to 19:00 hours (15 minutes wide)";
      y.title = "Count of tweets";
      x.fontSize = "auto";
      y.fontSize = "auto";
​
      s.interpolation = "cardinal";
      var myLegend = myChart.addLegend(50, 10, 770, 50, "right");
      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 = [];
​
      // This block simply adds the legend title. I put it into a d3 data
      // object to split it onto 2 lines.  This technique works with any
      // number of lines, it isn't dimple specific.
      svg.selectAll("title_text")
        .data(["Click legend boxes to","show/hide candidates:"])
        .enter()
        .append("text")
          .attr("x", 500)
          .attr("y", function (d, i) { return 15 + i * 14; })
          .style("font-family", "sans-serif")
          .style("font-size", "14px")
          .style("color", "Black")
          .style("font-weight", "bold")
          .text(function (d) { return d; });
​
      // Get a unique list of Owner values to use when filtering
      var filterValues = dimple.getUniqueValues(data, "TrumpVsCruz");
      // Get all the rectangles from our now orphaned legend
      myLegend.shapes.selectAll("rect")
        // Add a click event to each rectangle
        .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(data, "TrumpVsCruz", filterValues);
          // Passing a duration parameter makes the chart animate. Without
          // it there is no transition
          myChart.draw(800);
        });
​
    });
​
  </script>
</div>
</html>
​
    