MLS Stats Mockup

Mid fidelity mockup of an embedable statistics report.

by psyne

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script src="//cdn.jsdelivr.net/d3js/3.0.6/d3.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/xcharts/0.1.3/xcharts.css">
<script src="//cdn.jsdelivr.net/xcharts/0.1.3/xcharts.js"></script>
<div class="container">
    <div class="row">
        	<h2>Market Insights for {{zip}}</h2>

        <table class="table table-striped">
            <thead>
                <tr>
                    <th></th>
                    <th>Current Value</th>
                    <th>Year To Date</th>
                    <th>Month Over Month</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Sales Volume</td>
                    <td>{{sales_vol_value}}</td>
                    <td>{{sales_vol_ytd}}</td>
                    <td>{{sales_vol_mom}}</td>
                </tr>
                <tr>
                    <td>Number Sold</td>
                    <td>{{num_sold_value}}</td>
                    <td>{{num_sold_ytd}}</td>
                    <td>{{num_sold_mom}}</td>
                </tr>
                <tr>
                    <td>Months Supply Inventory</td>
                    <td>{{msi_value}}</td>
                    <td>{{msi_ytd}}</td>
                    <td>{{msi_mom}}</td>
                </tr>
                <tr>
                    <td>Median Sales Price</td>
                    <td>{{median_sales_value}}</td>
                    <td>{{median_sales_ytd}}</td>
                    <td>{{median_sales_mom}}</td>
                </tr>
                <tr>
                    <td>Avg Days on Market</td>
                    <td>{{dom_value}}</td>
                    <td>{{dom_ytd}}</td>
                   ...

CSS

#medianSalesChart text, #listVsSaleChart text, #timelineChart text {
    font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
    fill: black;
    font-size: 1.2em;
    font-weight: bold;
}
.chart_holder figure {
    margin-left: -20px;
}
.chart_control {
    margin-right: 20px;
    margin-top: 20px;
}

JavaScript

$(document).ready(function () {
    var medianSalesData = {
        "xScale": "ordinal",
            "yScale": "linear",
            "type": "bar",
            "main": [{
            "className": ".median_sales",
                "data": [{
                "x": "2013",
                    "y": 12
            }, {
                "x": "2012",
                    "y": 8
            }]
        }],
            "comp": [{
            "className": ".median_sales",
                "type": "line-dotted",
                "data": [{
                "x": "2013",
                    "y": 10
            }, {
                "x": "2012",
                    "y": 4
            }]
        }]
    },
        
    medianSalesData_2_years = {
        "xScale": "ordinal",
            "yScale": "linear",
            "type": "bar",
            "main": [{
            "className": ".median_sales",
                "data": [{
                "x": "2012",
                    "y": 20
            }, {
                "x": "2011",
                    "y": 16
            }]
        }],
            "comp": [{
            "className": ".median_sales",
                "type": "line-dotted",
                "data": [{
                "x": "2012",
                    "y": 20
            }, {
                "x": "2011",
                    "y": 16
            }]
        }]
    },
        
    medianSalesData_3_years = {
        "xScale": "ordinal",
            "yScale": "linear",
            "type": "bar",
            "main": [{
            "className": ".median_sales",
                "data": [{
                "x": "2011",
                    "y": 15
            }, {
                "x": "2010",
                    "y": 14
            }]
        }],
            "comp": [{
            "className": ".median_sales",
                "type": "line-dotted",
                "data": [{
                "x": "2011",
                    "y": 15
            }, {
                "x": "2010",
                   ...