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

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