README.md

## README.md

      
          Raw
        
        
              README.md
            
          
    Built with blockbuilder.org

Working through the book Getting Started with D3

  
## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width:100%; height: 100% }
          div.chart{
            font-family:sans-serif;
            font-size:0.7em;
        }
        div.bar {
            background-color:DarkRed;
            color:white;
            height:3em;
            line-height:3em;
            padding-right:1em;
            margin-bottom:2px;
            text-align:right;
            margin-left:22em;
        }
        div.label {
            height:3em;
            line-height:3em;
            padding-right:1em;
            margin-bottom:2px;
            float:left;
            width:20em;
            text-align:right;
        }
  </style>
</head>

<body>
  <h1>Mean Daily Plaza Traffic</h1>
  <script>
    d3.json("plaza_traffic.json", draw);

    function draw(data) {
      d3.select("body")
        .append("div")
        .attr("class", "chart")
        .selectAll("div.line")
        .data(data.cash)
        .enter()
        .append("div")
        .attr("class","line");


      d3.selectAll("div.line")
        .append("div")
        .attr("class","label")
        .text(function(d){return d.name});

      d3.selectAll("div.line")
        .append("div")
        .attr("class","bar")
        .style("width", function(d){return d.count/100 + "px"})
        .text(function(d){return Math.round(d.count)});
		}
  </script>
</body>

## plaza_traffic.json
{
"cash": [
{
"count": 26774.09756097561,
"id": 1,
"name": "Robert F. Kennedy Bridge Bronx Plaza"
},
{
"count": 18612.77618364419,
"id": 2,
"name": "Robert F. Kennedy Bridge Manhattan Plaza"
},
{
"count": 31343.0631276901,
"id": 3,
"name": "Bronx-Whitestone Bridge"
},
{
"count": 9863.7658045977,
"id": 4,
"name": "Henry Hudson Bridge"
},
{
"count": 3805.8350071736013,
"id": 5,
"name": "Marine Parkway-Gil Hodges Memorial Bridge"
},
{
"count": 4577.186513629842,
"id": 6,
"name": "Cross Bay Veterans Memorial Bridge"
},
{
"count": 13830.994261119082,
"id": 7,
"name": "Queens Midtown Tunnel"
},
{
"count": 6900.047345767575,
"id": 8,
"name": "Brooklyn-Battery Tunnel"
},
{
"count": 25262.48493543759,
"id": 9,
"name": "Throgs Neck Bridge"
},
{
"count": 18275.3543758967,
"id": 11,
"name": "Verrazano-Narrows Bridge"
}
],
"electronic": [
{
"count": 51316.53802008608,
"id": 1,
"name": "Robert F. Kennedy Bridge Bronx Plaza"
},
{
"count": 67502.12482065997,
"id": 2,
"name": "Robert F. Kennedy Bridge Manhattan Plaza"
},
{
"count": 76906.89383070302,
"id": 3,
"name": "Bronx-Whitestone Bridge"
},
{
"count": 51861.5933908046,
"id": 4,
"name": "Henry Hudson Bridge"
},
{
"count": 17488.73888091822,
"id": 5,
"name": "Marine Parkway-Gil Hodges Memorial Bridge"
},
{
"count": 16056.855093256814,
"id": 6,
"name": "Cross Bay Veterans Memorial Bridge"
},
{
"count": 65148.13916786227,
"id": 7,
"name": "Queens Midtown Tunnel"
},
{
"count": 38908.203730272595,
"id": 8,
"name": "Brooklyn-Battery Tunnel"
},
{
"count": 84575.18794835007,
"id": 9,
"name": "Throgs Neck Bridge"
},
{
"count": 74291.31420373028,
"id": 11,
"name": "Verrazano-Narrows Bridge"
}
]
}

## thumbnail.png

      
          Raw
        
        
              thumbnail.png