block by zanarmstrong 361479c140a8688354f822da80315513

361479c140a8688354f8

Full Screen

index.html

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

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

state,unemployment rate this year,unemployment rate last year,unemployment delta,region,housing delta,housing price change since 2007
US,4.7,4.9,-0.2,USA,6.153023007,6.015941577
AL,6.2,6,0.2,South,5.801628348,3.996376082
AK,6.4,6.6,-0.2,West,-0.5934480132,11.25521698
AZ,5.1,5.5,-0.4,West,7.356560529,-12.67751017
AR,3.7,4.1,-0.4,South,3.082329317,6.581542614
CA,5,5.6,-0.6,West,6.635795913,-8.152511984
CO,2.9,3.3,-0.4,West,10.62087042,46.33054031
CT,4.7,5.5,-0.8,Northeast,0.9936766034,-15.48231025
DE,4.5,4.5,0,South,-0.6146694215,-11.84771155
DC,5.7,6.2,-0.5,South,4.062209842,45.76707065
FL,5,5,0,South,10.40058503,-11.82998053
GA,5.3,5.5,-0.2,South,6.81840722,7.473931048
HI,2.8,3.1,-0.3,West,4.203452365,9.691141113
ID,3.6,3.9,-0.3,West,7.404064977,5.309121687
IL,5.4,6.1,-0.7,Midwest,5.816023739,-8.436041083
IN,4.1,4.7,-0.6,Midwest,5.511328843,12.16120251
IA,3.2,3.8,-0.6,Midwest,4.272417707,16.00161632
KS,4,4.1,-0.1,Midwest,6.259043174,15.09605662
KY,4.9,5.2,-0.3,South,3.774479587,14.44932538
LA,5.8,6.2,-0.4,South,4.588644264,16.3244265
ME,3.2,3.7,-0.5,Northeast,7.137591005,5.941586549
MD,4.2,4.5,-0.3,South,5.283482535,-10.95275211
MA,3.4,4.2,-0.8,Northeast,6.260890708,9.651250314
MI,5.3,5,0.3,Midwest,6.332232531,6.555654778
MN,4,3.9,0.1,Midwest,5.674852852,3.011237733
MS,5.2,6.1,-0.9,South,4.089723526,1.418043202
MO,4.1,4.5,-0.4,Midwest,6.167998063,7.059512767
MT,3.8,4.2,-0.4,West,8.375298171,20.08026887
NE,3.2,3.2,0,Midwest,3.999645657,18.2335465
NV,4.9,6.1,-1.2,West,8.949850413,-18.79204777
NH,2.7,2.8,-0.1,Northeast,4.421266384,-2.76333319
NJ,4.4,5,-0.6,Northeast,3.101303183,-11.91713865
NM,6.8,6.6,0.2,West,4.594669628,-6.366498219
NY,4.4,4.9,-0.5,Northeast,4.318382114,3.798403101
NC,5.1,5.2,-0.1,South,7.084402692,10.99176872
ND,2.9,3.3,-0.4,Midwest,1.561833514,51.41124101
OH,5.1,5,0.1,Midwest,5.616948182,5.829030407
OK,4.6,4.8,-0.2,South,1.053895411,18.9292443
OR,4,4.9,-0.9,West,10.97716103,14.06031793
PA,5,5.4,-0.4,Northeast,4.002575915,5.122171039
RI,4.5,5.4,-0.9,Northeast,5.835946192,-8.415386635
SC,4.4,5.4,-1,South,6.896715173,13.60064477
SD,2.8,2.7,0.1,Midwest,4.646214554,25.10984691
TN,5.3,4.7,0.6,South,6.938441239,17.47888239
TX,4.9,4.6,0.3,South,7.689476052,41.28789911
UT,3.1,3.6,-0.5,West,8.43537415,13.26141722
VT,3,3.3,-0.3,Northeast,1.901176033,2.062479631
VA,3.9,4,-0.1,South,3.838444151,-2.318956871
WA,4.9,5.6,-0.7,West,10.18713242,11.27789777
WV,5.2,6.3,-1.1,South,-3.39607013,9.526790838
WI,3.7,4.2,-0.5,Midwest,5.983786447,4.407871514
WY,4.7,5.3,-0.6,West,-1.585800982,9.884908744

employmentdata.csv

state,unemployment rate this year,unemployment rate last year,delta,region
US,4.7,4.9,-0.2,USA
AL,6.2,6,0.2,South
AK,6.4,6.6,-0.2,West
AZ,5.1,5.5,-0.4,West
AR,3.7,4.1,-0.4,South
CA,5,5.6,-0.6,West
CO,2.9,3.3,-0.4,West
CT,4.7,5.5,-0.8,Northeast
DE,4.5,4.5,0,South
DC,5.7,6.2,-0.5,South
FL,5,5,0,South
GA,5.3,5.5,-0.2,South
HI,2.8,3.1,-0.3,West
ID,3.6,3.9,-0.3,West
IL,5.4,6.1,-0.7,Midwest
IN,4.1,4.7,-0.6,Midwest
IA,3.2,3.8,-0.6,Midwest
KS,4,4.1,-0.1,Midwest
KY,4.9,5.2,-0.3,South
LA,5.8,6.2,-0.4,South
ME,3.2,3.7,-0.5,Northeast
MD,4.2,4.5,-0.3,South
MA,3.4,4.2,-0.8,Northeast
MI,5.3,5,0.3,Midwest
MN,4,3.9,0.1,Midwest
MS,5.2,6.1,-0.9,South
MO,4.1,4.5,-0.4,Midwest
MT,3.8,4.2,-0.4,West
NE,3.2,3.2,0,Midwest
NV,4.9,6.1,-1.2,West
NH,2.7,2.8,-0.1,Northeast
NJ,4.4,5,-0.6,Northeast
NM,6.8,6.6,0.2,West
NY,4.4,4.9,-0.5,Northeast
NC,5.1,5.2,-0.1,South
ND,2.9,3.3,-0.4,Midwest
OH,5.1,5,0.1,Midwest
OK,4.6,4.8,-0.2,South
OR,4,4.9,-0.9,West
PA,5,5.4,-0.4,Northeast
RI,4.5,5.4,-0.9,Northeast
SC,4.4,5.4,-1,South
SD,2.8,2.7,0.1,Midwest
TN,5.3,4.7,0.6,South
TX,4.9,4.6,0.3,South
UT,3.1,3.6,-0.5,West
VT,3,3.3,-0.3,Northeast
VA,3.9,4,-0.1,South
WA,4.9,5.6,-0.7,West
WV,5.2,6.3,-1.1,South
WI,3.7,4.2,-0.5,Midwest
WY,4.7,5.3,-0.6,West