Built with blockbuilder.org
Working through the book Getting Started with D3
Built with blockbuilder.org
Working through the book Getting Started with D3
[ | |
{ | |
"collision_with_injury": 3.2, | |
"dist_between_fail": 3924, | |
"customer_accident_rate": 2.12 | |
}, | |
{ | |
"collision_with_injury": 2.8, | |
"dist_between_fail": 3914, | |
"customer_accident_rate": 1.3 | |
}, | |
{ | |
"collision_with_injury": 4.05, | |
"dist_between_fail": 3550, | |
"customer_accident_rate": 1.5 | |
}, | |
{ | |
"collision_with_injury": 4.7, | |
"dist_between_fail": 3625, | |
"customer_accident_rate": 0.79 | |
}, | |
{ | |
"collision_with_injury": 2, | |
"dist_between_fail": 3171, | |
"customer_accident_rate": 2.8 | |
}, | |
{ | |
"collision_with_injury": 9.29, | |
"dist_between_fail": 2699, | |
"customer_accident_rate": 1.28 | |
}, | |
{ | |
"collision_with_injury": 9.29, | |
"dist_between_fail": 3008, | |
"customer_accident_rate": 1.28 | |
}, | |
{ | |
"collision_with_injury": 2.3, | |
"dist_between_fail": 2815, | |
"customer_accident_rate": 1.74 | |
}, | |
{ | |
"collision_with_injury": 4.65, | |
"dist_between_fail": 3366, | |
"customer_accident_rate": 1.17 | |
}, | |
{ | |
"collision_with_injury": 5.32, | |
"dist_between_fail": 3667, | |
"customer_accident_rate": 0.82 | |
}, | |
{ | |
"collision_with_injury": 4.1, | |
"dist_between_fail": 4170, | |
"customer_accident_rate": 0.8 | |
}, | |
{ | |
"collision_with_injury": 3.87, | |
"dist_between_fail": 3294, | |
"customer_accident_rate": 1.01 | |
}, | |
{ | |
"collision_with_injury": 3.43, | |
"dist_between_fail": 3595, | |
"customer_accident_rate": 1.31 | |
}, | |
{ | |
"collision_with_injury": 6.23, | |
"dist_between_fail": 4067, | |
"customer_accident_rate": 1.54 | |
}, | |
{ | |
"collision_with_injury": 3.82, | |
"dist_between_fail": 3353, | |
"customer_accident_rate": 1.03 | |
}, | |
{ | |
"collision_with_injury": 6.91, | |
"dist_between_fail": 3743, | |
"customer_accident_rate": 1.17 | |
}, | |
{ | |
"collision_with_injury": 9.31, | |
"dist_between_fail": 3259, | |
"customer_accident_rate": 1.36 | |
}, | |
{ | |
"collision_with_injury": 7.01, | |
"dist_between_fail": 3184, | |
"customer_accident_rate": 1.25 | |
}, | |
{ | |
"collision_with_injury": 7.08, | |
"dist_between_fail": 2813, | |
"customer_accident_rate": 1.96 | |
}, | |
{ | |
"collision_with_injury": 10.3, | |
"dist_between_fail": 3119, | |
"customer_accident_rate": 0.63 | |
}, | |
{ | |
"collision_with_injury": 3.74, | |
"dist_between_fail": 3494, | |
"customer_accident_rate": 1.27 | |
}, | |
{ | |
"collision_with_injury": 4.37, | |
"dist_between_fail": 3426, | |
"customer_accident_rate": 1.21 | |
}, | |
{ | |
"collision_with_injury": 5.22, | |
"dist_between_fail": 3415, | |
"customer_accident_rate": 1.76 | |
}, | |
{ | |
"collision_with_injury": 3.98, | |
"dist_between_fail": 3585, | |
"customer_accident_rate": 1.17 | |
}, | |
{ | |
"collision_with_injury": 6.17, | |
"dist_between_fail": 3162, | |
"customer_accident_rate": 1.01 | |
}, | |
{ | |
"collision_with_injury": 1.92, | |
"dist_between_fail": 3047, | |
"customer_accident_rate": 1.02 | |
}, | |
{ | |
"collision_with_injury": 5.15, | |
"dist_between_fail": 3650, | |
"customer_accident_rate": 0.83 | |
} | |
] |
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> | |
<style> | |
body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; } | |
/*svg { width:100%; height: 100% }*/ | |
svg{margin-left: 50;} | |
.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; | |
} | |
</style> | |
</head> | |
<body> | |
<script> | |
d3.json('bus_perf.json', draw); | |
function draw(data) { | |
"use strict"; | |
var margin = 50, | |
width = 700, | |
height = 400, | |
x_extent = d3.extent(data, function(d){return d.collision_with_injury}), | |
y_extent = d3.extent(data, function(d){return d.dist_between_fail}); | |
var x_scale = d3.scale.linear() | |
.range([margin,width-margin]) | |
.domain(x_extent) | |
var y_scale = d3.scale.linear() | |
.range([height-margin, margin]) | |
.domain(y_extent) | |
var x_axis = d3.svg.axis().scale(x_scale) | |
var y_axis = d3.svg.axis().scale(y_scale).orient('left') | |
d3.select("body") | |
.append('svg') | |
.attr('width', width) | |
.attr('height', height) | |
.selectAll('circle') | |
.data(data) | |
.enter() | |
.append('circle') | |
.attr('cx', function(d){return x_scale(d.collision_with_injury)}) | |
.attr('cy', function(d){return y_scale(d.dist_between_fail)}) | |
.attr('r', 5) | |
d3.select("svg") | |
.append("g") | |
.attr("class", "x axis") | |
.attr("transform", "translate(0," + (height-margin) + ")") | |
.call(x_axis); | |
d3.select("svg") | |
.append("g") | |
.attr("class", "y axis") | |
.attr("transform", "translate(" + margin + ", 0 )") | |
.call(y_axis); | |
d3.select('.y.axis') | |
.append('text') | |
.text('mean distance between failure (miles)') | |
.attr('transform', "rotate (-90, -43, 0) translate(-280)") | |
d3.select('.x.axis') | |
.append('text') | |
.text('collisions with injury (per million miles)') | |
.attr('x', function(){return (width / 2) - margin}) | |
.attr('y', margin/1.5) | |
} | |
</script> | |
</body> |