trib_scatter_plot

_.md

[ Launch: trib_scatter_plot ] 7c1b0fa4d5cba634e2a3 by jshumakerpruitt

bus_perf.json

[{"collision_with_injury": 3.2, "dist_between_fail": 3924.0, "customer_accident_rate": 2.12},
 {"collision_with_injury": 2.8, "dist_between_fail": 3914.0, "customer_accident_rate": 1.3}, 
 {"collision_with_injury": 4.05, "dist_between_fail": 3550.0, "customer_accident_rate": 1.5},
 {"collision_with_injury": 4.7, "dist_between_fail": 3625.0, "customer_accident_rate": 0.79}, 
 {"collision_with_injury": 2.0, "dist_between_fail": 3171.0, "customer_accident_rate": 2.8}, 
 {"collision_with_injury": 9.29, "dist_between_fail": 2699.0, "customer_accident_rate": 1.28}, 
 {"collision_with_injury": 9.29, "dist_between_fail": 3008.0, "customer_accident_rate": 1.28}, 
 {"collision_with_injury": 2.3, "dist_between_fail": 2815.0, "customer_accident_rate": 1.74}, 
 {"collision_with_injury": 4.65, "dist_between_fail": 3366.0, "customer_accident_rate": 1.17}, 
 {"collision_with_injury": 5.32, "dist_between_fail": 3667.0, "customer_accident_rate": 0.82},
 {"collision_with_injury": 4.1, "dist_between_fail": 4170.0, "customer_accident_rate": 0.8}, 
 {"collision_with_injury": 3.87, "dist_between_fail": 3294.0, "customer_accident_rate": 1.01},
 {"collision_with_injury": 3.43, "dist_between_fail": 3595.0, "customer_accident_rate": 1.31},
 {"collision_with_injury": 6.23, "dist_between_fail": 4067.0, "customer_accident_rate": 1.54},
 {"collision_with_injury": 3.82, "dist_between_fail": 3353.0, "customer_accident_rate": 1.03}, 
 {"collision_with_injury": 6.91, "dist_between_fail": 3743.0, "customer_accident_rate": 1.17},
 {"collision_with_injury": 9.31, "dist_between_fail": 3259.0, "customer_accident_rate": 1.36}, 
 {"collision_with_injury": 7.01, "dist_between_fail": 3184.0, "customer_accident_rate": 1.25}, 
 {"collision_with_injury": 7.08, "dist_between_fail": 2813.0, "customer_accident_rate": 1.96},
 {"collision_with_injury": 10.3, "dist_between_fail": 3119.0, "customer_accident_rate": 0.63}, 
 {"collision_with_injury": 3.74, "dist_between_fail": 3494.0, "customer_accident_rate": 1.27},
 {"collision_with_injury": 4.37, "dist_between_fail": 3426.0, "customer_accident_rate": 1.21}, 
 {"collision_with_injury": 5.22, "dist_between_fail": 3415.0, "customer_accident_rate": 1.76},
 {"collision_with_injury": 3.98, "dist_between_fail": 3585.0, "customer_accident_rate": 1.17},
 {"collision_with_injury": 6.17, "dist_between_fail": 3162.0, "customer_accident_rate": 1.01}, 
 {"collision_with_injury": 1.92, "dist_between_fail": 3047.0, "customer_accident_rate": 1.02},
{"collision_with_injury": 5.15, "dist_between_fail": 3650.0, "customer_accident_rate": 0.83}]

config.json

{"description":"trib_scatter_plot","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"bus_perf.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/jDfbNzi.gif"}

inlet.js

var svg = d3.select("svg");

var data =  tributary.bus_perf;
var margin = 50; 
var width=700;
var height=300;
svg.append("rect")
.attr({ 
  height: height-margin,
  width: width-margin,
  fill: "LightBlue"
})
.attr("transform","translate(50, 50)");

var  x_extent  = d3.extent(data, function(d){return d.collision_with_injury;});

var x_scale  = d3.scale.linear().range([margin,width-margin]).domain(x_extent);
var y_extent =  d3.extent(data,  function(d){  return d.dist_between_fail });
var y_scale  =  d3.scale.linear().range([height-margin, margin]).domain(y_extent);
svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr({
  cx: function(d) {return x_scale(d.collision_with_injury)},
  cy: function(d) {return y_scale(d.dist_between_fail)},
  r: 5,
  fill: "red"
})
.attr("transform","translate(0,50)");

var x_axis = d3.svg.axis().scale(x_scale)
var y_axis = d3.svg.axis().scale(y_scale).orient("left");

svg.append("g").attr("class", "x axis").attr("transform","translate(0,300)").call(x_axis);
svg.append("g").attr("class", "y axis").attr("transform","translate(50,50)").call(y_axis);


svg.select(".x.axis")
.append("text")
.text("collisions with injury (per million miles)")
.attr({
  x: (width/2) + margin,
  y: margin/1.5
})

svg.select(".y.axis")
.append("text")
.text("mean distance between failure (miles)")
.attr("transform","rotate(-90,-43,0) translate(-280)")

svg.selectAll(".axis path").attr({
  fill: "none",
  stroke: "black"
  });
svg.selectAll(".axis").attr({
  "font-size": "8pt",
  "font-family": "sans-serif"
})
  
svg.selectAll(".tick").attr({
  fill: "none",
  stroke: "black"
})

svg.selectAll("circle").attr({
  stroke: "black",
  "stroke-width": "0.5px",
  fill: "RoyalBlue",
  opacity: 0.6
})