Refugees in Georgia

<!DOCTYPE html>
<html>
<style>
svg {
  font: 12px sans-serif;
  background-color: #E5F5E0;
  background-opacity: 0.1;
  color:  #B93873;

}

.title {
  font-size: 32px;

}

.subtitle {
  font-size: 16px;
  color:  #B93873;
}

/**************notes */
.note {
  font-size: 10px;
}

.foreground path {
  fill: none;
  stroke: #31A354;
  stroke-opacity: .9
  stroke-width: 14;
}

.axis line, .axis path {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
  opacity: 0.5;
}

.axis text {
  text-shadow: 0 1px 0 #fff;
}

.laxis line, .laxis path {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
  opacity: 0.5;
}

.laxis text {
  text-shadow: 0 1px 0 #fff;
}
/************* sidebar suff */
.sidebar{
  position: relative;
  font: 12px sans-serif;
  overflow: scroll; 
}

.rect {

}

.bAxis line, .baxis path{
 fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
  opacity: 0.5;

}
/************* explainer div */
div.explanation {
  position: relative;
  font: 12px sans-serif;
  top: -720px;
  right: -340px;
  width: 350px;
  height: 80px;
  border: 0px;
  border-radius: 0px;
  text-align: justify;
}
div.explanationTwo {
  position: relative;
  font: 12px sans-serif;
  top: -680px;
  right: -340px;
  width: 350px;
  height: 80px;
  border: 0px;
  border-radius: 0px;
  text-align: justify;
}

</style>
  <head>
    <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
  <body>
  
  	<script>
//light green #E5F5E0
//middle green #A1D99B
//dark green #31A354
// peach #DC9042
//pink #B93873

//start with some variables

var margin = {top: 210, right: 0, bottom: 50, left: 10};
var width = 700 - margin.left - margin.right,
    height = 780 - margin.top - margin.bottom;

var x = d3.scale.ordinal().rangePoints([100, 650], 1),
    y = {};

var line = d3.svg.line(),
    axis = d3.svg.axis().orient("left").tickValues(""),
    laxis = d3.svg.axis().orient("left").tickValues([0,5,10]),
    background,
    foreground;

var bScale = d3.scale.linear()
  .domain([0, 87000])
  .range([0, 200]);

var bAxis = d3.svg.axis().orient("top").scale(bScale).tickValues([0, 87000]);

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("svg:g")
    .attr("transform", "translate(" + margin.bottom + "," + margin.top + ")");

