read json svg

_.md

[ Launch: read json ] 4729040 by jspschool
[ Launch: read json ] 4729039 by jspschool

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}]

chart.css

.axis path{ fill:none;
stroke: black; }
.axis {
font-size:8pt; font-family:sans-serif;
}
.tick {
fill:none;
stroke:black; }
circle{
stroke:black; stroke-width:0.5px; fill:RoyalBlue;
  opacity:0.6; }

config.json

{"description":"read json svg","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"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},"bus_perf.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"chart.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01}

inlet.js

var margin = 50, width = tributary.sw, height = tributary.sh;

var data = tributary.bus_perf;

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

svg.attr("width",width)
   .attr("height",height)
   .selectAll("circle")
   .data(data)
   .enter()
   .append("circle");

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);

d3.selectAll("circle")
.attr("cx", function(d){ return x_scale(d.collision_with_injury)})
.attr("cy", function(d){ return y_scale(d.dist_between_fail)});

d3.selectAll("circle")
.attr("r", 5);




var x_axis = d3.svg.axis().scale(x_scale);

svg.append("g")
   .attr("class","x axis")
   .attr("transform", "translate(0, "+ (height-margin) + ")" )
   .call(x_axis);
   

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

svg.append("g")
   .attr("class","y axis")
   .attr("transform", "translate("+ margin + ", 0)" )
   .call(y_axis);