Dancing line chart in D3

README.md

A short demo of dancing line charts, mostly made for students of Shan and Kevin's Dataviz class at Berkeley. The data and interactive are based on the NYT's Housing's Rise and Fall in 20 Cities. Data is from The Standard & Poor’s Case-Shiller Home Price Index.

home-prices.tsv

index.html

<style type="text/css">
body {
  font-family: arial;
  width:800px;
  margin:20px auto;
}

.g-city-line {
  fill:none;
  stroke-width: 2px;
}

.g-user-chosen-line {
  stroke:#ff00ff;
}

.g-avg-line {
  stroke:#999;
}

.g-city-links {
  margin-bottom:20px;
}
.g-city-link {
  padding-right: 5px;
  font-size: 12px;
  display: inline-block;
  margin-right: 5px;
  border-right: 1px solid #ccc;
  color: #00427c;
}

.g-city-link.selected-link {
  font-weight: bold;
  color:black;
}

.g-city-link:hover {
  text-decoration: underline;
  cursor:pointer;
}

</style>


<div class="g-chart">

  <!-- these are automated easily, but we can do that another time -->
  <div class="g-city-links">
      <a class="g-city-link" id="ATXR">Atlanta</a>
      <a class="g-city-link" id="BOXR">Boston</a>
      <a class="g-city-link" id="CEXR">Cleveland</a>
      <a class="g-city-link" id="CHXR">Chicago</a>
      <a class="g-city-link" id="CRXR">Charlotte</a>
      <a class="g-city-link" id="DAXR">Dallas</a>
      <a class="g-city-link" id="DEXR">Detroit</a>
      <a class="g-city-link" id="DNXR">Denver</a>
      <a class="g-city-link" id="LVXR">Las Vegas</a>
      <a class="g-city-link" id="LXXR">Los Angeles</a>
      <a class="g-city-link" id="MIXR">Miami</a>
      <a class="g-city-link" id="MNXR">Minneapolis</a>
      <a class="g-city-link" id="NYXR">New York</a>
      <a class="g-city-link" id="PHXR">Phoenix</a>
      <a class="g-city-link" id="POXR">Portland</a>
      <a class="g-city-link" id="SDXR">San Diego</a>
      <a class="g-city-link" id="SEXR">Seattle</a>
      <a class="g-city-link selected-link" id="SFXR">San Francisco</a>
      <a class="g-city-link" id="SPCS20R">20-city average</a>
      <a class="g-city-link" id="TPXR">Tampa</a>
      <a class="g-city-link" id="WDXR">Washington, DC</a>
  </div>
</div>

<!-- load D3 -->
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>



<script type="text/javascript">

// set a width and and make an svg according to the margin conventions
// http://bl.ocks.org/mbostock/3019563

var margin = {top: 20, right: 10, bottom: 20, left: 10};

var width = 800 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var svg = d3.select(".g-chart").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 + ")");

// note this is a time scale.
var x = d3.time.scale()
    .range([0, width]);

var y = d3.scale.linear()
    .range([height, 0]);

var line = d3.svg.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.val); })

d3.tsv("home-prices.tsv", function(err, data) {

    // reformat the strings as numbers.
    data.forEach(function(d) {
        d.val = +d.val;
        d.year = +d.year;
        d.month = +d.month;

        // make a value for a date – the first day of the month.
        // note months are zero based. http://www.w3schools.com/js/js_obj_date.asp
        d.date = new Date(+d.year, +d.month -1 , 1 );

    });

    // set the x domain to the ma and min of d.date.
    // d3.extent: http://github.com/mbostock/d3/wiki/Arrays#wiki-d3_extent
    x.domain(d3.extent(data, function(d) { return d.date; }))

    // set the y domain to the max and min of d.val.
    // d3.extent: http://github.com/mbostock/d3/wiki/Arrays#wiki-d3_extent
    y.domain(d3.extent(data, function(d) { return d.val; }))

    //sf by default, but users can change
    var sf = data.filter(function(d) { return d.citycode == "SFXR"});
    svg.append("path")
        .attr("class", "g-city-line g-user-chosen-line")
        .attr("d", line(sf) );


    // average for all cities
    var avgLine = data.filter(function(d) { return d.citycode == "SPCS20R"});

    svg.append("path")
        .attr("class", "g-city-line g-avg-line")
        .attr("d", line(avgLine) );

     function updateLine(code) {
        var thisCityData = data.filter(function(d) { return d.citycode == code; });
        d3.selectAll(".g-user-chosen-line")
            .transition()
            .attr("d", line(thisCityData))
    }

    // listen for when someone clicks a link,
    // find the ID of that link, then run updateLines for that code

    d3.selectAll(".g-city-link")
        .on("click", function(d) {
          var idOfClickedLink = d3.select(this).attr("id");
          updateLine(idOfClickedLink);

          // change the css a little so we know it's selected
          d3.selectAll(".g-city-link").classed("selected-link", false);
          d3.select(this).classed("selected-link", true);
        });
});


</script>