D3 Visualization of the Median Market Value of Two Bedroom Homes within some LA Neighborhoods

I have picked the median market values of two bedroom homes within seven LA counties to visualize them over time and compare them with each other.

The counties that I have chosen are:

  1. Beverly Hills (of course, why not),
  2. Santa Monica (this area is really fancy too),
  3. Downtown Los Angeles
  4. West Los Angeles
  5. Culver City
  6. Brentwood
  7. Westwood

As you can see from the above chart, there is basically the same pattern of the median market value of two bedroom homes within each chosen LA neighborhood, and I really like the prices back in 2000.


The source of the information is https://www.quandl.com/. Latest evaluation date for the dataset is July 31, 2015. I was using this example to visualize my data.

var margin = {top: 20, right: 100, bottom: 30, left: 70},
    width = 760 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
var parseDate = d3.time.format("%Y-%m-%d").parse;
var x = d3.time.scale()
        .range([0, width]);
var y = d3.scale.linear()
        .range([height, 0]);
var color = d3.scale.category10();
var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom");
var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left");
var line = d3.svg.line()
        .interpolate("basis")
        .x(function(d) { return x(d.Date); })
        .y(function(d) { return y(d.price); });
var svg = d3.select("#area1").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.csv("AreasCombined.csv", function(error, data) {
    if (error) throw error;
    color.domain(d3.keys(data[0]).filter(function(key) { return key !== "Date"; }));
    data.forEach(function(d) {
        d.Date = parseDate(d.Date);
    });
    var cities = color.domain().map(function(name) {
        return {
            name: name,
            values: data.map(function(d) {
                return {Date: d.Date, price: +d[name]};
            })
        };
    });
    x.domain(d3.extent(data, function(d) { return d.Date; }));
    y.domain([
        d3.min(cities, function(c) { return d3.min(c.values, function(v) { return v.price; }); }),
        d3.max(cities, function(c) { return d3.max(c.values, function(v) { return v.price; }); })
    ]);
    svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis);
    svg.append("g")
            .attr("class", "y axis")
            .call(yAxis)
            .append("text")
            .attr("transform", "rotate(-90)")
            .attr("y", 6)
            .attr("dy", ".71em")
            .style("text-anchor", "end")
            .text("Price ($)");
    var city = svg.selectAll(".city")
            .data(cities)
            .enter().append("g")
            .attr("class", "city");
    city.append("path")
            .attr("class", "line")
            .attr("d", function(d) { return line(d.values); })
            .style("stroke", function(d) { return color(d.name); });
    city.append("text")
            .datum(function (d) {
                var pos = 0;
                return {name: d.name, value: d.values[pos]};//use first element
            })
            .attr("transform", function (d) {
                return "translate(" + x(d.value.Date) + "," + y(d.value.price) + ")";
            })
            .attr("x", 3)
            .attr("dy", "-.3em")
            .text(function (d) {
                return d.name;
            });
});};

CSS file

body {
    font: 10px sans-serif;
}
.axis path,
.axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
}
.x.axis path {
    display: none;
}
.line {
    fill: none;
    stroke: steelblue;
    stroke-width: 1.5px;
}

Leave a Reply

Your email address will not be published.