D3 Examples - Top Trump Tweets Table 2

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>
    <script src="https://cdn.jsdelivr.net/npm/d3-jetpack@1.0.2/d3-jetpack.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700" rel="stylesheet" type="text/css">
    <style type="text/css">
      body { 
        font-family: Roboto, sans-serif; 
        font-weight: 300; 
        padding: 20px;
      }
      
      th, td { 
        padding: 3 1em 0.7ex 0;
      }
      
      th { 
        font-size: 12px;
        color: #999;
      }
      
      tr {
        animation: fadeInLeft 0.2s linear;
        animation-fill-mode: both;
      }
      
      .tooltip {
        background: #eee;
        box-shadow: 0 0 5px #999999;
        color: #333;
        display: none;
        font-size: 12px;
        font-weight: 400; 
        left: 130px;
        padding: 10px;
        position: absolute;
        text-align: center;
        top: 95px;
        width: 80px;
        z-index: 10;
      }
      
      td.tweet-text { 
        font-size: 13px;
        width: 55%;
      }
      
      td.created-at { 
        font-size: 14px;
        width: 12%;
        text-align: center;
      }
      
      td.citations {
        color: #12a59b;
        font-weight:bold;
        width: 11%;
        text-align: center;
      }
      
      td.citations p {
        border-bottom: 1.5px dotted;
        border-color: #0b031b;
      }
      
      td.citations span {
        color: #0b031b;
        font-weight:200;
        font-size:11px;
      }
      
      td.tweet-nums {
        color: #126fa5;
        font-weight:bold;
        width: 11%;
        text-align: center;
      }
      
      td.tweet-nums span {
        color: #0b031b;
        font-weight:200;
        font-size:11px
      }
      
      @-webkit-keyframes fadeInLeft {
           0% {
               opacity: 0;
               -webkit-transform: translateX(-20px);
           }
           100% {
               opacity: 1;
               -webkit-transform: translateX(0);
           }
      }
      
      @keyframes fadeInLeft {
           0% {
               opacity: 0;
               transform: translateX(-20px);
           }
           100% {
               opacity: 1;
               transform: translateX(0);
           }
     }
      
    </style>
    </head>
  <body>
    <div id="chartContainer" style="height: 14%">
      <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", "scroll");
        
        var toggles;
        d3.json("Top_Tweets_edited.json", function (data) {
          toggle_data = [
             { "Timeframe":"Since Election Day","Height":1},
             { "Timeframe":"Last 6 Months","Height":1},
             { "Timeframe":"Last 12 Months","Height":1}
          ];
          
          // 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("31%", "44%", "42%", "25px");
​
          var toggleX = toggles.addCategoryAxis("x", "Timeframe");
          toggleX.addOrderRule(["Since Election Day", "Last 6 Months", "Last 12 Months"])
          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(["Timeframe:"])
                  .enter()
                  .append("text")
                  .attr("x", '24%')
                  .attr("y", '60%' )
                  .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 === 'Since Election Day' ? indicatorColor.fill : defaultColor.fill) })
                  .style("stroke", function (d) { return (d.x === 'Since Election Day' ? indicatorColor.stroke : defaultColor.stroke) })
                  .style("opacity", 0.4);
​
          // add chart title
          svg.append("text")
           .attr("x", toggles._xPixels() + toggles._widthPixels() / 2)
           .attr("y", toggles._yPixels() - 15)
           .style("text-anchor", "middle")
           .style("font-family", "Roboto")
           .style("font-weight", "bold")
           .text("Trump's Greatest Twitter Hits in the Media");
          
          // 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", toggles._widthPixels()*1.87)
            .attr("y", toggles._heightPixels()/2)
            .attr("width", toggles._widthPixels()/2)
            .attr("height", toggles._heightPixels()*1.85);
          
          // 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", '6%')
            .attr("y", '1.6%')
            .attr("width", toggles._widthPixels()/3)
            .attr("height", toggles._heightPixels()*2.7);
            
          // column definitions
          var columns = [
              { head: 'TWEET', cl: 'tweet-text', html: ƒ('tweet_text') },
              { head: 'DATE', cl: 'created-at', html: function(d) {
                var date_array = d.date_created.split(" ");
                var date = date_array[0] + " " + date_array[1] + " " + date_array[2];
    return date } },
              { head: '# OF MEDIA CITATIONS', cl: 'citations', html:  function(d) {
    return "<p>" + d.count_of_citations + "<span> citations</span></p>" }},
              { head: '# OF RETWEETS', cl: 'tweet-nums', html: function(d) {
    return d3.format(',')(d.retweet_count) + "<span> retweets</span>" }},
              { head: '# OF FAVORITES', cl: 'tweet-nums', html: function(d) {
    return d3.format(',')(d.favorite_count) + "<span> favorites</span>" }}
          ];
​
          // create table
          var table = d3.select("body")
                .append("table")
          var tooltip = d3.select('body')
                .append('div')
                .attr('class', 'tooltip');    
​
          // create table header
          table.append('thead').append('tr')
              .selectAll('th')
              .data(columns).enter()
              .append('th')
              .attr('class', ƒ('cl'))
              .style('border', '1px solid #ddd')
              .style('border-top-style', 'hidden')
              .style('border-left-style', 'hidden')
              .style('border-right-style', 'hidden')
              .text(ƒ('head'));
​
          // filter data for main table
          var filteredData = dimple.filterData(data, "timeframe", "Since Election Day");
          addTableRows(filteredData);
          
          // Remove tooltip from toggles
          function onHover(e) {
          }
        
          // On click of the toggles
          function onClick(e) {
            // 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();
            d3.select("body").select("tbody").remove();
            var newData = dimple.filterData(data, "timeframe", e.xValue)
            addTableRows(newData);
          }
          
          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")
                .style("font-weight", 500)
              .attr("transform", function(d, i) {
                        return "translate(" + (-55 + 5*i) + ", -25)" 
                })
          }
          
          function addTableRows(newData) {
            // create table body
            table.append('tbody')
              .selectAll('tr')
              .data(newData).enter()
              .append('tr')
              .each(function(d, i) {
                    d3.select(this).style('animation-delay', i*0.1 + 's');
                })
              .on("mouseover", function(d){
                    //var sorted_outlets = d.media_outlets.sort();
                    //var final_string = ''
                  //for (var i=0; i<=sorted_outlets; i++) {
                  //  console.log(sorted_outlets[i] + '<br/>')
                  //  final_string += sorted_outlets[i] + '<br/>';
                  //}
                    tooltip.text(d.media_outlets.sort()); 
                    return tooltip.style("display", "block");
                })
                    .on("mousemove", function(){
                    return tooltip.style("top", (d3.event.pageY-10)+"px").style("left",(d3.event.pageX+10)+"px");
                })
                    .on("mouseout", function(){
                    return tooltip.style("display", "none");})
              .selectAll('td')
              .data(function(row, i) {
                  return columns.map(function(c) {
                      // compute cell values for this specific row
                      var cell = {};
                      d3.keys(c).forEach(function(k) {
                          cell[k] = typeof c[k] == 'function' ? c[k](row,i) : c[k];
                      });
                      return cell;
                  });
              }).enter()
              .append('td')
              .html(ƒ('html'))
              .attr('class', ƒ('cl'))
              .style('border-bottom', '1px solid #ddd')
          }
        });
        
        // 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.
          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")
            .style("font-weight", 500)
            .attr("transform", function(d, i) {
                    return "translate(" + (-55 + 5*i) + ", -25)" 
            })
        };
​
      </script>
    </div>
  </body>
</html>
    