Australian Car Value History Visualization

README.txt

cardata.csv

chart.js

// Dimensions.
const WIDTH = 1024;
const HEIGHT = 480;

// Insets.
const INSETS = {"left": 100,
    "right": 200,
    "top": 10,
    "bottom": 50};

// Year extents.
const MIN_YEAR = 2001;
const MAX_YEAR = 2011;

// Axes.
const AXES = {};

// Scales.
const SCALES = {};

// Paths.
const PATHS = {};

// Keys used in data, SCALES and PATHS.
const YEAR_KEY = "year";
const STICKER_KEY = "sticker";
const PERCENT_KEY = "percent";
const RESALE_KEY = "resale";

// Transition duration (ms).
const DURATION = 1000;

// Visualize when document has loaded.
window.onload = function() {

    // Read the data set.
    d3.csv("cardata.csv", function(d) {

        // Parse the data and chart it.
        chart(parseData(d));
    });
};

// Parse the data set.
//
// data: array of data records.
//
function parseData(data) {

    var results = [];

    // Process each data record..
    for (var row = 0;
         row < data.length;
         row++) {

        var record = data[row];
        var history = [];

        // Process each year.
        for (var year = MIN_YEAR;
             year <= MAX_YEAR;
             year++) {

            var sticker = parseInt(record[year + " Sticker"]);
            var resale = calculateMedianPrice(record, year, "Private");
            var items = {};
            items[YEAR_KEY] = year;
            items[STICKER_KEY] = sticker;
            items[RESALE_KEY] = resale;
            items[PERCENT_KEY] = 100.0 * resale / sticker;
            history.push(items);
        }

        results.push({
            'prices' : history,
            'name' : record.Make + " " + record.Model,
            'id' : record.Id});
    }

    return results;
}

// Calculate median price for a specific year.
//
// record: array containing price data.
// year: year of price data.
// type: Private || Dealer
//
function calculateMedianPrice(record, year, type) {

    var minP = parseInt(record[year + " Min " + type]);
    var maxP = parseInt(record[year + " Max " + type]);
    return d3.median([minP, maxP]);
}

// Plot the chart.
//
// data: the data set.
//
function chart(data) {

    // Set radio button.
    var key = STICKER_KEY;
    document.getElementById(key).checked = true;

    // Set up the scales.
    configureScales(data);

    // Line chart paths..
    calculatePaths();

    // Chart root.
    var chart = d3.select("#chart")
        .append("svg:svg")
        .attr("width", WIDTH)
        .attr("height", HEIGHT);

    // Draw chart.
    appendPaths(chart, data, key);
    appendLabels(chart, data, key);
    appendAxes(chart, key);
    highlight();
}

// Draw path lines for each car's price data.
//
// chart: element to append to.
// data: holds price data.
// key: determines y-axis mapping.
//
function appendPaths(chart, data, key) {

    chart.selectAll("path.price")
        .data(data, function(d) {
            return d.id;
        })
        .enter()
        .append("svg:path")
        .attr("class", "price")
        .attr("d", function(d) {

            return PATHS[key](d.prices);
        })
        .on("mouseover", function(d, i) {

            // Highlight line.
            d3.select(this)
                .style("stroke", SCALES.clr(i))
                .style("stroke-width", 2);

            // Highlight label.
            d3.selectAll("text.label")
                .filter(function(d1, i1) {
                    return i1 == i;
                })
                .style("opacity", 1.0)
        })
        .on("mouseout", function () {

            highlight();    // reset highlights.
        });
}

// Append labels for each car.
//
// chart: element to append to.
// data: holds price data.
// key: determines y-axis mapping.
//
function appendLabels(chart, data, key) {

    chart.selectAll("text.label")
        .data(data, function(d) {
            return d.id;
        })
        .enter()
        .append("svg:text")
        .attr("class", "label")
        .attr("text-anchor", "left")
        .attr("opacity", 0.0)
        .attr("dx", "1.0em")
        .attr("dy", "0.3em")
        .attr("x", SCALES.x.range()[1])
        .attr("y", function (d) {

            return SCALES[key](d.prices[0][key]);
        })
        .attr("fill", function(d, i) {

            return SCALES.clr(i);
        })
        .text(function(d) {

            return d.name;
        });
}

