Skip to content

Instantly share code, notes, and snippets.

View anbnyc's full-sized avatar

Alec Barrett anbnyc

21 followers · 0 following
View GitHub Profile
@anbnyc
anbnyc / Readme.md
Last active July 26, 2017 17:52
Exploring d3.timer and trigonometry

d3.timer and trigonometry

This gist uses d3.timer to simulate motion by continuously updating the positions of elements. Two points move along the circumference of two circles each, lines connect the points on the left circle with the points on the right circle, and the bar graph below shows the full-scale length of the lines in real time. Together, the bars follow an almost rhythmic cyclical pattern, all following from the movement of the points along simple sine/cosine curves.

This project was loosely inspired by Baroque.me.

@anbnyc
anbnyc / data.json
Last active August 8, 2016 22:32
2016 Olympic Countries
[
{
"Country":"Refugee Olympic Team",
"Region":"Other",
"Athletes":10,
"Population":60000000,
"ppa":6000000
},
{
"Country":"Cook Islands",
@anbnyc
anbnyc / index.html
Created June 9, 2016 14:54
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore.js"></script>
<style>
.axis path,
.axis line {
fill: none;
stroke: black;
@anbnyc
anbnyc / index.html
Last active May 9, 2016 15:57
Drag-and-drop Student Planning demo
<html ng-app="plan-app">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-messages.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.6/angular-material.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.6/angular-material.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.6/angular-material.layouts.css">
@anbnyc
anbnyc / index.html
Created December 9, 2015 22:02
sankey diagram in d3
<!DOCTYPE html>
<!-- Adapted from D3Noob and Mike Bostock -->
<!-- http://bost.ocks.org/mike/sankey/ -->
<!-- http://bl.ocks.org/d3noob/5028304 -->
<meta charset="utf-8">
<title>Stock-Flow Diagram</title>
<style>
.node rect {
cursor: move;
@anbnyc
anbnyc / NYS_Congressional_Districts_ESD2015.json
Created November 24, 2015 03:34
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@anbnyc
anbnyc / NYS_Assembly_Districts_ESD2015.json
Created November 22, 2015 18:37
NYS Assembly Districts
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@anbnyc
anbnyc / index.html
Created November 8, 2015 01:27
Seats in Israeli Knesset
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Knesset Party Trends</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
<style type="text/css">
body {
background-color: white;
@anbnyc
anbnyc / index.html
Created November 1, 2015 15:38
Manhattan Tree Census - Bar Chart
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Manhattan Tree Diversity</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>
<style type="text/css">
body {
margin: 0;
@anbnyc
anbnyc / index.html
Created October 23, 2015 20:13
Manhattan Tree Census by Zip Code and Species
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Manhattan Trees</title>
<script type="text/javascript" src="http://d3js.org/d3.v3.js" charset="utf-8"></script>
<style type="text/css">
body {
background-color: white;