//read in some data 
 d3.csv("refugees.csv", function(error, data) {

data.forEach(function(d, i) { 
            d.state = d.destination_full,
            d.RTOTAL = +d.RTOTAL
          })

//now, let's add some calculated fields, to show refugees as  a % of total population R/T

data.forEach(function(d) {
  d.P2002 = +((d.R2002/d.T2002)*10000),
  d.P2003 = +((d.R2003/d.T2003)*10000),
  d.P2004 = +((d.R2004/d.T2004)*10000),
  d.P2005 = +((d.R2005/d.T2005)*10000),
  d.P2006 = +((d.R2006/d.T2006)*10000),
  d.P2007 = +((d.R2007/d.T2007)*10000),
  d.P2008 = +((d.R2008/d.T2008)*10000),
  d.P2009 = +((d.R2009/d.T2009)*10000),
  d.P2010 = +((d.R2010/d.T2010)*10000),
  d.P2011 = +((d.R2011/d.T2011)*10000),
  d.P2012 = +((d.R2012/d.T2012)*10000)
})
console.log(data)

//extract the list of dimensions &
// create a scale for each one of those dimensions

x.domain(dimensions = d3.keys(data[0]).filter(function(d) {
    return d.substring(0,1) == "P" && (y[d] = d3.scale.linear()
        .domain([0 , 10])
        .range([height, 100]));
  }));

foreground = svg.append("svg:g")
      .attr("class", "foreground")
    .selectAll("path")
      .data(data)
    .enter().append("svg:path")
      .attr("class", function (d) {return d.state + " foreground";})
      .attr("d", path)
      .style("stroke-width", 3)
      .attr("stroke-opacity", 0.5)
      .on("mouseover", function(d) {
            console.log("clicked");
            d3.selectAll(".rect").style("fill", "#31A354").style("stroke", "#31A354" ); //sidebar text reset/default to dark green 
            d3.selectAll(".foreground").style("stroke", "#31A354").attr("stroke-opacity", 0.5) // all paths reset/default to dark green
            d3.selectAll("." + d.state).style("stroke", "#B93873").style("color", "#B93873").attr("stroke-opacity", 1)
            d3.selectAll("." + d.state + ".rect").style("fill", "#B93873");
            }); // then whatever system you click on, all the dots of that same class turn red.

var g = svg.selectAll(".dimension")
      .data(dimensions)
    .enter().append("svg:g")
      .attr("class", "dimension")
      .attr("transform", function(d) { return "translate(" + x(d) + ")"; });

g.append("svg:g")
      .attr("class", "axis")
      .each(function(d)  { d3.select(this).call(axis.scale(y[d])); })
     .append("svg:text")
            .attr("text-anchor", "middle")
            .attr("y", height + 20)
            .text(function(d) {return d.replace(/P/g, " ");});

g.append("svg:g")
      .attr("class", "laxis") // call leftmost axis, laxis. It's the only one with labels.
      .each(function(d, i) { if (d == "P2002") {d3.select(this).call(laxis.scale(y[d]));}  }) ;

function path(d) {
  return line(dimensions.map(function(p) { return [x(p), y[p](d[p])]; }));
  console.log("ok");
}

function SortByTotal(x,y) {
      return -1*(x.RTOTAL - y.RTOTAL); 
    }

data.sort(SortByTotal); // descending sort for the sidebar

console.log(data);

svg.append("g")
      .attr("transform", "translate(50, -150)")
      .attr("class", "baxis")
      .call(bAxis);

// explainer div  ************

var explanationDiv = d3.select("body").append("div")
    .attr("class", "explanation")
    .text("The United States sets a cap each year on the number of new refugees it will accept. In the last decade, that's been between 70,000 and 80,000 annually, though in practice that cap is never reached. Clarkston and Stone Mountain, Georgia have each become the home of between 3,700 and 4,000 refugees since 2001. The most common destination is Phoenix, with nearly 18,000 newbies. The 9/11 attacks prompted new security checks that cut arrivals in half in the years immediately following.");

var explanationDivTwo = d3.select("body").append("div")
    .attr("class", "explanationTwo")
    .text("<-- Minnesota Nice: 14 refugees per 10,000 Minnesota residents moved to the Gopher State in 2004, much more than anywhere else. Overall, California saw the most resettled refugees at nearly 87,000 over a decade. In the same time, only five settled in Wyoming.");
/////************* title ***********
    svg.append("text")
      .attr("class", "title")
      .attr("x", width-55)
      .attr("text-anchor", "end")
      .attr("y", -180)
      .text("Refugees in Georgia");

svg.append("text")
      .attr("class", "subtitle")
      .style("color", "#B93873")
      .attr("x", width-55)
      .attr("text-anchor", "end")
      .attr("y", 85)
      .text("Refugees resettled per 10,000 state population");

svg.append("text")
      .attr("class", "subtitle")
      .attr("x", -40)
      .attr("y", -190)
      .text("Total refugees resettled, per state, 2002 - 2012");

//// notes & byline
  svg.append("text")
    .attr("class", "note")
    .attr("x" , 150)
    .attr("y", height + 35)
    .text("Sources: U.S. Census Bureau, U.S. Department of State Refugee Processing Center");
  svg.append("text")
    .attr("class", "note")
    .attr("x", 150)
    .attr("y", height + 45)
    .text("Overall population is a midyear estimate; refugee numbers are calendar year totals.");
  svg.append("text")
    .text("by Maggie Lee")
    .attr("x", width-55)
    .attr("text-anchor", "end")
    .attr("y", -160);

});

//total populationsums from U.S. Census Bureau
//https://www.census.gov/popest/data/intercensal/state/state2010.html
//https://www.census.gov/popest/data/historical/2010s/vintage_2011/state.html

</script>

</body>
</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js