House info list

by Ryan

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>

CSS

body {
    color: #333;
    font: 82% Arial,Verdana,sans-serif;
    line-height: 20px;
}
div.tile {
    width: 500px;
    height: 85px;
    border-bottom: 1px #eee solid;
    margin: 2px;
    padding: 2px;
}
div.info {
    height: 70px;
}
div.indicator {
    clear: both;
}
div.fragment {
    float: left;
}

.left {
    float: left;
}
.right {
    margin-left: 30px;
    float: left;
}

.address {
    height: 25px;
    color: #36b;
}
.price {
    font-size: 20px;
    font-weight: bold;
}

JavaScript

var color = d3.scale.category10();

var data = [
    {
        address: "1234 Sunny Circle, Ellicott City 21043",
        price: "$255,900",
        beds: "3",
        baths: "2.0",
        sqft: "1,574",
        lot: "0.39",
        age: "7"
    },
    {
        address: "111 Mayflower Drive, Ellicott City 21043",
        price: "$200,000",
        beds: "2",
        baths: "2.0",
        sqft: "1,010",
        lot: "0.98",
        age: "19"
    },
    {
        address: "1200 Goyer Court, Ellicott City 21043",
        price: "$221,800",
        beds: "3",
        baths: "2.0",
        sqft: "1,510",
        lot: "0.32",
        age: "5"
    },
    {
        address: "2124 Water Street, Ellicott City 21043",
        price: "$300,000",
        beds: "4",
        baths: "2.5",
        sqft: "1,802",
        lot: "0.54",
        age: "12"
    },
    {
        address: "1120 Ridge Road, Ellicott City 21043",
        price: "$284,900",
        beds: "3",
        baths: "3.0",
        sqft: "1,402",
        lot: "0.73",
        age: "5"
    }
];

for(var i=0; i<data.length; i++){
    var element = data[i];
    element.total = 0;
    element.data = [];

    for(var j=0; j<6; j++){
        var val = Math.floor(Math.random() * 40);
        element.data.push(val);
        element.total = element.total + val;
    }
}

data.sort(function(a, b){ return b.total - a.total; });
    
var body = d3.select("body");
var divEnter = body.selectAll("div").data(data).enter();

var tile = divEnter.append("div")
    .attr("class", "tile");

var info = tile.append("div")
    .attr("class", "info");
info.append("div")
    .attr("class", "address")
    .text(function(d) { return d.address; });

var left = info.append("div")
    .attr("class", "left");
left.append("div")
    .attr("class", "price")
    .text(function(d) { return d.price; });
left.append("div")
    .attr("class", "age")
    .text(function(d) { return d.age + " years old"; });
        
var right = info.append("div")
   ...