Scatterplot

.block

license: mit

README.md

This scatterplot is constructed from a TSV file storing the dimensions of sepals and petals of various iris flowers. The chart employs conventional margins and a number of D3 features:

• d3.tsv - load and parse data
• d3.scale.linear - x- and y-position encoding
• d3.scale.ordinal - color encoding
• d3.extent - compute domains
• d3.svg.axis - display axes

forked from mbostock's block: Scatterplot

forked from xaranke's block: Scatterplot

data.tsv

city,sepalWidth,sepalLength
Abilene,828.0599160505909,23.4
Akron,1448.5299120342945,23.85
Albuquerque,886.1661465473998,19.299999999999997
Amarillo,588.9407569149366,25.7
Ames,483.48748728886073,15.799999999999999
Ann Arbor,1273.0983677184859,20.1
Asheville NC,1484.3307182063684,20.5
Athens,1499.4106056982323,17.7
Atlanta,1431.5181542174337,16.25
Augusta,1639.7067680793018,19.200000000000003
Austin,1066.2965748705426,16.9
Bakersfield,1863.201127767145,18.95
Baltimore,1880.329873988608,16.2
Baton Rouge,1242.1170423378724,22.0
Boise,1518.750570977648,26.05
Boston,2313.8619637854345,18.75
Bowling Green KY,1103.224686593905,22.0
Burlington,2145.337498310835,24.0
Cedar Rapids,627.856997459859,18.099999999999998
Central Atlantic Coast FL,1990.2501152984541,25.55
Champaign,881.3971203313669,23.5
Charleston SC,1840.7284239449057,19.1
Charlotte,1643.2019172474704,15.95
Charlottesville VA,1747.4817641732366,24.05
Chattanooga,1285.7815580133827,22.55
Chicago,948.7891854777208,15.7
Cincinnati,1209.6841584058352,18.6
Cleveland,1434.626126654717,17.5
"Coeur DAlene",1696.2718171443626,26.5
College Station,1044.1389484880644,25.65
Columbia SC,1686.3106928231389,25.099999999999998
Columbia MO,545.9505753735689,30.75
Columbus,1328.075065062427,16.55
Connecticut,2179.4865187477335,17.4
Corpus Christi,1342.8485460513627,16.05
Dallas-Fort Worth,798.3102391089303,13.2
Dayton,1228.588007851542,18.85
Delaware,1994.8093428014072,22.35
Denver,547.1111254587951,17.15
Des Moines,463.01746871078353,16.4
Detroit,1329.2608709148753,13.8
Eastern Idaho,1183.8636928843948,26.0
Eastern North Carolina,1868.2198915911767,18.0
El Paso,1141.7884895742973,20.700000000000003
Erie,1570.8757707581337,25.55
Fargo,796.7182508958987,23.1
Fayetteville AR,564.1282912074553,24.2
Fayetteville Nc,1815.1247526138159,18.0
Flagstaff,1261.2174393691496,23.6
Flint,1289.4525333502863,13.75
Fort Myers-Naples,2157.647627730687,18.1
Fort Wayne,1145.1032289849863,22.35
Fresno,1871.7721788894194,14.65
Gainesville,1863.1942589297437,25.0
Grand Rapids,1131.0532633415091,13.05
Green Bay,1013.7896637119105,29.25
Greenville SC,1531.9196922249594,24.65
Hampton Roads,1958.5929257382882,15.450000000000001
Harrisburg,1843.3559996997135,25.95
Houston,1158.1518763496617,16.95
Indianapolis,1060.9127461032822,16.45
Inland Empire,1814.8042829781614,18.65
Jackson,1126.9227078458368,24.65
Jacksonville,1863.1701622706978,13.149999999999999
Kalamazoo,1122.4333484818796,16.05
Kansas City,355.1165436572479,17.0
Killeen,972.5462464417956,25.65
Knoxville,1355.1855038958029,20.9
Lafayette LA,1223.7201658898641,21.25
Lancaster PA,1895.0990386227757,25.6
Lansing,1214.414704294479,18.25
Las Cruces,1113.5936653924623,25.45
Las Vegas,1505.6314780053062,27.9
Lawrence,303.2018420623779,23.5
Lehigh Valley,1960.5019021233172,25.95
Lexington,1233.3961419369125,15.6
Lincoln,194.83400723126863,17.200000000000003
Little Rock,793.4841554286392,20.5
Los Angeles,1857.2989490634482,15.25
Louisville,1120.626519635514,15.799999999999999
Lubbock,754.3122245795374,20.55
Madison,846.7827607673055,17.45
Memphis,914.9418218344928,15.6
Miami,2315.18404436483,15.399999999999999
Midland,926.849414581339,28.5
Milwaukee,956.7789889363412,17.5
Minneapolis,719.4354602946247,18.55
Mobile AL,1394.2105654932056,25.35
Modesto,1954.6577381888212,19.6
Myrtle Beach,1877.8584960662324,24.849999999999998
Nashville,1111.573569808768,16.15
New Jersey,2055.342176943468,17.45
New Orleans,1344.4784944132389,21.7
New York City,2082.628145396558,32.5
NW Indiana,259.1721846119158,23.9
Ocala FL,1911.1684772434955,25.45
Oklahoma City,493.97867177996807,15.8
Omaha,274.07437181655627,19.05
Orange County,1841.647518553893,16.55
Orlando,2014.3120661727203,12.95
Outer Banks NC,2082.4790610919617,23.15
Palm Springs,1728.1318706975178,21.75
Pensacola FL,1468.9859088143633,25.55
Bloomington-Normal,824.7345288982167,23.5
Philadelphia,1992.8413267015578,17.1
Phoenix,1395.7877121741417,15.0
Piedmont Triad NC,1677.5198012135074,18.0
Pittsburgh,1579.5564506731027,19.1
Portland,2059.8797474023795,24.35
Portland ME,2377.0344429243833,24.75
Quad Cities,2048.0096947279494,21.75
Raleigh-Durham,1794.744673896849,15.0
Reading PA,1923.4887234808955,25.95
Reno,1814.0992802529931,27.9
Rhode Island,2272.57133862919,13.9
Richmond,1849.4256396528244,16.85
Roanoke-Blacksburg,1604.4587732395373,23.9
Rockford,840.3065052209112,23.9
Sacramento,1970.7361519667695,15.45
Salt Lake City,1132.4891813918373,18.25
San Antonio,1157.7523203725784,18.3
San Diego,1839.5810577218194,18.6
San Francisco,2072.3812848787047,21.75
San Jose,2039.47398720112,18.3
San Luis Obispo,2005.516298071323,32.05
Santa Barbara,1961.7617479054627,20.75
Santa Fe,793.8425427215761,27.950000000000003
Sarasota,2029.6773429252373,17.75
Savannah-Hilton Head,1783.2641093179082,22.35
Seattle,2084.4908665460052,20.85
South Bend,1058.2843943021278,20.849999999999998
Spokane,1739.625166875753,21.05
Springfield IL,763.3760575408302,23.55
State College,1756.6692738546801,25.55
Stillwater,434.5591430427437,25.4
St Louis,734.5197111486309,23.45
Tacoma,2082.152972199678,21.3
Tallahassee,1664.9652906786791,21.0
Tampa Bay,1998.2367137421693,14.799999999999999
Toledo,1284.5126003786618,16.3
Topeka,264.38922959933717,23.7
Tucson,1393.9708475505322,18.75
Tulsa,467.7888148161917,15.65
Vancouver Wa,2061.920919413128,24.95
Ventura,1934.0162358737741,17.85
Waco,930.4529624341334,25.849999999999998
Washington D.C.,1851.3075205161015,17.55
Wichita,261.50167875216437,23.9
Wilkes-Barre Scranton,1932.6468893374185,25.8
Wilmington Nc,1930.522374220301,17.9
Yuma,1629.8250987120462,23.700000000000003

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
  font: 10px sans-serif;
}

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

