D3 Examples - vertical bar showing the number of features for each dataset (each bar represents a dataset)

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Loading CSV Data with D3</title>
        <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
    </head>
    <body>
​
        
​
        <script type="text/javascript">     
​
            var svg = d3.select("body")
                        .append("svg")
                        .attr("width", 1300)
                        .attr("height", 400);
            
            //Load in contents of CSV file
            d3.csv("123 datasets.csv", function(data) {
​
            rect=svg.selectAll("rect")
            .data(data)
            .enter()
            .append("rect")
            
            rect.attr("x",function(d,i){
                return i*10;
            })
            .attr("height",function(d){
                return d.nVars;
            })
            .attr("y",30)
            .attr("width",8)
            .attr("fill","green")
            .append("title")
            .text(function(d){
                return d.RelationName
            })
            });
            
            d3.select("body")
            .append("p")
            .text("Each bar corresponds to an experiment (scroll over for experiment title) and the height of the bar corresponds to the number of features being studied in that experiment")
        </script>
​
    </body>
</html>
    