final

This is a simple bar graph written using d3.js v4.

This graph is part of the code samples for the update to the book D3 Tips and Tricks to version 4 of d3.js.

forked from d3noob's block: Simple bar graph in v4

<!DOCTYPE html>
<html lang="en">
<head>
  <title>CS590DV Final Project Visualization Template</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="https://dc-js.github.io/dc.js/css/bootstrap.min.css">
  <link rel="stylesheet" type="text/css" href="https://dc-js.github.io/dc.js/css/dc.css" />
  <script src="https://dc-js.github.io/dc.js/js/d3.js"></script>
  <script src="https://dc-js.github.io/dc.js/js/crossfilter.js"></script>
  <script src="https://dc-js.github.io/dc.js/js/dc.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/crossfilter/reductio/reductio.js"></script>
  <script src="https://npmcdn.com/universe@latest/universe.js"></script>
  <script src="https://www.lactame.com/lib/ml/2.0.0/ml.min.js"></script>
  
  <style> .dc-chart g.row text {fill: black;} 
    #ch1{
      width:425px;
      height:415px;
      margin: 1%;
      padding:0;
      border:0;
      align:center;
      float:left;
    }
    #ch2{
      width:425px;
      height:415px;
      margin: 1%;
      padding:0;
      border:0;
      float:left;    
    }
    #opt {
      width: 8em;
      font-size: 10px;
      margin: 2px;
      padding: 0px;
    }
    #sec {
      width: 30%;
      height:60px;
      float:left;
      font-size: 10px;
    }
    #annotate{
      width:100%;
      font-size:10px;
      color:black ;
      overflow:scroll; 
      height:120px
    }
    h1{
      align:center;
      color:crimson;
    }
    h2{
      align:center;
      color:crimson;
    }
    h5{
      font-size: 10px;
      margin: 2px;
      padding: 0px;      
    }  
    .dropdown {
      border: 1px solid #ccc;
      width: 8em;
      font-size: 10px;
      border-radius: 3px;
      overflow: visible;
    }
    input{
      width: 4.5em;
      font-size: 10px;
    }
    .form{
      width:10%;
    }
  </style>
</head>

<body><div class="container" style="width:1000">
  <div align="center"><h1 style="h1">CS590DV Final Project Visualization Template</h1></div>

// define dc charts
        var pieChart   = dc.pieChart("#piechart11"),
            histChart  = dc.barChart("#hist11"),
            rowChart = dc.rowChart("#hist21"),
            scatterplot=dc.scatterPlot("#scatter11"),
            heatmapChart = dc.heatMap("#heatmap11"),
            lineChart=dc.seriesChart("#line11");

// Render everything
        dc.renderAll();    
      }); 
    };
      
    draw_graphs();  
  </script>
</div></body>
</html>

Updated missing url https://rawgit.com/crossfilter/reductio/master/reductio.js to https://cdn.jsdelivr.net/gh/crossfilter/reductio/reductio.js

https://dc-js.github.io/dc.js/js/d3.js

https://dc-js.github.io/dc.js/js/crossfilter.js

https://dc-js.github.io/dc.js/js/dc.js

https://rawgit.com/crossfilter/reductio/master/reductio.js

https://npmcdn.com/universe@latest/universe.js

https://www.lactame.com/lib/ml/2.0.0/ml.min.js