Skip to content

Instantly share code, notes, and snippets.

View JMStewart's full-sized avatar

James Stewart JMStewart

5 followers · 0 following
View GitHub Profile
@JMStewart
JMStewart / index.html
Last active January 12, 2023 06:16
D3/Canvas Transitions & Events
<!DOCTYPE html>
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
<script>
@JMStewart
JMStewart / index.html
Last active September 15, 2016 09:05
ReactJS + D3 Force
<!DOCTYPE html>
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/react/0.11.0/react.min.js"></script>
</head>
<body>
<div id="container"></div>
<script>
var size = 1000;
@JMStewart
JMStewart / README.md
Last active December 22, 2015 19:14 — forked from wvengen/README.md
d3.chart UMD chart

Basic example showing how to make a chart based on d3.chart using the new and shiny UMD interface. This is currently being discussed in #117, and not ready for use. It will be!

@wvengen created a gist showing a problem with this build, and this gist is my fix for those problems. The issue here was that rebuilding d3.chart in step 3 installed a local version of d3, which got included in the webpack bundle. This meant that the final webpack bundle had 2 copies of d3, and d3.chart was only attached to one of them. By removing the node_modules after building d3.chart we can avoid this problem.

  1. Save the files somewhere
  2. npm install
  3. rebuild d3.chart: cd node_modules/d3.chart && npm install && grunt build && rm -rf node_modules && cd -
  4. webpack index.js build.js
@JMStewart
JMStewart / index.html
Created September 9, 2013 20:13
Zip Code Map
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.land {
fill: none;
stroke: #000;
}
.county-boundary {
@JMStewart
JMStewart / index.html
Created September 9, 2013 16:54
LEAP: Full hand grab
<!DOCTYPE html>
<html>
<head>
<script src="//js.leapmotion.com/0.2.0/leap.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
<div id="canvas">
@JMStewart
JMStewart / index.html
Created September 6, 2013 17:44
LEAP: Pinch grab + zoom
<!DOCTYPE html>
<html>
<head>
<script src="//js.leapmotion.com/0.2.0/leap.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
<div id="canvas">
<svg height="100%" width="100%">
@JMStewart
JMStewart / README.md
Last active December 22, 2015 11:38
LEAP: Pinch grab

This example uses two fingers to move the cursor, and a pinch motion to grab objects. Using your pointer and middle fingers like chopsticks seems to work a bit better than pinching with your thumb and pointer finger.

@JMStewart
JMStewart / README.md
Last active December 22, 2015 09:59
Animate along a path

This is an example of animating an object to move along a defined path. The path must be an existing SVG path object, but can be hidden if you want.

@JMStewart
JMStewart / index.html
Created September 5, 2013 02:35
LEAP: Simple movement
<!DOCTYPE html>
<html>
<head>
<script src="//js.leapmotion.com/0.2.0/leap.min.js"></script>
</head>
<body>
<div id="canvas">
<svg height="100%" width="100%">
@JMStewart
JMStewart / README.md
Last active December 22, 2015 06:39
LEAP: Target Shooter

A simple target shooter for the Leap Motion.