|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<meta charset="utf-8"> |
|
<meta name="viewport" content="width=device-width"> |
|
<script src="https://d3js.org/d3.v4.min.js"></script> |
|
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700" rel="stylesheet"> |
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.24.0/d3-legend.min.js"></script> |
|
<title>Scatter Plot</title> |
|
<style> |
|
body { |
|
margin: 0px; |
|
} |
|
.tick text, .legendCells text { |
|
fill: #111111; |
|
font-size: 10pt; |
|
font-family: 'Open Sans', sans-serif; |
|
} |
|
.axis-label, .legend-label { |
|
fill: #AAAAAA; |
|
font-size: 10pt; |
|
font-family: 'Open Sans', sans-serif; |
|
} |
|
.subtitle { |
|
font-size: 40pt; |
|
font-family: 'Open Sans', sans-serif; |
|
alignment-baseline: middle; |
|
fill: #001f3f; |
|
} |
|
circle:hover { |
|
fill: #F012BE; |
|
} |
|
div.tooltip { |
|
position: absolute; |
|
text-align: center; |
|
width: 150px; |
|
height: 30px; |
|
vertical-align: middle; |
|
line-height: 30px; |
|
font-family:'Open Sans', sans-serif; |
|
background: #FFDC00; |
|
border: 0px; |
|
border-radius: 8px; |
|
pointer-events: none; |
|
} |
|
|
|
</style> |
|
</head> |
|
<body> |
|
<script> |
|
const parseTime = d3.timeParse("%m/%d/%Y"); |
|
const yValue = d => d.Counts; |
|
const yLabel = 'Bomb Counts'; |
|
const colorValue = d => d.Country; |
|
const colorLabel = 'Countries'; |
|
const margin = { left: 120, right: 120, top: 20, bottom: 120 }; |
|
|
|
const svg = d3.select("body").append("svg") |
|
.attr("width", 1000) |
|
.attr("height", 500); |
|
|
|
const width = svg.attr('width'); |
|
const height = svg.attr('height'); |
|
const innerWidth = width - margin.left - margin.right; |
|
const innerHeight = height - margin.top - margin.bottom; |
|
|
|
const g = svg.append('g') |
|
.attr('transform', `translate(${margin.left},${margin.top+50})`); |
|
const xAxisG = g.append('g') |
|
.attr('transform', `translate(0, ${innerHeight})`); |
|
const yAxisG = g.append('g'); |
|
|
|
var temp = d3.select('body').append('div') |
|
.attr('class', 'tooltip') |
|
.style('opacity', 0); |
|
|
|
|
|
g.append('text') |
|
.attr('class', 'subtitle') |
|
.attr('x', 0) |
|
.attr('y', margin.top-50) |
|
.style('font-weight', 'bold') |
|
.text('Uber rides daily frequency'); |
|
|
|
|
|
xAxisG.append('text') |
|
.attr('class', 'axis-label') |
|
.attr('x', innerWidth / 2) |
|
.attr('y', 50) |
|
.text('Date'); |
|
|
|
yAxisG.append('text') |
|
.attr('class', 'axis-label') |
|
.attr('x', -innerHeight / 2) |
|
.attr('y', -60) |
|
.attr('transform', `rotate(-90)`) |
|
.style('text-anchor', 'middle') |
|
.text('Ride Count'); |
|
|
|
const xScale = d3.scaleTime(); |
|
const yScale = d3.scaleLinear(); |
|
const rScale = d3.scaleLinear(); |
|
const colorScale = d3.scaleOrdinal() |
|
.range(d3.schemeCategory10); |
|
|
|
const xAxis = d3.axisBottom() |
|
.scale(xScale) |
|
.ticks(10) |
|
.tickPadding(20) |
|
.tickFormat(d3.timeFormat("%y/%m/%d")) |
|
.tickSize(5); |
|
|
|
const yAxis = d3.axisLeft() |
|
.scale(yScale) |
|
.ticks(10) |
|
.tickPadding(15) |
|
.tickSize(5); |
|
|
|
|
|
var line = d3.line() |
|
.x(function(d) {return xScale(parseTime(d.key));}) |
|
.y(function(d) {return yScale(d.value);}); |
|
|
|
d3.csv('My Uber Drives - 2016.csv', data => { |
|
data = data.filter(function(d){ return d.START_DATE != 'Totals';}) |
|
|
|
xScale |
|
.domain(d3.extent(data, d=>parseTime(d.START_DATE.split(' ')[0]))) |
|
.range([0, innerWidth]) |
|
.nice(); |
|
|
|
data = d3.nest() |
|
.key(function(d) {return d.START_DATE.split(' ')[0]; }).sortKeys(function(a,b) { return new Date(b) - new Date(a);}) |
|
.rollup(d => d.length) |
|
.entries(data); |
|
|
|
|
|
yScale |
|
.domain([0,15]) |
|
.range([innerHeight, 0]) |
|
.nice(); |
|
|
|
|
|
g.append('path') |
|
.datum(data) |
|
.attr("fill", "none") |
|
.attr("stroke", d => colorScale(d.key)) |
|
.attr("stroke-linejoin", "round") |
|
.attr("stroke-linecap", "round") |
|
.attr("stroke-width", 1) |
|
.attr("d", line) |
|
|
|
|
|
|
|
|
|
xAxisG.call(xAxis); |
|
yAxisG.call(yAxis); |
|
}); |
|
</script> |
|
</body> |
|
</html> |
