.DS_Store

baseStyles.css

.baseline {
	stroke: grey;
}

baseTemplate.js

"use strict";

// template heavily based on Peter's example: https://github.com/pbeshai/pbeshai.github.io/tree/master/vis/scatterplot-voronoi

// build plot
// outer svg dimensions
const width = 800;
const height = 1000;
const highlightColor = "#48a58f";

// padding around the chart where axes will go
const padding = {
  top: 50,
  right: 200,
  bottom: 60,
  left: 0,
};

// inner chart dimensions, where the dots are plotted
const plotAreaWidth = width - padding.left - padding.right;
const plotAreaHeight = height - padding.top - padding.bottom;

// unemployment or housing
var metric = "unemployment"
if(window.location.hash.substr(1) == "housing"){
  metric = "housing"
}

var keyData = {
  "unemployment": {
    baseMetric: "unemployment rate last year",
    changeDomain: [1,-1],
    baseDomain: [2.5,7],
    direction: 'negative'
  },
  "housing": {
    baseMetric: "housing price change since 2007",
    changeDomain: [-12,12],
    baseDomain: [-20,60],
    direction: 'positive'
  }
}



var center = plotAreaWidth / 2 + padding.left

// select the root container where the chart will be added
const container = d3.select('#vis-container');

// initialize main SVG
const svg = container.append('svg')
  .attr('width', width)
  .attr('height', height);


var changeScale = d3.scale.linear().domain(keyData[metric].changeDomain).range([padding.left,plotAreaWidth])
var changeTimeScale = d3.scale.linear().domain([0, Math.abs(keyData[metric].changeDomain[1])]).range([2500,6000])
var baseScale = d3.scale.linear().domain(keyData[metric].baseDomain).range([padding.top,plotAreaHeight])


var calcChange = function(d){
  return changeScale(d[metric + ' delta'])
}
var calcTimeChange = function(d){
  return changeTimeScale(Math.abs(d[metric + ' delta']))
}

var getHeight = function(d){
  return baseScale(d[keyData[metric].baseMetric])
}

var getArrowRotation = function(delta, direction){
  if((direction == 'positive' & delta < 0) || (direction == 'negative' & delta > 0)){
    return 270
  }
  return 90;
}

var calcArrowTransform = function(d){
  return 'translate('+ center +','+ getHeight(d)+') rotate('+ getArrowRotation(d[metric + " delta"], keyData[metric].direction) +',0,0)'
}
var calcArrowTransformAfter = function(d){
  return 'translate('+ calcChange(d) +','+ getHeight(d)+') rotate('+ getArrowRotation(d[metric + " delta"], keyData[metric].direction) +',0,0)'
}

var durationFunction = function(d){
  return calcTimeChange(d)
}

// the main <g> where all the chart content goes inside
const vis = svg.append('g')
  .attr('transform', `translate(${padding.left} ${padding.top})`);

d3.csv('changeData.csv', function(error, data){
  var states = vis.selectAll(".states")
  .data(data)
  .enter()
  .append("g")
  .attr("class", function(d){return "states " + d.region})
    
  states.append("line")
    .attr("class", "arrow")
    .attr("x1", center)
    .attr("x2", center)
    .attr("y1", getHeight)
    .attr("y2", getHeight)
    .attr("opacity", .5)
    .attr("stroke", "grey")
    .transition()
    .delay(1500 + 1000)
    .duration(durationFunction)
    .attr("x2", calcChange)

  states.append("path")
    .attr("class", "arrow")
    .attr("d", "M-6 0 L0 -12 L6 0 z")
    .attr("transform", calcArrowTransform)
    .attr('fill', 'grey')
    .attr("opacity", 0)
    .on("click", function(d){
      console.log(d)
    })
    .transition()
    .delay(1500)
    .duration(1000)
    .attr("opacity", .5)
    .transition()
    .duration(durationFunction)
    .attr("transform", calcArrowTransformAfter)

  states.append("circle")
    .attr("class", "arrow")
    .attr("cx", center)
    .attr("cy", getHeight)
    .attr("r", 4)
    .attr("fill", "grey")
    .attr("opacity", .5)

  vis.append("line")
    .attr("x1", center)
    .attr("x2", center)
    .attr("y1", padding.top)
    .attr("y2", height - padding.bottom)
    .attr("class", "baseline")

})



// defines size of map, and location on the screen
var projection = d3.geo.albersUsa()
  .translate([700,150])
    .scale([200]);

var path = d3.geo.path().projection(projection);

// list of cities to show, and locations
var citiesData = [{"region": "Midwest", location: {"lat": 41.87811, "long": -87.62980}},
          {"region": "South", location: {"lat": 27.95107 , "long": -90.07153}},
          {"region": "West", location: {"lat": 40.60621, "long": -110.33207}},
          {"region": "Northeast", location: {"lat":  42.35849, "long": -71.06010}}];

// read in US geometry

// todo: make smaller version of json file here
d3.json("us.json", function(error, topology) {

  // limit to continental US
  topology.objects.cb_2013_us_state_20m.geometries = 
    topology.objects.cb_2013_us_state_20m.geometries.filter(
      function(d){if(["Alaska", "Hawaii", "Puerto Rico"].indexOf(d.id) == -1){return d}}
      )
  // attach path for US boundary
  svg.append("g").attr("class", "maps").append("path")
      .datum(topojson.feature(topology, topology.objects.cb_2013_us_state_20m))
      .attr("d", path)
      .attr("fill", "#ccc")
      .attr("stroke", "none");
 
  // append cities
  svg.append("g")
    .attr("class", "cities")
  .selectAll("circle")
    .data(citiesData)
  .enter().append("circle")
    .attr("transform", function(d) {
      return "translate(" + projection([
          d.location.long,
          d.location.lat
        ]) + ")"
      })
    .attr("r", 20)
    .attr("opacity",.3)
    .attr("fill", highlightColor)
    .on("mouseover", function(d){
      d3.select(this).attr("opacity", 1)
      var selected = d3.selectAll("." + d.region)
      selected.selectAll(".arrow").attr("opacity", 1).attr('stroke', highlightColor).attr("fill", highlightColor)
        .attr("stroke-width", 3)
    })
    .on("mouseout", function(d){
      d3.select(this).attr("opacity",.3)
      var selected = d3.selectAll("." + d.region)
      selected.selectAll(".arrow").attr("opacity", .5).attr('stroke', "grey").attr("fill", "grey").attr("stroke-width", 1)
    });
});

changeData.csv

employmentdata.csv

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<link rel="stylesheet" href="baseStyles.css">
<div id="vis-container"></div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="baseTemplate.js"></script>

us.json