D3 Examples - visualization

xxxxxxxxxx
 
<html>
<head>
  <meta charset="utf-8">
   <script src="https://d3js.org/d3.v3.min.js"></script>
  <script src="https://dimplejs.org/dist/dimple.v2.0.0.min.js"></script>
  <style>
  rect.dimple-low {
    //fill:#4D4D4D;
    //stroke:#4D4D4D;
    fill:black;
    stroke:black;
    opacity:"0";
    padding:10em;
  }
    #header {
    width: 1050px;
     background-color: #e6550d;
     margin-left: 200px;
    }
  h2{
  width:400px;
  text-align: center;
  color:white;
  align:center;
  text-transform:uppercase;
 
  padding-left: 300px;
  padding-right: 100px;
  } 
  body  {
  #background-color:#4D4D4D;
  background-color:black;
  }
 
 svg.g.chart{
 align:center;
 }
 
/*rect.dimple-difference        {
 fill: #000099;
 stroke: #2b8cbe; 
 }
 
 rect.dimple-difference     {
 fill: #F15854;
 stroke: #fc9272; 
 }*/
 rect.dimple-difference     {
 fill: #e6550d;
 stroke: #FAA43A; 
 }
 /*rect.dimple-difference       {
 fill: #3182bd;
 stroke: #2b8cbe; 
 }*/
  
  </style>
  <script type="text/javascript">
      function draw(data) {
             "use strict";
          var margin = 200,
              width = 1500 - margin,
              height = 900 - margin;
​
             
        d3.select('body').append('div').attr('id','header').append('h2').text('Top 10 salaries at Google')
        
          var svg = d3.select("body")
            .append("svg")
              .attr("width", width + margin)
              .attr("height", height + margin)
            .append('g')
                .attr('class','chart');
      
      var myChart = new dimple.chart(svg, data);
      //myChart.setBounds(350, 50, 700, 450)
      myChart.setBounds(400, 50, 850, 500)
      var x = myChart.addMeasureAxis("x", "Salary");
      var y = myChart.addCategoryAxis("y", "Profile");
      y.addOrderRule("Rank",true)
      var mySeries = myChart.addSeries("Channel", dimple.plot.bar);
​
      myChart.draw();
    // x.shapes.selectAll("text").attr("transform", "rotate(-25)");
    // y.shapes.selectAll("text").attr("transform", "rotate(-25)");
      d3.selectAll('text').style({'font-size':'11px','fill':'white'}); 
      d3.selectAll('text.dimple-title').style('font-size','13px');
     // d3.selectAll('text.dimple-title').attr('y','220')
      mySeries.getTooltipText = function(e) {
        var salary = Math.round(e.xValue * 1000) / 1000;
            if(e.aggField[0]=="Difference") {
                salary+=e.x;
            }
            return [ "Profile: " + e.y,"Salary:  $" + salary];
        };
        
      }
     
      </script>
  </head>
<body>
  <script type="text/javascript">
    d3.csv("google_salary_groups.csv", draw);
  </script>
</body>
</html>
 </html>
 
    