Skip to content

Instantly share code, notes, and snippets.

View beemyfriend's full-sized avatar

beemyfriend

16 followers · 4 following
View GitHub Profile
@beemyfriend
beemyfriend / index.html
Last active March 21, 2017 19:44
Fractals in D3 and Canvas: Sierpinski Gasket
<body>
<div id = 'sg'></div>
<script src = "https://d3js.org/d3.v4.js"></script>
<script>
var img_width = 400,
img_height = 400;
//create original canvas that will be iterated on
function init(){
@beemyfriend
beemyfriend / index.txt
Last active March 25, 2017 21:12
Fractals With Canvas and D3: Fractal Creater
<body>
<div style = 'position: absolute; top:0px; left:-500px'><canvas id = 'myCanvas' width = '500' height = '500' ></canvas></div>
<div style = 'position: absolute; top:70px; left:10px'><canvas id = 'otherCanvas' width = '500' height = '500'></canvas></div>
<form name = 'createRule' style = 'position: absolute; top:60px; left:520px'>
<br>
<br>
<h3>Create Fractal Rules</h3>
<label id = 'xslabel'>X-Scale: 0.5</label>
<input id = 'xscale' type = 'range' min = '-1' max = '1' step = '.05' value = '.5' onchange="document.getElementById('xslabel').innerHTML = 'X-Scale: ' + this.value;"/>
<br>
@beemyfriend
beemyfriend / index.html
Last active April 20, 2017 17:03
D3 Makeover: Week 1
<head>
<link rel='stylesheet' href='../styles.css'>
<style>
div.tooltip{
position: absolute;
text-align: left;
width: 250px;
height: 90px;
padding: 5px;
font-size: 14px;
@beemyfriend
beemyfriend / index.html
Last active April 26, 2017 19:54
D3 Scale Primer
<head>
<style>
#sections > div{
opacity: .3;
}
#sections div.graph-scroll-active{
opacity: 1;
}
@beemyfriend
beemyfriend / index.html
Created May 3, 2017 04:32
Figuring out path tweening....
<head></head>
<body>
<body id = 'test'></body>
<script src = 'https://d3js.org/d3.v4.js'></script>
<script>
var height = 500,
width = 500,
symbol_size = 200,
animationDuration = 2000;
@beemyfriend
beemyfriend / index.html
Last active June 2, 2017 22:45
Bioethics Primer
<head>
<style>
div#tooltip{
position: absolute;
text-align: left;
width: 250px;
height: 90px;
padding: 5px;
font-size: 14px;
background: white;
@beemyfriend
beemyfriend / index.html
Last active June 10, 2017 16:58
Point-Along-Path Interpolation for V4
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<style>
path {
fill: none;
stroke: #000;
stroke-width: 3px;
}
@beemyfriend
beemyfriend / index.html
Created June 10, 2017 16:14
Fuzzy Map Prototype: Attempting a personal version of https://dylanmoriarty.github.io/blog/foggy-spaces.html
<head>
<style>
div.tooltip{
position: absolute;
text-align: left;
width: 360px;
height: 130px;
padding: 5px;
font-size: 14px;
background: lightsteelblue;
@beemyfriend
beemyfriend / index.html
Created July 13, 2017 15:26
Flubbering Symbols
<head></head>
<body></body>
<script src='https://rawgit.com/gka/d3-jetpack/master/build/d3v4%2Bjetpack.js'></script>
<script src="https://unpkg.com/flubber@0.3.0"></script>
<script>
var symbol_size = 300,
width = 1000,
height = 600,
duration = 3000;
@beemyfriend
beemyfriend / index.html
Last active November 24, 2018 00:18
How do I loop through JSON objects in D3?
<head></head>
<body></body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var data = [
{
"name": "Sample 1",
"embed": 10,
"interactive": 10,
"rapidDev": 7,