Skip to content

Instantly share code, notes, and snippets.

View couchand's full-sized avatar

Andrew Dona-Couch -- GitHub drop ICE couchand

60 followers · 69 following
View GitHub Profile
@couchand
couchand / index.html
Created August 30, 2013 21:37 — forked from tmcw/index.html
Distinguishing click and double-click in D3.
<!DOCTYPE html>
<html>
<head>
<script src="http://d3js.org/d3.v3.min.js"></script>
<style>
body { margin:0; padding:0; }
#map { width:960px; height:500px; background:cyan; }
</style>
</head>
<body>
@couchand
couchand / .block
Last active November 26, 2018 22:03 — forked from mbostock/.block
Interactive Stereographic
license: gpl-3.0
@couchand
couchand / react-d3.js
Created March 5, 2014 16:02
Integrating D3 charts into React.js applications
/** @jsx React.DOM */
// d3 chart function
// note that this is a higher-order function to
// allowing passing in the component properties/state
update = function(props) {
updateCircle = function(me) {
me
.attr("r", function(d) { return d.r; })
.attr("cx", function(d) { return 3 + d.r; })
@couchand
couchand / README.md
Last active February 22, 2018 07:53
Better force layout node selection

Object selection is tough, particularly when the things you'd like to select are moving around (like nodes in a force-directed layout, perhaps). Allowing a user the fudge factor of an area cursor helps, but can get in the way when targets are small enough. The use of a Voronoi tessellation promises a map of closest node for any given point.

This example illustrates the use of a Voronoi overlay to clip nodes in a force-directed simulation. By using the Voronoi shapes as the clipping path the nodes themselves can be drawn much simpler.

This builds on these two examples from Mike Bostock on force-directed graphs and voronoi tesselation, as well as Nate Vack's Voronoi selection example here and this first pass at an integration from Christopher Manning.

@couchand
couchand / README.md
Last active November 9, 2017 21:52 — forked from mbostock/.block
Link nodes to avoid node/link overlap

This gist demonstrates the inserting of link nodes to avoid node/link overlap.



This simple force-directed graph shows character co-occurence in *Les Misérables*. A physical simulation of charged particles and springs places related characters in closer proximity, while unrelated characters are farther apart. Layout algorithm inspired by [Tim Dwyer](http://www.csse.monash.edu.au/~tdwyer/) and [Thomas Jakobsen](http://web.archive.org/web/20080410171619/http://www.teknikus.dk/tj/gdc2001.htm). Data based on character coappearence in Victor Hugo's *Les Misérables*, compiled by [Donald Knuth](http://www-cs-faculty.stanford.edu/~uno/sgb.html).
@couchand
couchand / README.md
Last active September 15, 2016 18:42 — forked from mbostock/.block
Adjustable ranges on color scale

An example illustrating a scale that allows the ranges to be adjusted by the user.

This example is based on this one.

This example demonstrates how to construct a key from a threshold scale, in the style of Ford Fessenden’s map of police stops involving force. A linear scale is used to set the x-position of each colored rectangle in the key. There is one rectangle per color in the threshold scale’s range, and one tick per value in the threshold scale’s domain. The linear scale’s domain sets the implied extent of the key, here spanning 0 to 100%.

@couchand
couchand / acronymize
Created January 22, 2014 03:04
From Gomez in the South: http://ask.metafilter.com/255675/Decoding-cancer-addled-ramblings#3714997
#!/bin/sh
sed 's/\B\w*//g;s/\s//g' full_file.txt > acronym_file.txt
@couchand
couchand / README.md
Created September 10, 2013 07:39 — forked from mbostock/.block

A box-and-whisker plot uses simple glyphs that summarize a quantitative distribution with five standard statistics: the smallest value, lower quartile, median, upper quartile, and largest value. This summary approach allows the viewer to easily recognize differences between distributions. Data from the Michelson–Morley experiment. Implementation contributed by Jason Davies. This example periodically randomizes the values to demonstrate transitions.

@couchand
couchand / README.md
Last active December 22, 2015 15:58 — forked from mbostock/.block
Force layout parameter editor

A simple editor to allow the manipulation of force-directed graph parameters.

This example is based on Mike Bostock's block 4062045.

This simple force-directed graph shows character co-occurence in Les Misérables. A physical simulation of charged particles and springs places related characters in closer proximity, while unrelated characters are farther apart. Layout algorithm inspired by Tim Dwyer and Thomas Jakobsen. Data based on character coappearence in Victor Hugo's Les Misérables, compiled by Donald Knuth.

@couchand
couchand / README.md
Last active December 22, 2015 07:08 — forked from mbostock/.block
DRYer Bar Chart

A variation of the DRY Bar Chart to cleanup one more repeated element, the height/y-scale coupling.

A variation of the example bar chart using a slightly more D.R.Y. style. The visual encoding is represented by two functions and their composition:

  • The value accessor returns the value (or property) to encode for a given data object.
  • The scale maps this value to a visual display encoding, such as a pixel position.
  • The map function represents the composition value ○ scale, mapping from data to display.

Inspired by Andrew Winterman’s post, Tooling for the Lazy Programmer: DRYing up D3.