D3 Examples - d3intro

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <link href="https://fonts.googleapis.com/css?family=Montserrat|Open+Sans:300" rel="stylesheet">
  <style>
      p {
    margin: 0px 0px 0px 20px;
    font-family: 'Montserrat';
    font-size: 1.93em;
    font-weight: normal;
  }
​
  text {
    font-family: 'Montserrat';
    font-size: 14px;
    font-weight: normal;
  }
​
  .bar {
    fill:  #0072c8;
  }
​
  .bar:hover {
    fill: #968C83;
  }
​
  .y path, .y stroke, .y line {
    display: none;
  }
​
  .x path, .x stroke {
    display: none;
    shape-rendering: crispEdges;
  }
​
  .y text {
    font-family: 'Open Sans';
    font-size: 14px;
    text-anchor: middle;
  }
​
  .x text {
    font-family: 'Open Sans';
    font-size: 10px;
    text-anchor: middle;
  }
  </style>
</head>
<body>
  <p>Relative frequencices of the letters of the English language</p>
  <script>
    var margin = {
      top: 20,
      right: 20,
      bottom: 30,
      left: 40
    };
​
    var width = 960 - margin.left - margin.right;
    var height = 500 - margin.top - margin.bottom;
​
    var svg = d3.select("body").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
      .append("g")
        .attr("transform", "translate(" + margin.left + ","    + margin.top + ")");
    
    var x = d3.scaleLinear()
      .range([0, width]);
​
        var y = d3.scaleBand()
    .range([height, 0]);
    
    var xAxis = d3.axisTop(x)
    .ticks(10, "%");
​
        var yAxis = d3.axisLeft(y);
    
    d3.csv("data.csv", function(error, data) {
        if (error) throw error;
        
    console.log(data);
    data.forEach(function(d) {
    return d.frequency = +d.frequency;
    });
​
    data.sort(function(a, b) {
        return a.frequency - b.frequency;
    });
    x.domain([0, d3.max(data, function(d) { return              d.frequency; })]);
​
        y.domain(data.map(function(d) { return d.letter;    })).paddingInner(0.1);
    
      svg.append("g")
    .attr("class", "y axis")
    .attr("transform", "translate(-3, 0)")
    .call(yAxis);
​
        svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0,-3)")
    .call(xAxis);
      
    svg.selectAll(".bar")
    .data(data)
  .enter().append("rect")
    .attr("class", "bar")
    .attr("x", '-5')
    .attr("height", y.bandwidth())
    .attr("y", function(d) { return y(d.letter); })
    .attr("width", function(d) { return x(d.frequency);})
    .attr("title", function(d){ return d.frequency});
  
    
  });
    
    
    
 
  </script>
</body>
    