Old school D3 from simpler times

All examples By author By category About

jackbeckwith

Full window Github gist

Top Trump Tweets Table

Built with blockbuilder.org

<!DOCTYPE html>
<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,200,300,600,700"
         rel="stylesheet" type="text/css">
  <script src="https://d3js.org/d3.v3.min.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/pmsi-alignalytics/scrollgrid/dist/scrollgrid.latest.js"></script>
  
  <style>
    .sg-resize-handle {
      fill: #777;
      opacity: 0;
      cursor: col-resize;
    }
    .sg-resize-handle:hover {
      fill: #777;
      opacity: 0.5;
    }
    .sg-grid rect {
      fill: #ffffff;
      stroke: #d8d8d8;
    }
    .sg-grid text {
      font-family: Roboto, sans-serif;
      color: #142733;
      font-size: 12px;
      
    }
    
    .sg-fixed text {
      font-size: 14px;
      font-weight: bold;
    }
    
    .sg-fixed rect {
      fill: #f7f7f7;
      stroke: #f7f7f7;
    }
    
    .my-cool-class {
      text-decoration: underline;
    }
    
	</style>
</head>

<body>
  <div id="myTable" style="height:100%;width:100%;"></div>
  <div id="chartContainer"> 
      <script type="text/javascript">
          var sg = new Scrollgrid.init('#myTable', {
              headerRows: 1,
          });
          
        	d3.json("Fake_Top_Trump_Tweets.json", function (data) {

sg.data(Scrollgrid.adapters.json(data, ['tweet_text', 'created_at', 'Count of Citations', 'Retweet Count', 'Favorite Count']));
       		});
        		sg.on("mouseover", function (d) {
                sg.addFormatRules({ row: d.rowIndex + 1, column: d.columnIndex + 1, foregroundStyle: "my-cool-class" });
        });
        
          sg.refresh(true);
      </script>
  </div>
</body>

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <link href="https://fonts.googleapis.com/css?family=Roboto:100,200,300,600,700"
         rel="stylesheet" type="text/css">
  <script src="https://d3js.org/d3.v3.min.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/pmsi-alignalytics/scrollgrid/dist/scrollgrid.latest.js"></script>
  
  <style>
    .sg-resize-handle {
      fill: #777;
      opacity: 0;
      cursor: col-resize;
    }
    .sg-resize-handle:hover {
      fill: #777;
      opacity: 0.5;
    }
    .sg-grid rect {
      fill: #ffffff;
      stroke: #d8d8d8;
    }
    .sg-grid text {
      font-family: Roboto, sans-serif;
      color: #142733;
      font-size: 12px;
      
    }
    
    .sg-fixed text {
      font-size: 14px;
      font-weight: bold;
    }
    
    .sg-fixed rect {
      fill: #f7f7f7;
      stroke: #f7f7f7;
    }
    
    .my-cool-class {
      text-decoration: underline;
    }
    
    </style>
</head>
​
<body>
  <div id="myTable" style="height:100%;width:100%;"></div>
  <div id="chartContainer"> 
      <script type="text/javascript">
          var sg = new Scrollgrid.init('#myTable', {
              headerRows: 1,
          });
          
            d3.json("Fake_Top_Trump_Tweets.json", function (data) {
​
            sg.data(Scrollgrid.adapters.json(data, ['tweet_text', 'created_at', 'Count of Citations', 'Retweet Count', 'Favorite Count']));
            });
                sg.on("mouseover", function (d) {
                sg.addFormatRules({ row: d.rowIndex + 1, column: d.columnIndex + 1, foregroundStyle: "my-cool-class" });
        });
        
          sg.refresh(true);
      </script>
  </div>
</body>
    

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

Updated missing url https://rawgit.com/PMSI-AlignAlytics/scrollgrid/master/dist/scrollgrid.latest.js to https://cdn.jsdelivr.net/gh/pmsi-alignalytics/scrollgrid/dist/scrollgrid.latest.js

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

https://rawgit.com/PMSI-AlignAlytics/scrollgrid/master/dist/scrollgrid.latest.js