Skip to content

Instantly share code, notes, and snippets.

View d4tocchini's full-sized avatar

Dan Tocchini IV d4tocchini

View GitHub Profile
adsf
@d4tocchini
d4tocchini / README.md
Last active March 16, 2018 16:25 — forked from robschmuecker/README.md
Drag and drop, collapsible d3.js Tree with 50,000 nodes

This is an example of a collapsible drag and drop tree implementing slightly modified code from https://gist.github.com/robschmuecker/7880033

This is posted in order to demonstrate a viable answer for a Stack Overflow question http://stackoverflow.com/questions/20539922/has-anyone-produced-a-virtualised-javascript-tree-for-thousands-of-nodes

The only difference between this gist and the one referenced above is that the JSON file has changed. Each node contains 15 children and the depth is 4. Hence over 50,000 nodes.

The performance is fine if not too many of the nodes are present at once in the DOM. The JSON was contructed at http://www.json-generator.com/ with the following markup

@d4tocchini
d4tocchini / index.html
Last active August 2, 2017 05:02
binary search #jsbench #jsperf (https://jsbench.github.io/#bab89686622850413bb8d79a55a319da) #jsbench #jsperf
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>binary search #jsbench #jsperf</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/1.0.0/benchmark.min.js"></script>
<script src="./suite.js"></script>
</head>
<body>
<h1>Open the console to view the results</h1>
@d4tocchini
d4tocchini / index.html
Last active June 7, 2017 00:38
typed array or not, with or without allocating size #jsbench #jsperf (http://jsbench.github.io/#3127ca10954b5121df21352e9baf8d05) #jsbench #jsperf
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>typed array or not, with or without allocating size #jsbench #jsperf</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/benchmark/1.0.0/benchmark.min.js"></script>
<script src="./suite.js"></script>
</head>
<body>
<h1>Open the console to view the results</h1>
@d4tocchini
d4tocchini / fluid imac with shine.css
Created September 27, 2014 23:42
border-image magic
.imac {
/* apply imac image as fluid border image around figure */
border-width: 34px 34px 163px 34px;
-moz-border-image: url("../img/border/border-mac-screen-800x608.png") 34 34 163 34 repeat;
-webkit-border-image: url("../img/border/border-mac-screen-800x608.png") 34 34 163 34 repeat;
-o-border-image: url("../img/border/border-mac-screen-800x608.png") 34 34 163 34 repeat;
border-image: url("../img/border/border-mac-screen-800x608.png") 34 34 163 34 fill repeat;
margin-left: -34px !important;
box-sizing: content-box !important;
}
$.section class:"3pronged #{@classes.split(' ')}"
variant '3posts_w_media'
for post in @posts.eat(3)
$.article
$.h1 post.h1.eat(1)
$.h2 post.h2.eat(1)
$.text post.text.eat(1)
$.image post.media.eat(1).eat(1, type:'image')
@d4tocchini
d4tocchini / 01 source VFL.css
Last active August 29, 2015 14:06
VFL to CCSS
@h |- (.box)-10-... - (#box2) (#box3)-| gap([gap]) in(#container) {
width: == &:next[width]; // replacement for chain-width()
top: == ::window[top]; // replacement for chain-top(::window[top])
}
@d4tocchini
d4tocchini / selectorparser
Last active August 29, 2015 14:03
selector parser
{
var p;
p = this;
p.toString = function (x) {
if (typeof x === "string") {return x}
if (x instanceof Array) {return x.join("")}
return ""
}
handleMutations: (mutations) =>
for m in mutations
for node in m.removedNodes
doSomethingToRemoved node
for node in m.addedNodes
doSomethingToAdded node
if m.type is "characterData" or m.type is "attributes" or m.type is "childList"
doSomethingWithType(m)
observer = new MutationObserver handleMutations
observer.observe(document.getElementById('graph'), {subtree: true, childList: true, attributes: false, characterData: false})

Post

  • plus

  • video url

  • call to action What is the most important action you want people to do on your site? Buy now? Sign up? Learn more? Whatever it is, you need a prominent link that drives people to accomplish that action - you need a Call to Action!

  • crowdfunding campaign

  • goal