.dot {
  stroke: #000;
}

.tooltip {
  position: absolute;
  width: 200px;
  height: 28px;
  pointer-events: none;
}
</style>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>

var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var x = d3.scale.linear()
    .range([0, width]);

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

var color = d3.scale.category10();

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

var tooltip = d3.select("body").append("div")
    .attr("class", "tooltip")
    .style("opacity", 0);
  
var svg = d3.select("body").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 + ")");

d3.csv("data.tsv", function(error, data) {
  if (error) throw error;

  data.forEach(function(d) {
    d.sepalLength = +d.sepalLength;
    d.sepalWidth = +d.sepalWidth;
    console.log(d);
  });

  x.domain(d3.extent(data, function(d) { return d.sepalWidth; })).nice();
  y.domain(d3.extent(data, function(d) { return d.sepalLength; })).nice();

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
    .append("text")
      .attr("class", "label")
      .attr("x", width)
      .attr("y", -6)
      .style("text-anchor", "end")
      .text("Distance From the Center of the Contiguous United States (km)");

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("class", "label")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Cost for a 20 minute, 10 mile ride ($)")

  svg.selectAll(".dot")
      .data(data)
    .enter().append("circle")
      .attr("class", "dot")
      .attr("r", 3.5)
      .attr("cx", function(d) { return x(d.sepalWidth); })
      .attr("cy", function(d) { return y(d.sepalLength); })
      .style("fill", function(d) { return '#1F77B4'; })
  		.on("mouseover", function(d) {
          tooltip.transition()
               .duration(200)
               .style("opacity", .9);
          tooltip.html(d.city + "<br/>" + d.sepalWidth.toFixed(2)
	        + " km <br/> $" + d.sepalLength.toFixed(2))
               .style("left", (d3.event.pageX - 40) + "px")
               .style("top", (d3.event.pageY - 28) + "px");
      })
      .on("mouseout", function(d) {
          tooltip.transition()
               .duration(500)
               .style("opacity", 0);
      });

  var legend = svg.selectAll(".legend")
      .data(color.domain())
    .enter().append("g")
      .attr("class", "legend")
      .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

  legend.append("rect")
      .attr("x", width - 18)
      .attr("width", 18)
      .attr("height", 18)
      .style("fill", color);

  legend.append("text")
      .attr("x", width - 24)
      .attr("y", 9)
      .attr("dy", ".35em")
      .style("text-anchor", "end")
      .text(function(d) { return d; });

});

</script>