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>
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>
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
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
View china_flare.json
{
"name": "Chinese Emigration",
"children":
[
{"name": "Africa",
"children":
[{"name": "Algeria", "arrivals": 759},
{"name": "Botswana", "arrivals": 2790},
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;
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>
View americas.json
{
"name": "Soccer Confederations of the Americas",
"children": [
{
"name": "CONCACAF",
"children": [
{
"name": "North American Zone",
"children": [
{"name": "Canada"},
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;
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;