Skip to content

Instantly share code, notes, and snippets.

View emeeks's full-sized avatar

Elijah Meeks emeeks

717 followers · 16 following
View GitHub Profile
@emeeks
emeeks / index.html
Created October 22, 2016 23:09
d3.geoPath.area recoloring on drag
<html>
<head>
<style>
path.graticule {
fill: none;
stroke-width: 1;
stroke: #9A8B7A;
}
path.graticule.outline {
fill: none;
@emeeks
emeeks / cheapMarky.js
Last active October 27, 2019 19:51
Wargames Aesthetic
function circlePath(radius) {
let arc = d3.arc().outerRadius(radius);
return arc({ startAngle: 0, endAngle: 8 })
}
function rectPath(width,height) {
return "M0,0L" + width + ",0L" + width + "," + height + "L0," + height + "Z"
}
function linePath(x1,x2,y1,y2) {
@emeeks
emeeks / README.md
Created October 1, 2016 22:18

d3-bboxCollide coupled with requestAnimationFrame and SVG filters to create a bonfire.

@emeeks
emeeks / README.md
Created September 29, 2016 18:03
Guitar Hero

d3-bboxCollide using forceSimulation tied to requestAnimationFrame to create new nodes and decrease the value (and hence size) of existing nodes to create a kind of guitar hero receding viz.

@emeeks
emeeks / README.md
Last active September 29, 2016 17:57
Bonfire

d3-bboxCollide coupled with requestAnimationFrame and SVG filters to create a bonfire.

@emeeks
emeeks / README.md
Created September 28, 2016 16:50
Word Trails

d3-bboxCollide allows for rectangular collision detection. This means we can do word cloud-like visualizations with more rules and constraints. In this case, the word clouds are split into columns based on speaker and laid out down the y-axis based on the segment of the debate for the term density of that word.

The data comes from the first Presidential debate of 2016, processed using Voyant Tools with custom stop words removed and then processed for term density into the 20 bins.

@emeeks
emeeks / README.md
Last active January 16, 2020 13:25
d3-bboxCollide

d3-bboxCollide provides bounding box collision detection for d3.forceSimulation. This is useful for label adjustment or rectangular nodes. Each node receives a bounding box array of a top right and bottom left corner of that node relative to its x position. In the case of this dataset, that size is based on the length of the word in the source dataset.

A function for calculating this array based off the data is passed into the d3.bboxCollide function, which is later passed as a "collide" constraint in your force settings.

var collide = d3.bboxCollide(function (d,i) {
    return [[-d.value * 10, -d.value * 5],[d.value * 10, d.value * 5]]
  })
@emeeks
emeeks / README.md
Created September 19, 2016 16:08
BBox Collision Detection

d3.forceSimulation bounding box collision detection. This is useful for label adjustment or rectangular nodes. Each node receives a bounding box array of a top right and bottom left corner of that node relative to its x position. In the case of this dataset, that size is based on the length of the word in the source dataset.

A function for calculating this array based off the data isis passed into the forceRectCollide function, which is later passed as a "collide" constraint in your force settings.

var collide = d3.forceRectCollide(function (d,i) {
    var hw = halfWidth(d)
    if (i%3 === 0) {
      return [[-hw / 2, -hw],[hw / 2, hw]]
 }
@emeeks
emeeks / d3-force.js
Created September 16, 2016 17:03
Working Rectangular Collide
// https://d3js.org/d3-force/ Version 1.0.0. Copyright 2016 Mike Bostock.
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('d3-quadtree'), require('d3-collection'), require('d3-dispatch'), require('d3-timer')) :
typeof define === 'function' && define.amd ? define(['exports', 'd3-quadtree', 'd3-collection', 'd3-dispatch', 'd3-timer'], factory) :
(factory((global.d3 = global.d3 || {}),global.d3,global.d3,global.d3,global.d3));
}(this, function (exports,d3Quadtree,d3Collection,d3Dispatch,d3Timer) { 'use strict';
function center(x, y) {
var nodes;
@emeeks
emeeks / d3-force.js
Last active September 16, 2016 05:06
Slightly Better Colliding
// https://d3js.org/d3-force/ Version 1.0.0. Copyright 2016 Mike Bostock.
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('d3-quadtree'), require('d3-collection'), require('d3-dispatch'), require('d3-timer')) :
typeof define === 'function' && define.amd ? define(['exports', 'd3-quadtree', 'd3-collection', 'd3-dispatch', 'd3-timer'], factory) :
(factory((global.d3 = global.d3 || {}),global.d3,global.d3,global.d3,global.d3));
}(this, function (exports,d3Quadtree,d3Collection,d3Dispatch,d3Timer) { 'use strict';
function center(x, y) {
var nodes;