|
<!DOCTYPE html> |
|
<!-- A modified example from Scott Murray's Knight d3 course. --> |
|
|
|
<html lang="en"> |
|
<head> |
|
<meta charset="utf-8"> |
|
<title>Formatting Ticks</title> |
|
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script> |
|
<style type="text/css"> |
|
|
|
body { |
|
background-color: white; |
|
font-family: Helvetica, Arial, sans-serif; |
|
} |
|
|
|
h1 { |
|
font-size: 24px; |
|
margin-left: 50px; |
|
color: #8c1aff; |
|
} |
|
|
|
p { |
|
font-size: 14px; |
|
margin: 10px 0 0 0; |
|
} |
|
|
|
svg { |
|
background-color: white; |
|
} |
|
|
|
circle { |
|
fill:#b366ff; |
|
} |
|
|
|
|
|
|
|
.axis path, |
|
.axis line { |
|
fill: none; |
|
stroke: grey; |
|
shape-rendering: crispEdges; |
|
} |
|
|
|
.axis text { |
|
font-family: sans-serif; |
|
font-size: 14px; |
|
fill:grey; |
|
} |
|
.xlabel { |
|
font-famile: sans-serif; |
|
font-size: 16px; |
|
fill: grey; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
|
|
<h1>Speed and Stopping Distances of Cars</h1> |
|
|
|
<p style="margin-left:50px;">Many drivers, drive in a false belief that if the car in front suddenly started braking, they would react and brake and end up stopped the same distance apart.The total stopping distance of a vehicle is made up of 4 components:Human Perception Time, Human Reaction Time, Vehicle Reaction Time, Vehicle Braking Capability.The following data shows a positive relationship between Speed and Distance.</p> |
|
<p style="color:grey;margin-left:50px; "> Source: <a href="https://vincentarelbundock.github.io/Rdatasets/datasets.html">See the data</a>, 2014</p> |
|
|
|
<script type="text/javascript"> |
|
|
|
// Scott is "cheating" and not using the full pattern for margins. |
|
// It is better to use the object style with margin.top, margin.right, etc. |
|
|
|
var fullWidth = 700; |
|
var fullHeight = 600; |
|
|
|
var margin = {top:20, left:80, right:50, bottom: 50}; //Top, right, bottom, left |
|
|
|
// what do you need to do to make the width and height for the chart? |
|
var height = fullHeight - margin.top -margin.bottom; |
|
var width = fullWidth - margin.left - margin.right; |
|
|
|
var dotRadius = 4.8; // fix this to a nice value. |
|
|
|
// fill in the margin values here. |
|
var xScale = d3.scale.linear() |
|
.range([0,width]); |
|
|
|
// top to bottom: |
|
var yScale = d3.scale.linear() |
|
.range([height,0]); |
|
|
|
// Custom tick count if you want it. |
|
// Create your axes here. |
|
var xAxis = d3.svg.axis() |
|
.scale(xScale) |
|
.orient("bottom") |
|
.ticks(10); // fix this to a good number of ticks for your scale later. |
|
|
|
var yAxis = d3.svg.axis() |
|
.scale(yScale) |
|
.orient("left"); |
|
|
|
var svg = d3.select("body") |
|
.append("svg") |
|
.attr("width", fullWidth) |
|
.attr("height", fullHeight) |
|
.append("g") |
|
.attr("transform","translate(" + margin.left +"," + margin.top + ")"); |
|
|
|
|
|
d3.csv("cars.csv", function(data) { |
|
|
|
// look at the data file and pick 2 columns to contrast with each other. |
|
|
|
xScale.domain( |
|
d3.extent(data, function(d) { |
|
return +d.speed; |
|
})); |
|
|
|
yScale.domain( |
|
d3.extent(data, function(d) { |
|
return +d.dist; |
|
})); |
|
|
|
var circles = svg.selectAll("circle") |
|
.data(data) |
|
.enter() |
|
.append("circle") |
|
.classed("dots", true) |
|
.on("mouseover", function(d){ |
|
d3.select(this).attr("r",7) |
|
.style("fill", "#e6ccff") |
|
.style("stroke","#6600cc") |
|
.style("stroke-width", 2); |
|
}) |
|
.on("mouseout",function(d){ |
|
|
|
d3.select(this).attr("r",dotRadius) |
|
.style("fill", "#b366ff") |
|
.style("stroke","#b366ff"); |
|
|
|
}); |
|
|
|
// Circles in SVG have cx, cy, and r attributes. x location, y location, radius. |
|
|
|
circles.attr("cx", function(d) { |
|
return xScale(+d.speed); |
|
}) |
|
.attr("cy", function(d) { |
|
return yScale(+d.dist); |
|
}) |
|
.attr("r", dotRadius) // you might want to increase your dotRadius// add a fill rule with a special case for one of the countries |
|
.append("title") |
|
.text(function(d) { return "this is car No." + d.Car |
|
}); |
|
|
|
// fix these translates so they use your margin and height width as needed |
|
svg.append("g") |
|
.attr("class", "x axis") |
|
.attr("transform", "translate(0," +height+ ")") |
|
.call( xAxis ); |
|
|
|
svg.append("g") |
|
.attr("class", "y axis" ) |
|
.call( yAxis); |
|
|
|
svg.append("text") |
|
.attr("class", "xlabel") |
|
.attr("transform", "translate(" + (margin.left + width / 2 - 60) + " ," + |
|
(height + margin.bottom - 20) + ")") |
|
.style("text-anchor", "middle") |
|
.attr("dy", "12") |
|
.text("Speed") |
|
.style("font-size","16"); |
|
|
|
svg.append("text") |
|
.attr("transform", "rotate(-90)") |
|
.attr("y", 0 - margin.left + 20) // you may need to adjust this |
|
.attr("x", 0 - (height / 2)) // you may need to adjust |
|
.attr("dy", "1em") |
|
.style("text-anchor", "middle") |
|
.text("Distance") |
|
.style("fill","grey"); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
</script> |
|
|
|
</body> |
|
</html> |
