Old school D3 from simpler times

All examples By author By category About

kmix27

Full window Github gist

Alpha Frequencies

Built with blockbuilder.org

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: auto;
  position: relative;
  width: 960px;
}

text {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

form {
  position: absolute;
  right: 10px;
  top: 10px;
}

</style>
</head>

<body>
  <script>

var width = 960;
    var height = 500;
    
    var xScale = d3. scaleLinear()
    .range([0,width]);
    d3.csv("alpha_frequencies.csv",function(error,dataset){
           dataset.forEach(function(d) {
      d.frequency = +d.frequency;
    });
    dataset.sort(function(a,b){
      return b.frequency - a.frequency;
    });
    var max_freq = d3.max(dataset, function(d){
      return d.frequency;
    })
    xScale.domain([0,max_freq]);
      var chart = d3.select("body")
      .append("svg")
      .attr("width",width)
      .attr("height", height);
      
   		var rects = chart.selectAll("rect")
      							.data(dataset);
      rects.enter()
      .append("rect")
      .attr("width", function(d){return xScale(d.frequency);})
      .attr("y", function(d,i){return i*20})
      .attr("height", 18)
      .style({fill: "steelblue"});
      
      rects.on("mouseover", function(d,i){
        d3.select(this).style("fill", "yellow");
      })
      rects.on("mouseout", function(d,i){
        d3.select(this).style("fill","steelblue")})
      
      
           });

</script>
</body>

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