// Append x- and y-axes.
//
// chart: element to append to.
// key: determines y-axis mapping.
//
function appendAxes(chart, key) {

    // X-axis.
    var xAxis = d3.svg.axis().scale(SCALES.x).tickFormat(d3.format(".0f")).orient("bottom");
    chart.append("g")
        .attr("class", "xaxis")
        .attr("width", SCALES.x.range()[1] - SCALES.x.range()[0])
        .attr("height", INSETS.bottom)
        .attr("transform", "translate(0, " + SCALES[key].range()[1] + ")")
        .call(xAxis);

    // Y-axes.
    chart.append("g")
        .attr("class", "yaxis")
        .attr("width", INSETS.left)
        .attr("height", SCALES[key].range()[1] - SCALES[key].range()[0])
        .attr("transform", "translate(" + SCALES.x.range()[0] + ", 0)")
        .attr("transform", "translate(100,0)")
        .call(AXES[key]);
}

// Highlight elements.
//
function highlight() {

    // Highlight line.
    d3.selectAll("path.price")
        .style("stroke", function(d, i) {

            return document.getElementById(d.id).checked ? SCALES.clr(i) : null;
        })
        .style("stroke-width", function(d) {

            return document.getElementById(d.id).checked ? 2 : 1;
        });

    // Highlight label.
    d3.selectAll("text.label")
        .style("opacity", function(d) {

            return document.getElementById(d.id).checked ? 1.0 : 0.0;
        });
}


// Configure the scales.
//
// data: data set.
//
function configureScales(data) {

    var prices = data.map(function(d) {

        return d.prices;
    });

    var sticker = prices.map(function(d) {

        return d3.max(d, function(e) {

            return e[STICKER_KEY];
        });
    });

    var resale = prices.map(function(d) {

        return d3.max(d, function(e) {

            return e[RESALE_KEY];
        });
    });

    // Colour scale.
    SCALES.clr = d3.scale.category20b();

    // X-axis scale.
    SCALES.x = d3.scale.linear()
        .domain([MAX_YEAR, MIN_YEAR])
        .range([INSETS.left, WIDTH - INSETS.right]);

    // Y-axis scale: sticker price.
    SCALES[STICKER_KEY] = d3.scale.linear()
        .domain([d3.max(sticker), 0])
        .range([INSETS.top, HEIGHT - INSETS.bottom])
        .nice();

    // Y-axis scale: resale price.
    SCALES[RESALE_KEY] = d3.scale.linear()
        .domain([d3.max(resale), 0])
        .range([INSETS.top, HEIGHT - INSETS.bottom])
        .nice();

    // Y-axis scale: percentage (resale of sticker).
    SCALES[PERCENT_KEY] = d3.scale.linear()
        .domain([100, 0])
        .range([INSETS.top, HEIGHT - INSETS.bottom]);

    // Configure scales.
    AXES[STICKER_KEY] = d3.svg.axis().scale(SCALES[STICKER_KEY]).orient("left");
    AXES[RESALE_KEY] = d3.svg.axis().scale(SCALES[RESALE_KEY]).orient("left");
    AXES[PERCENT_KEY] = d3.svg.axis().scale(SCALES[PERCENT_KEY]).orient("left");
}

// Calculate the paths for line charts.
//
function calculatePaths() {

    PATHS[STICKER_KEY] = d3.svg.line()
        .x(function(d) {

            return SCALES.x(d[YEAR_KEY]);
        })
        .y(function(d) {

            return SCALES[STICKER_KEY](d[STICKER_KEY]);
        })
        .interpolate("linear");

    PATHS[RESALE_KEY] = d3.svg.line()
        .x(function(d) {

            return SCALES.x(d[YEAR_KEY]);
        })
        .y(function(d) {

            return SCALES[RESALE_KEY](d[RESALE_KEY]);
        })
        .interpolate("linear");

    PATHS[PERCENT_KEY] = d3.svg.line()
        .x(function(d) {

            return SCALES.x(d[YEAR_KEY]);
        })
        .y(function(d) {

            return SCALES[PERCENT_KEY](d[PERCENT_KEY]);
        })
        .interpolate("linear");
}

// Sets the y-axis using a transition.
function setYAxis(key) {

    d3.selectAll("path.price")
        .transition(DURATION)
        .attr("d", function (d) {

            return PATHS[key](d.prices);
        });

    d3.selectAll("text.label")
        .transition(DURATION)
        .attr("y", function (d) {

            return SCALES[key](d.prices[0][key]);
        });

    d3.selectAll("g.yaxis")
        .call(AXES[key]);
}

index.html

<html>
<head>
    <title>Australian Car Value History</title>

    <meta http-equiv="X-UA-Compatible" content="chrome=1">

    <link href="style.css" media="screen" rel="stylesheet" type="text/css"/>

    <script type="text/javascript" src="http://d3js.org/d3.v2.min.js"></script>
