Skip to content

Instantly share code, notes, and snippets.

View simzou's full-sized avatar

Simon Zou simzou

34 followers · 14 following
View GitHub Profile
@simzou
simzou / README.md
Last active November 15, 2015 22:57
Civic Impact through Data Visualization: Exercise 1

Join the chat at https://gitter.im/Jay-Oh-eN/data-scientists-guide-apache-spark

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:

And please do not hesitate to reach out to me directly via email at [email protected] 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.

@simzou
simzou / index.html
Last active October 19, 2015 00:13
Earthquake Data with Handlebars Templates
<!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 -->
@simzou
simzou / index.html
Last active May 29, 2019 19:35
Stacked Area Chart with Google Charts and NVD3
<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>
@simzou
simzou / app.js
Last active January 2, 2016 23:22
Dual Axes Line Chart Using Google Charts pulling from Google Sheets
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) {
@simzou
simzou / index.html
Last active May 24, 2018 13:36
Using Google Sheets with Underscore HTML Templates
<!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 -->
@simzou
simzou / README.md
Last active August 15, 2024 22:00
US Map of Nielsen Media Markets
@simzou
simzou / index.html
Last active December 22, 2015 08:19
Kobe Bryant 2012-13 Game Log Multi Line Chart Using NVD3
<!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>
@simzou
simzou / README.md
Last active December 22, 2015 07:39
Kobe Bryant 2012-13 Game Log Line Graph

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: