visualization_makeover

<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>

Modified http://d3js.org/d3.v3.min.js to a secure url

Modified http://dimplejs.org/dist/dimple.v2.0.0.min.js to a secure url

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

https://dimplejs.org/dist/dimple.v2.0.0.min.js