Skip to content

Instantly share code, notes, and snippets.

View bryangingechen's full-sized avatar

Bryan Gin-ge Chen bryangingechen

View GitHub Profile
@mbostock
mbostock / .block
Last active April 14, 2024 02:46 — forked from mbostock/.block
Pedigree Tree
license: gpl-3.0
@sxv
sxv / README.md
Last active July 3, 2018 07:20
Interactive SVG + Canvas Plot

A D3 demonstration of SVG and Canvas intermingling. Blue circles are plotted in SVG, black circles in canvas. One force to rule them all. The plot is zoomable and pannable.

Inspired by M. Bostock's Canvas / SVG zoom comparison series and collision detection examples [1] [2] .

@rkirsling
rkirsling / LICENSE
Last active September 22, 2024 23:23
Directed Graph Editor
Copyright (c) 2013 Ross Kirsling
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
@tgk
tgk / README.md
Last active April 19, 2019 18:31
Add and remove nodes

Click to add nodes! Nodes near the cursor will be linked to the new node. Clicking an existing node will remove it.

This is an extension of this example, adding the capability of removing nodes by clicking them. This means that dragging is no longer supported.

@vijithassar
vijithassar / d3-textwrap.min.js
Last active October 10, 2023 11:44
d3textwrap plugin demo
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("d3-selection")):"function"==typeof define&&define.amd?define(["exports","d3-selection"],e):e(t.d3=t.d3||{},t.d3)}(this,function(t,e){"use strict";var n,o,r,i,d,u,p,a;n="undefined"==typeof SVGForeignObjectElement?"tspans":"foreignobject",o=function(t){var n,o;return o="function"==typeof t,"object"!=typeof t||t.nodeType?!!(t instanceof e.selection||t.nodeType||o||n)||(console.error("invalid bounds specified for text wrapping"),!1):!(!t.height||!t.width)||(console.error("text wrapping bounds must specify height and width"),!1)},r=function(t){var e,n,o,r;for(e=["height","width"],"function"==typeof t?n=t():t.nodeType?n=t.getBoundingClientRect():"object"==typeof t&&(n=t),o=Object.create(null),r=0;r<e.length;r++)o[e[r]]=n[e[r]];return o},i=function(t){var e;return"function"==typeof t?e=t():"number"==typeof t?e=t:"undefined"==typeof t&&(e=0),"number"==typeof e?e:void console.error("padding could not be converted into a number")},d=
@staltz
staltz / introrx.md
Last active October 31, 2024 08:41
The introduction to Reactive Programming you've been missing
@terrywbrady
terrywbrady / GoogleSpreadsheet.html
Last active July 19, 2024 10:46
Sample HTML/JS to parse a Google Spreadsheet
<!doctype html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
var spData = null;
function doData(json) {
spData = json.feed.entry;
}
@nbremer
nbremer / README.md
Last active August 25, 2024 19:34
Zoomable Circle Packing with Canvas & D3.js - I

This is the third step of my first attempt to learn canvas. I want to improve a piece a made a few weeks ago about the division of occupations. The D3.js version has so many DOM elements due to all the small bar charts that it is very slow. Therefore, I hope that a canvas version might improve things

To not stray too far from D3.js I used the excellent tutorials on canvas and d3 from Irene Ros & Yannick Assogba which you can find here and here. I managed to get the circle packing working. However, when you zoom it is very jittery.

I wrote a more extensive tutorial around what I learned while doing this project in my blog Learnings from a D3.js addict on starting with Canvas in which this can be seen as step 3. See the previous, [non-zoomable version here](http://bl.ocks.org/

@nbremer
nbremer / README.md
Last active June 17, 2024 15:24
Zoomable Circle Packing with Canvas & D3.js - II

This is the fourth step of my first attempt to learn canvas. I want to improve a piece a made a few weeks ago about the division of occupations. The D3.js version has so many DOM elements due to all the small bar charts that it is very slow. Therefore, I hope that a canvas version might improve things

Thanks to a version of the circle packing that does away with the D3.js data binding made by Stephan Smola I was able to make a few adjustments to make the zooming more linear from point A to B. Next step, add the bar charts...

I wrote a more extensive tutorial around what I learned while doing this project in my blog Learnings from a D3.js addict on starting with Canvas in which this can be seen as step 4. See the previous, more jittery zoomable version here in which the c

@1wheel
1wheel / geometry.js
Last active November 8, 2022 13:46
line-intersection
//creates new point
function P(x, y, color){
var rv
if (x.map){
rv = {x: x[0], y: x[1], color: 'black'}
} else{
rv = {x: x, y: y, color: color || 'black'}
}
rv.toString = function(){ return rv.x + ',' + rv.y }
rv.type = 'point'