Simon Zou simzou

These are the materials for my workshop on creating interactive data visualizations with D3! We will be using the following two tools to works through these exercises:

bl.ocks.org: D3.js Gist renderer and online community
Building Blocks: In-browser interactive D3.js bl.ock editor

And please do not hesitate to reach out to me directly via email at jondinu@gmail.com or over twitter @clearspandex

Throughout this workshop, you will learn how to make an interactive map of AirBnB listings in SF to better understand the companies impact on the city.

This is the map of Nielen Designated Marketing Areas using D3.js. Hover over for data related to each area.

See map here

See code here

###Credits

Map adapted from Mike Bostock's map example
Topojson made by converting shapefile from here to topojson via Mike Bostock's instructions

This graph shows a multi series line graph for the game log of Kobe Bryant's 2012-2013 season using D3.js.

Different stats can be toggled on and off by clicking the legend boxes on the right and the y axis will adjust accordingly.

See graph here

###Credits:

Data via basketball-reference
Adapted from Mike Bostock's Multi-Series Line Chart and Jason Ng's MPF Graph

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />

	<title>EARTHQUAKE!</title>
	<meta name="description" content="Earthquake data." />

	<!-- Open Graph -->

	<html>
	<head>
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.7.0/nv.d3.min.css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.7.0/nv.d3.min.js"></script>
	<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
	<script type="text/javascript" src="https://www.google.com/jsapi"></script>
	<script type="text/javascript" src="main.js"></script>
	</head>

	google.load('visualization', '1', {packages: ['corechart']});
	google.setOnLoadCallback(main);

	var url = "https://spreadsheets.google.com/feeds/list/1XN5NxxILuWs5osbksgvBMEoEaEGSVZIEF7NK5vmJivs/1/public/values?alt=json"
	var data = {};


	// GET VARIABLE
	var $_GET = {};
	if(document.location.toString().indexOf('?') !== -1) {

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta content="width=device-width, initial-scale=1.0" name="viewport">

	<title>Using Google Spreadsheets with Underscore Templates</title>
	<meta content="Pulling information from Google Docs" name="description">
	<!-- Open Graph -->
	<meta content="Google Doc to JSON"><!-- CSS -->

	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<title>Kobe Bryant 2012-13 Game Log Line Graph Using NVD3</title>
	<link rel="stylesheet" type="text/css" href="nv.d3.css">
	</head>
	<body>
	<script src="http://d3js.org/d3.v3.js"></script>
	<script src="nv.d3.js"></script>