Skip to content

Instantly share code, notes, and snippets.

Avatar

Bessie Chu bessiec

View GitHub Profile
@bessiec
bessiec / index.html
Last active Jun 1, 2020
D3 Venn Diagram Example
View index.html
<!doctype html>
<head>
<title>Audience Comparison</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
@bessiec
bessiec / index.html
Last active Nov 26, 2016
D3 Steamgraph Example on Media Impressions
View index.html
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<title>Steamgraph Showing Distribution of Media Impressions</title>
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<title>Steamgraph Showing Distribution of Media Impressions</title>
<script src="https://d3js.org/d3.v2.js"></script>
@bessiec
bessiec / cable_buytime.csv
Created Nov 26, 2016
Pie Chart Time Series using Dimple.js
View cable_buytime.csv
Air Date Media Type Act Impression
11/18/2015 Cable 22554
11/17/2015 Cable 23603
11/21/2015 Cable 22581
11/28/2015 Cable 27410
11/20/2015 Cable 23564
11/26/2015 Cable 23774
11/28/2015 Cable 27410
11/26/2015 Cable 23774
11/4/2015 Cable 26709
@bessiec
bessiec / even.csv
Last active Nov 25, 2016
Understanding Digital Attribution Methods using D3 Bar Charts
View even.csv
Medium Attribution
Pre-Roll Video 0.5
Streaming Music Pre-Roll 0.5
Site Takeover 0.5
Programmatic Buy 0.5
Social Ad 0.5
Direct Buy 0.5
Search 0.5
@bessiec
bessiec / china_flare.json
Last active Nov 25, 2016
Chinese Emigration 1990-2010 via D3 Node Tree
View china_flare.json
{
"name": "Chinese Emigration",
"children":
[
{"name": "Africa",
"children":
[{"name": "Algeria", "arrivals": 759},
{"name": "Botswana", "arrivals": 2790},
@bessiec
bessiec / d3.js
Last active Nov 26, 2016
D3 Collapsing Bubbles of the Origin of Migrants into the US
View d3.js
!function() {
var d3 = {
version: "3.5.16"
};
var d3_arraySlice = [].slice, d3_array = function(list) {
return d3_arraySlice.call(list);
};
var d3_document = this.document;
function d3_documentElement(node) {
return node && (node.ownerDocument || node.document || node).documentElement;
@bessiec
bessiec / index.html
Last active Nov 25, 2016
D3 Steamgraph of Migration into the United States
View index.html
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<title>Steamgraph of Migration into the United States</title>
<script src="https://d3js.org/d3.v2.js"></script>
<link href="https://fonts.googleapis.com/css?family=Titillium+Web" rel="stylesheet">
<style>
@bessiec
bessiec / americas.json
Last active Nov 26, 2016
D3 Network of the Soccer Confederations of the Americas
View americas.json
{
"name": "Soccer Confederations of the Americas",
"children": [
{
"name": "CONCACAF",
"children": [
{
"name": "North American Zone",
"children": [
{"name": "Canada"},
@bessiec
bessiec / index.html
Created Aug 16, 2016
MLS 2015 Selected Team Stat Correlations Visuals
View index.html
<html>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.js"> </script>
<link href='https://fonts.googleapis.com/css?family=Mako' rel='stylesheet' type='text/css'>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.7.0/d3-tip.js"></script>
<meta charset="utf-8">
<style>
.axis line, .axis path {
shape-rendering: crispEdges;
stroke: black;
@bessiec
bessiec / index.html
Last active Nov 25, 2016
NYCFC Shots v Shots-on-Goal Using DimpleJS
View index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dimple/2.2.0/dimple.latest.js"></script>
<link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
<style>
body {
font-family: Source Sans Pro;