Skip to content

Instantly share code, notes, and snippets.

@JMStewart
JMStewart / README.md
Last active Dec 22, 2015 — forked from wvengen/README.md
d3.chart UMD chart
View README.md

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
Last active Jan 12, 2023
D3/Canvas Transitions & Events
View index.html
<!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 Aug 29, 2015
Canvas + D3 Force 2
View index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://d3js.org/d3.v3.js" charset="utf-8"></script>
</head>
<body>
<script>
@JMStewart
JMStewart / index.html
Last active Aug 29, 2015
Canvas + D3 Force
View index.html
<!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 Aug 29, 2015
Pure D3 Force
View index.html
<!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 Sep 15, 2016
ReactJS + D3 Force
View index.html
<!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;
View index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.land {
fill: none;
stroke: #000;
}
.county-boundary {
@JMStewart
JMStewart / index.html
Created Sep 9, 2013
LEAP: Full hand grab
View index.html
<!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 Sep 6, 2013
LEAP: Pinch grab + zoom
View index.html
<!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 Dec 22, 2015
LEAP: Pinch grab
View README.md

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.