D3 Examples - D3 Visualization

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>D3 Example</title>
    <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <link href='https://fonts.googleapis.com/css?family=Poiret+One' rel='stylesheet' type='text/css'>
    <style>
    
      .axis text {
        font: 16pt sans-serif;
        font-family: 'Poiret One', cursive;
      }
​
      .axis path, .axis line {
        fill: none;
        stroke: #000;
        shape-rendering: crispEdges;
      }
      .y.axis path, .y.axis line {
        stroke: none;
      }
​
    </style>
  </head>
  <body>
    <script>
​
      var outerWidth = 750;
      var outerHeight = 300;
      var rightWidth = 300;
      var leftHeight = 300;
      var margin = { left: 130, top: 0, right: 0, bottom: 30 };
      var barPadding = 0.2;
​
      // Columns in dataset
      var xColumn = "umsatz";
      var yColumn = "name";
      // Empty Array for calucaltion
      var difference;
​
      // Innerwidth and Height
      var innerWidth  = outerWidth  - margin.left - margin.right - rightWidth;
      var innerHeight = outerHeight - margin.top  - margin.bottom;
​
      // SVG Area Barchart
      var svg = d3.select("body").append("svg")
        .attr("width",  outerWidth)
        .attr("height", outerHeight);
      // SVG Barchart
      var g = svg.append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
      var xAxisG = g.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + innerHeight + ")");
      var yAxisG = g.append("g")
        .attr("class", "y axis");
​
      var xScale = d3.scale.linear().range(      [0, innerWidth]);
      var yScale = d3.scale.ordinal().rangeBands([0, innerHeight], barPadding);
​
      var xAxis = d3.svg.axis().scale(xScale).orient("bottom");
      var yAxis = d3.svg.axis().scale(yScale).orient("left");
      
      // yLine
      var gR = svg.append("g")
        .attr("transform", "translate(0," + margin.top + "," +margin.right + ")");
      // yLine
      var yLine = gR.append("g");
​
      // Rendering all Objects
      function render(data){
​
        calculate(data);
        
        //Barchart
        xScale.domain([0, d3.max(data, function (d){ return d[xColumn]; })]);
        yScale.domain(       data.map( function (d){ return d[yColumn]; }));
​
        xAxisG.call(xAxis);
        yAxisG.call(yAxis);
​
        g.selectAll("rect").data(data)
            .enter().append("rect")
          .attr("height", yScale.rangeBand())
            .attr("x", 0)
          .attr("y",     function (d){ return yScale(d[yColumn]); })
          .attr("width", function (d){ return xScale(d[xColumn]); })
        
        // yLine
        gR.selectAll("rect").data(data)
            .enter().append("rect")
            .attr("height", yScale.rangeBand() )
            .attr("width", 1)
            .attr("x", outerWidth - rightWidth / 2)
            .attr("y", function (d){ return yScale(d[yColumn]); });
        
        gR.append("line")
            .attr("x1", outerWidth - rightWidth / 2)
            .attr("y1", 0)
            .attr("x2", outerWidth - rightWidth / 2)
            .attr("y2", innerHeight)
            .attr("stroke-width", 2)
          .attr("stroke", "black");
      }
​
      // Gets the type back
      function type(d){
        d.xColumn = +d.xColumn;
        return d;
      }
      
      // Calcualtes the differences
      function calculate(d){
        difference = d.xColumn;
        console.log(d.xColumn);
      }
​
      d3.csv("data.csv", type, render);
​
    </script>
  </body>
</html>
    