dist_market_inc_2011

by kevinp

HTML

<!DOCTYPE html>
<body>
    <div>
        <p><strong>Market Income, by Market Income Group, 2011<strong></p>
        <!-- <button class="btn btn-mini" id="button">Click for Details</button> -->
           
        <svg class="chart"></svg>
    </div>
    
</body>

CSS

svg.chart {
    background-color: white;
    text-align: right;
    padding: 25px;
    margin: 15px;
   /* border-style: solid;
    border-width: 1px; */
}

svg.chart2 {
    background-color: white;
    text-align: right;
    padding: 25px;
    margin: 10px;
  /*  border-style: solid;
    border-width: 1px; */
}


rect {
  fill: rgb(79, 132, 79);
  stroke: rgb(79, 132, 79);
}

#button {position:absolute;top:70px;left:430px;}


rect:hover{
  stroke: black;
}

.chart text {
  fill: black;
  font: 12px sans-serif;
  text-anchor: middle;
}

.chart2 text {
  fill: black;
  font: 12px sans-serif;
  text-anchor: middle;
}



.axis text {
  font: 12px sans-serif;
}

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

.btn { display:inline-block;
      *display:inline;
      /* IE7 inline-block hack */ 
      *zoom:1;
      padding:4px 10px 4px;
      margin-bottom:0;
      font-size:13px;
      line-height:18px;
      color:#333333;
      text-align:center;
      text-shadow:0 1px 1px rgba(255,255,255,0.75);
      vertical-align:middle;
      background-color:#f5f5f5;
      background-image:-moz-linear-gradient(top,#ffffff,#e6e6e6);
      background-image:-ms-linear-gradient(top,#ffffff,#e6e6e6);
      background-image:-webkit-gradient(linear,0 0,0 100%,from(#ffffff),to(#e6e6e6));
      background-image:-webkit-linear-gradient(top,#ffffff,#e6e6e6);
      background-image:-o-linear-gradient(top,#ffffff,#e6e6e6);
      background-image:linear-gradient(top,#ffffff,#e6e6e6);
      background-repeat:repeat-x;
      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#e6e6e6',GradientType=0);
      border-color:#e6e6e6 #e6e6e6 #bfbfbf;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
      filter:progid:dximagetransform.microsoft.gradient(enabled=false);
      border:1px solid #cccccc;
      border-bottom-color:#b3b3b3;
      -webkit-border-radius:4px;
     ...

JavaScript

// Set dimensions of chart
var margin = {top: 20, right: 30, bottom: 30, left: 40},
    width = 500 - margin.left - margin.right,
    height = 300 - margin.top - margin.bottom;

var y = d3.scale.linear()
    .range([height, 0]);

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .ticks(8)
    .tickSize(-6, -6);

var x = d3.scale.ordinal()
    .rangeBands([0, width + 5]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .tickSize(0, 0);


  var data = [
      {class: "Quintile 1", value: 7900, string_val:"$7,900"},
      {class: "Quintile 2", value: 31100, string_val:"$31,100"},
      {class: "Quintile 3", value: 55400, string_val:"$55,400"},
      {class: "Quintile 4", value: 89600, string_val:"$89,600"},
      {class: "Quintile 5", value: 240800, string_val:"$240,800"}
      ];
  
  var data2 = [
      {class: "Quintile 1", value: 7900, string_val:"$7,900"},
      {class: "Quintile 2", value: 31100, string_val:"$31,100"},
      {class: "Quintile 3", value: 55400, string_val:"$55,400"},
      {class: "Quintile 4", value: 89600, string_val:"$89,600"},
      {class: "Quintile 5", value: 132400, string_val:"$132,400"},
      {class: "Quintile 5", value: 180900, string_val:"$180,900"},
      {class: "Quintile 5", value: 293000, string_val:"$293,000"},
      {class: "Quintile 5", value: 1447500, string_val:"$1,447,500"}
      ];


var chart = d3.select(".chart")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  x.domain(data.map(function(d) { return d.class; }));
  //y.domain([0, d3.max(data, function(d) { return d.value; })]);
  y.domain([0, 250000]);
  
  var barWidth = width / data.length;
    
  var bar = chart.selectAll("g")
      .data(data)
      .enter()
      .append("g")
      .attr("transform", function(d, i) { return "translate("+ (5 + (i * barWidth)) + ",0)"; });

 ...