</head>
<body>
<h2>Australian Car Value History</h2>

<h3>
    By <a href="http://vislives.com/" target="_blank">Chris Pudney</a>
    <a href="http://creativecommons.org/licenses/by-sa/3.0/" target="_blank"><img align="top"
                                                                                  alt="Creative Commons License"
                                                                                  src="http://i.creativecommons.org/l/by-sa/3.0/80x15.png"/></a>
</h3>

<div style="float: left">
    <label title="Sticker price when new">
        <input type="radio" name="yAxis" id="sticker" onclick="setYAxis('sticker');"/>
        Sticker Price
    </label><br/>
    <label title="Resale value">
        <input type="radio" name="yAxis" id="resale" onclick="setYAxis('resale');"/>
        Resale Value
    </label><br/>
    <label title="Resale value as a percentage of sticker price">
        <input type="radio" name="yAxis" id="percent" onclick="setYAxis('percent');"/>
        Resale Value (%)
    </label><br/>
    <br/>

        <label><input id="audi_a3" type="checkbox" name="Audi A3" onclick="highlight();">Audi A3</label><br/>
        <label><input id="audi_a4" type="checkbox" name="Audi A4" onclick="highlight();">Audi A4</label><br/>
        <label><input id="bmw_320i" type="checkbox" name="BMW 320i" onclick="highlight();">BMW 320i</label><br/>
        <label><input id="ford_falcon" type="checkbox" name="Ford Falcon" onclick="highlight();">Ford
            Falcon</label><br/>
        <label><input id="holden_barina" type="checkbox" name="Holden Barina" onclick="highlight();">Holden
            Barina</label><br/>
        <label><input id="holden_commodore" type="checkbox" name="Holden Commodore" onclick="highlight();">Holden
            Commodore</label><br/>
        <label><input id="honda_accord" type="checkbox" name="Honda Accord" onclick="highlight();">Honda
            Accord</label><br/>
        <label><input id="honda_civic" type="checkbox" name="Honda Civic" onclick="highlight();">Honda
            Civic</label><br/>
        <label><input id="kia_rio" type="checkbox" name="Kia Rio" onclick="highlight();">Kia Rio</label><br/>
        <label><input id="mazda_3" type="checkbox" name="Mazda 3 / 323" onclick="highlight();">Mazda 3/323</label><br/>
        <label><input id="mazda_6" type="checkbox" name="Mazda 6 / 626" onclick="highlight();">Mazda 6/626</label><br/>
        <label><input id="mercedes_c220_cdi" type="checkbox" name="Mercedes C220 CDI" onclick="highlight();">Mercedes
            C220 CDI</label><br/>
        <label><input id="nissan_maxima" type="checkbox" name="Nissan Maxima" onclick="highlight();">Nissan
            Maxima</label><br/>
        <label><input id="subaru_impreza" type="checkbox" name="Subaru Impreza" onclick="highlight();">Subuaru
            Impreza</label><br/>
        <label><input id="subaru_liberty" type="checkbox" name="Subaru Liberty" onclick="highlight();">Subaru
            Liberty</label><br/>
        <label><input id="toyota_camry" type="checkbox" name="Toyota Camry" onclick="highlight();">Toyota
            Camry</label><br/>
        <label><input id="toyota_corolla" type="checkbox" name="Toyota Corolla" onclick="highlight();">Toyota
            Corolla</label><br/>
        <label><input id="vw_golf" type="checkbox" name="Volkswagen Golf" onclick="highlight();">Volkswagen Golf</label><br/>
        <label><input id="vw_passat" type="checkbox" name="Volkswagen Passat" onclick="highlight();">Volkswagen
            Passat</label><br/>

</div>

<span id="chart"></span>

<div class="legend">To highlight a car, select its checkbox or mouse-over its line.<br/>
    Sources: <a href="http://redbook.com.au/" target="_blank">RedBook.com.au</a> and <a
            href="http://www.carsales.com.au/" target="_blank">carsales.com.au</a></div>



<script src="chart.js" type="text/javascript"></script>
</body>
</html>

style.css

body {
    margin: 0;
    padding: 10px;
    background-color: #ffffff;
    font-family: sans-serif;
    font-size: 12px;
    color: #666666;
    overflow: hidden;
}

a:link {
    color: #ccccff;
}

a:visited {
    color: #cccccc;
}

a:active {
    color: #ffccff;
}

a.hover {
    color: #ffcccc;
}

path {
    fill: none;
    stroke: #cccccc;
}