Skip to content

Instantly share code, notes, and snippets.

This example pulls together various examples of work with trees in D3.js.

The panning functionality can certainly be improved in my opinion and I would be thrilled to see better solutions contributed.

One can do all manner of housekeeping or server related calls on the drop event to manage a remote tree dataset for example.

Dragging can be performed on any node other than root (flare). Dropping can be done on any node.

Panning can either be done by dragging an empty part of the SVG around or dragging a node towards an edge.

<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Rename tree and get underlying data to push to server." />
<script src="http://d3js.org/d3.v3.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<script>
import Ember from "ember";
var get = Ember.get;
var copy = Ember.copy;
var removeObserver = Ember.removeObserver;
var addObserver = Ember.addObserver;
var DocumentTitleMixin = Ember.Mixin.create({
titleTokensDidChange: function () {
@xypaul
xypaul / .zshrc
Last active August 29, 2015 14:09 — forked from SlexAxton/.zshrc
gifify() {
if [[ -n "$1" ]]; then
if [[ $2 == '--good' ]]; then
ffmpeg -i $1 -r 10 -vcodec png out-static-%05d.png
time convert -verbose +dither -layers Optimize -resize 600x600\> out-static*.png GIF:- | gifsicle --colors 128 --delay=5 --loop --optimize=3 --multifile - > $1.gif
rm out-static*.png
else
ffmpeg -i $1 -s 600x400 -pix_fmt rgb24 -r 10 -f gif - | gifsicle --optimize=3 --delay=3 > $1.gif
fi
else
@xypaul
xypaul / Definition of component
Created April 9, 2015 05:26
Radio buttons - Ember
// Yes there is no template
App.RadioButtonComponent = Ember.Component.extend({
tagName: 'input',
type: 'radio',
value: null,
attributeBindings: [ 'checked', 'name', 'type', 'value' ],
checked: function () {
return JSON.parse(JSON.stringify(this.get('value'))) == JSON.parse(JSON.stringify(this.get('groupValue')));
}.property('value', 'groupValue').readOnly(),
@xypaul
xypaul / main.java
Created May 27, 2015 09:10
101 - The Blocks Problem
import java.io.*;
import java.util.*;
public class Main {
private static Stack[] Blocks;
private static PrintWriter out;
public static void main(String[] args) throws Exception {
@xypaul
xypaul / index.html
Created May 28, 2015 00:58
Quick sort implementation in JavaScript
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="ex"></div>
<script id="jsbin-javascript">
function qsort(ls){
@xypaul
xypaul / main.java
Created May 28, 2015 01:03
101 - The Blocks Problem
import java.io.*;
import java.util.*;
public class Main {
private static Stack[] Blocks;
private static PrintWriter out;
public static void main(String[] args) throws Exception {
@xypaul
xypaul / index.html
Created May 28, 2015 02:03
Improved Quick Sort Algorithm in JavaScript
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<script id="jsbin-javascript">
function quickSort(array, start, end) {
@xypaul
xypaul / merge.js
Last active August 29, 2015 14:22
Merge Sort JavaScript
function sort(array) {
var len = array.length;
var middle = Math.floor(len*0.5);
var left = array.slice(0,middle);
var right = array.slice(middle, len);
if (len == 1) {
return array;
} else {