D3 Examples - Trump Twitter References Over Time

xxxxxxxxxx
 
<html>
  <head>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="https://dimplejs.org/dist/dimple.v2.3.0.min.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700" rel="stylesheet" type="text/css">
    </head>
  <body>
    <div id="chartContainer" style="height: 100%">
      <script type="text/javascript">
        // In version 1.1.0 it's possible to initialise any size parameter with a
        // % value as well as pixels
        var svg = dimple.newSvg("#chartContainer", "100%", "100%");
        
        d3.select("html")
          .style("height", "100%")
          .style("overflow", "hidden");
        d3.select("body")
          .style("height", "100%")
          .style("overflow", "hidden");
        
        // Set up a standard chart
        var myChart;
        var toggles;
        d3.csv("Twitter_References_Over_Time.csv", function (data) {
          toggle_data = [
             { "Aggregation Level":"Monthly","Height":1 },
             { "Aggregation Level":"Weekly","Height":1 },
             { "Aggregation Level":"Daily","Height":1 }
          ];
          
          console.log(Object.keys(toggle_data[0]));
          
          // Create the toggles
          var toggles = new dimple.chart(svg, toggle_data);
          var defaultColor = new dimple.color("rgb(245, 245, 245)", "#226d9e", 1);
          var indicatorColor = new dimple.color("#226d9e", "#226d9e", 1);
​
          // Place the toggles bar chart just below title
          toggles.setBounds("32%", "9%", "40%", "25px");
​
          var toggleX = toggles.addCategoryAxis("x", "Aggregation Level");
          toggleX.addOrderRule(["Monthly", "Weekly", "Daily"])
          var toggleY = toggles.addMeasureAxis("y", "Height");
          toggleY.hidden = true;
​
          // Add the bars to the toggles and add event handlers
          var toggleSeries = toggles.addSeries(null, dimple.plot.bar);
          toggleSeries.barGap = 0.08;
          toggleSeries.addEventHandler("mouseover", onHover);
          toggleSeries.addEventHandler("click", onClick)
          
          // Draw toggles
          toggles.draw();
          moveToggleLabels();
                  
          // Position text directly beside toggles
          svg.selectAll("title_text")
                  .data(["View data:"])
                  .enter()
                  .append("text")
                  .attr("x", '25%')
                  .attr("y", '11.4%' )
                  .style("font-family", "Roboto")
                  .style("font-size", "10px")
                  .style("color", "Black")
                  .text(function (d) { return d; });
​
          // Manually set the bar colors
          toggleSeries.shapes
                  .attr("rx", 10)
                  .attr("ry", 10)
                  .style("fill", function (d) { return (d.x === 'Monthly' ? indicatorColor.fill : defaultColor.fill) })
                  .style("stroke", function (d) { return (d.x === 'Monthly' ? indicatorColor.stroke : defaultColor.stroke) })
                  .style("opacity", 0.4);
          
          var filteredData = dimple.filterData(data, "Aggregation Level", "Monthly")
          myChart = new dimple.chart(svg, filteredData);
​
          // add chart title
          svg.append("text")
           .attr("x", myChart._xPixels() + myChart._widthPixels() / 2)
           .attr("y", myChart._yPixels() - 20)
           .style("text-anchor", "middle")
           .style("font-family", "Roboto")
           .style("font-weight", "bold")
           .text("Percent of Articles about Trump that Mention his Twitter Activity");
          
          // add DataFace watermark in upper right corner
          svg.append("svg:image")
            .attr("xlink:href", "https://thedataface.com/wp-content/uploads/2015/10/Data-Face_logo-300x90.png")
            .attr("x", myChart._widthPixels())
            .attr("width", myChart._widthPixels()/5)
            .attr("height", myChart._heightPixels()/6);
          
          // add Donald Trump's face in upper left
          svg.append("svg:image")
            .attr("xlink:href", "https://www.latimes.com/projects/la-na-pol-presidential-debate-primer/static/img/trump-cutout.png")
            .attr("x", 0)
            .attr("y", '1.6%')
            .attr("width", myChart._widthPixels()/3)
            .attr("height", myChart._heightPixels()/6);
​
          // Fix the margins
          myChart.setMargins("7%", "18%", "3%", "15%");
          myChart.defaultColors = [new dimple.color("#3498db", "#2980b9", 1)]
          
          // Continue to set up a standard chart
          var xAxis = myChart.addTimeAxis("x", "Date");
          var yAxis = myChart.addMeasureAxis("y", "Percent of Articles");
          xAxis.fontSize = "auto";
          xAxis.fontFamily = "Roboto";
          xAxis.tickFormat = "%b" + " '" + '%y'
          yAxis.fontSize = "auto";
          yAxis.fontFamily = "Roboto";
          yAxis.tickFormat = ".0%";
          
          drawMainChart("Monthly");
          
          // Remove tooltip from toggles chart
          function onHover(e) {
          }
        
          // On click of the toggles
          function onClick(e) {     
            // clear chart area
            d3.selectAll('.dimple-chart:nth-child(3)').selectAll(".dimple-series-0").remove();
              myChart.series.splice(0, 1);
            
            // 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) })
            
            toggles.draw();
            moveToggleLabels();
            
            var newData = dimple.filterData(data, "Aggregation Level", e.xValue)
            myChart.data = newData;
            
            drawMainChart(e.xValue);
          }
          
          function moveToggleLabels() {
            // 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("text-anchor", "start")
              .style("font-size", "13px")
              .attr("transform", function(d, i) {
                    return "translate(" + (-24 + 5*i) + " -25)" 
            });
          }
          
          function drawMainChart(xValue) {
            var series = myChart.addSeries(null, dimple.plot.line);
            series.aggregate = dimple.aggregateMethod.avg;
            series.tooltipFontSize = "14px";
            series.tooltipFontFamily = "Roboto";
            
            if (xValue == 'Monthly') {
                series.lineWeight = 5;
            } else if (xValue == 'Weekly') {
              series.lineWeight = 3;
            } else {
              series.lineWeight = 2;
            }
​
            // Use a custom tooltip
            series.getTooltipText = function (v) {
              if (xValue == 'Monthly') {
                var dateParse = d3.timeFormat("%b. %Y");
                var firstLine = 'Month:  ' + dateParse(v.x);
              } else if (xValue == 'Weekly') {
                var dateParse = d3.timeFormat("%b. %d, %Y");
                var firstLine = 'Week of:  ' + dateParse(v.x);
              } else {
                var dateParse = d3.timeFormat("%b. %d, %Y");
                var firstLine = 'Date:  ' + dateParse(v.x);
              }
              
              var percentParse = d3.format(",.0%");
              return [
                  firstLine,
                  '% of Articles:  ' + percentParse(v.y),
              ];
          };
            
            myChart.draw(1000);
            
            xAxis.titleShape.style("font-weight", "bold");
            xAxis.titleShape.style("font-size", "14px");
            yAxis.titleShape.style("font-weight", "bold");
            yAxis.titleShape.style("font-size", "14px");
          }
        });
        
        // Add a method to draw the chart on resize of the window
        window.onresize = function () {
          myChart.draw(0,true)
          toggles.draw(0,true);
          
          // 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("text-anchor", "start")
            .style("font-size", "13px")
            .attr("transform", function(d, i) {
                    return "translate(" + (-24 + 5*i) + " -25)" 
            });
​
          xAxis.titleShape.style("font-weight", "bold");
          xAxis.titleShape.style("font-size", "14px");
          yAxis.titleShape.style("font-weight", "bold");
          yAxis.titleShape.style("font-size", "14px");
        };
​
      </script>
    </div>
  </body>
</html>
    