Skip to content

Instantly share code, notes, and snippets.

View DimsumPanda's full-sized avatar

DimsumPanda DimsumPanda

3 followers · 0 following
View GitHub Profile
@DimsumPanda
DimsumPanda / index.html
Last active August 1, 2016 15:42
Stacked Bars D3 v3
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link href="style.css" rel="stylesheet"></link>
</head>
<body>
<h2>Segments</h2>
<div id="form">
<label><input type="radio" name="mode" value="bycount" checked>Raw Count</label>
@DimsumPanda
DimsumPanda / index.html
Created July 30, 2016 09:59
Stacked Bar Charts D3 v4
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.bar {
fill: steelblue;
}
.axis path {
/*display: none;*/
@DimsumPanda
DimsumPanda / d3-function.js
Last active July 29, 2016 19:51
stackedBarcharts
var margin = {top: 20, right: 150, bottom: 50, left: 40},
width = 980 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var xScale = d3.scale.ordinal()
.rangeRoundBands([0, width], .3);
var yScale = d3.scale.linear()
.rangeRound([height, 0]);
@DimsumPanda
DimsumPanda / index.html
Created December 13, 2015 03:43
Scatterplot Practice
<!DOCTYPE html>
<!-- Modified example from enjalot: http://bl.ocks.org/enjalot/1429426 -->
<html>
<head>
<title>Bar Transition Example</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
@DimsumPanda
DimsumPanda / bootstrap.min.css
Created November 30, 2015 21:27
/*!
* Bootstrap v3.3.5 (http://getbootstrap.com)
* Copyright 2011-2015 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*//*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{margin:.67em 0;font-size:2em}mark{color:#000;background:#ff0}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{height:0;-webkit-box-si
@DimsumPanda
DimsumPanda / highChildMortality1990.csv
Last active November 30, 2015 21:26
Week 13: Small Multiples
country year mortalityRate
Angola 1990 226
Angola 1991 225.9
Angola 1992 226
Angola 1993 225.8
Angola 1994 225.5
Angola 1995 224.8
Angola 1996 224
Angola 1997 222.6
Angola 1998 220.8
@DimsumPanda
DimsumPanda / highChildMortality_reformat.csv
Created November 30, 2015 21:12
Week 13: Small Multiples
country year childMortality
Angola 1990 226
Angola 1991 225.9
Angola 1992 226
Angola 1993 225.8
Angola 1994 225.5
Angola 1995 224.8
Angola 1996 224
Angola 1997 222.6
Angola 1998 220.8
@DimsumPanda
DimsumPanda / bootstrap.min.css
Created November 25, 2015 04:32
Week13: Progress
/*!
* Bootstrap v3.3.5 (http://getbootstrap.com)
* Copyright 2011-2015 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*//*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{margin:.67em 0;font-size:2em}mark{color:#000;background:#ff0}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{height:0;-webkit-box-si
@DimsumPanda
DimsumPanda / bootstrap.min.css
Last active November 18, 2015 02:43
Week 12: Three Charts
/*!
* Bootstrap v3.3.5 (http://getbootstrap.com)
* Copyright 2011-2015 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*//*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{margin:.67em 0;font-size:2em}mark{color:#000;background:#ff0}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{height:0;-webkit-box-si
@DimsumPanda
DimsumPanda / index.html
Last active November 18, 2015 02:39
Week 12: Scrollytelling
<!DOCTYPE html>
<html>
<head>
<title>Scrolling Sections</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<link rel="stylesheet" href="line.css" />
<style>
.container {