New Zealand Earthquakes by d3noob

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<style>

body {
	  font: 12px sans-serif;
}

.axis path,
.axis line {
	fill: none;
	stroke: grey;
	shape-rendering: crispEdges;
}

.dot {
	stroke: none;
	fill: steelblue;
}

.grid .tick {
	stroke: lightgrey;
	opacity: 0.7;
}
.grid path {
	stroke-width: 0;
}

div.tooltip {
	position: absolute;
	text-align: center;
	width: 80px;
	height: 42px;
	padding: 2px;
	font: 12px sans-serif;
	background: #ddd;
	border: solid 0px #aaa;
	border-radius: 8px;
	pointer-events: none;
}

</style>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>

<script>

var margin = {top: 40, right: 20, bottom: 30, left: 100},
    width = 600 - margin.left - margin.right,
    height = 900- margin.top - margin.bottom;
	parseDay_Time = d3.time.format("%d-%m-%Y %H:%M").parse;
	parseWeek_Year = d3.time.format("%d-%m-%Y").parse;

var formatDay_Time = d3.time.format("%a %H:%M");	
var formatWeek_Year = d3.time.format("%d-%m-%Y");	

var x = d3.time.scale().range([0, width]);
var y = d3.time.scale().range([0, height]);

var xAxis = d3.svg.axis()
	.scale(x)
	.orient("bottom")
	.ticks(7)
	.tickFormat(d3.time.format("%A")); 		

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .ticks(24);

var svg = d3.select("body")
	.append("svg")
		.attr("width", width + margin.left + margin.right)
		.attr("height", height + margin.top + margin.bottom)
	.append("g")
		.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// State the functions for the grid
function make_x_axis() {
  return d3.svg.axis()
      .scale(x)
      .orient("bottom")
      .ticks(7)
}

// Get the data
d3.csv("earthquakes03.csv", function(error, data) {
  data.forEach(function(d) {
	d.week_year = parseWeek_Year(d.week_year);
	d.day_time = parseDay_Time(d.day_time);
    d.value = +d.value;
  });

	// Set the domains
	x.domain([new Date(1899, 11, 31, 0, 0, 0), new Date(1900, 00, 06, 23, 59, 59)]);
  y.domain([new Date(2010, 05, 29, 0, 0, 0), new Date(2012, 07, 29, 23, 59, 59)]);
// y.domain(d3.extent(data, function(d) { return d.week_year; }));

	// tickSize: Get or set the size of major, minor and end ticks
	svg.append("g").classed("grid x_grid", true)
		.attr("transform", "translate(0," + height + ")")
		.style("stroke-dasharray", ("3, 3, 3"))
		.call(make_x_axis()
			.tickSize(-height, 0, 0)
			.tickFormat("")
		)

	// Draw the Axes and the tick labels
	svg.append("g")
		.attr("class", "x axis")
		.attr("transform", "translate(0," + height + ")")
		.call(xAxis)
	.selectAll("text")
		.attr("dx", 35)
		.attr("dy", 5)
		.style("text-anchor", "middle");

	svg.append("g")
		.attr("class", "y axis")
		.call(yAxis)
	.selectAll("text")
		.attr("dx", 2)
		.attr("dy", 22)
		.style("text-anchor", "end");

	// Tooltip stuff
	var div = d3.select("body").append("div")
		.attr("class", "tooltip")
		.style("opacity", 1e-6);

	// draw the plotted circles
	svg.selectAll(".dot")
		.data(data)
	.enter().append("circle")
		.attr("class", "dot")
		.attr("r", function(d) { return ((d.value-3)*5); })
		.style("opacity", 0.13)
		.attr("cx", function(d) { return x(d.day_time); })
		.attr("cy", function(d) { return y(d.week_year); })
	// Tooltip stuff after this
	    .on("mouseover", function(d) {
			div.transition()
				.duration(200)
				.style("opacity", .7);
			div	.html(
					formatDay_Time(d.day_time) + "<br/>"  + 
					formatWeek_Year(d.week_year) + "<br/> M"  +
					d.value)	
				.style("left", (d3.event.pageX) + "px")
				.style("top", (d3.event.pageY - 42) + "px");
			})	
		.on("mouseout", function(d) {
			div.transition()
				.duration(500)
				.style("opacity", 1e-6);
		});	

	// Add the title
	svg.append("text")
		.attr("x", (width / 2))				
		.attr("y", 0 - (margin.top / 2))	
		.attr("text-anchor", "middle")		
		.style("font-size", "16px") 		
		.style("text-decoration", "underline") 	
		.text("New Zealand Earthquakes");	

});

</script>