Skip to content

Instantly share code, notes, and snippets.

View chitacan's full-sized avatar
:shipit:

Kyungyeol Kim (Bret) chitacan

:shipit:
181 followers · 424 following
View GitHub Profile
@chitacan
chitacan / README.md
Last active August 28, 2015 00:53 — forked from syntagmatic/README.md
Comparing Map Projections

A mashup of Map Projection Distortions and transitions using the D3.js extended geographic projections plugin.

A comparison of map projections by four different types of distortion:

  • Acc. 40° 150% – The Acceptance index is a numerical measure that summarizes overall projection distortion, in this case with a maximum angular distortion of 40° and areal distortion of up to 150%.
  • Scale – The weighted mean error for overall scale distortion.
  • Areal – The weighted mean error for areal distortion.
  • Angular – The mean angular deformation index.

Lower is better. Data transcribed from the Natural Earth Projection by @mbostock.

@chitacan
chitacan / README.md
Last active December 16, 2016 21:39 — forked from mbostock/.block
Voronoi Arc Map

Mouseover to see flights originating at the specified airport. The cool thing about this technique is that the interaction requires zero JavaScript — it’s all done in CSS using the :hover state to toggle visibility of an airport’s associated outgoing flight routes.

@chitacan
chitacan / README.md
Last active August 29, 2015 14:27 — forked from mbostock/.block
Radial Reingold–Tilford Tree

The tree layout implements the Reingold-Tilford algorithm for efficient, tidy arrangement of layered nodes. The depth of nodes is computed by distance from the root, leading to a ragged appearance. Cartesian orientations are also supported. Implementation based on work by Jeff Heer and Jason Davies using Buchheim et al.'s linear-time variant of the Reingold-Tilford algorithm. Data shows the Flare class hierarchy, also courtesy Jeff Heer.

Compare to this Cartesian layout.

@chitacan
chitacan / index.html
Last active August 29, 2015 14:27 — forked from mbostock/.block
Hierarchical Edge Bundling
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.node {
font: 300 11px "Helvetica Neue", Helvetica, Arial, sans-serif;
fill: #bbb;
}
.node:hover {
@chitacan
chitacan / d3-zoom-pan-extent.js
Last active August 29, 2015 14:26 — forked from mhsmith/d3-zoom-pan-extent.js
Pan+Zoom within limits
d3 = function() {
var d3 = {
version: "3.1.10-xsystem"
};
if (!Date.now) Date.now = function() {
return +new Date();
};
var d3_document = document, d3_window = window;
try {
d3_document.createElement("div").style.setProperty("opacity", 0, "");
@chitacan
chitacan / README.md
Last active August 29, 2015 14:26 — forked from mbostock/.block
Calendar View

This example demonstrates loading of CSV data, which is then quantized into a diverging color scale. The values are visualized as colored cells per day. Days are arranged into columns by week, then grouped by month and years. Colors by Cynthia Brewer. Layout inspired by Rick Wicklin and Robert Allison. Dow Jones historical data copyright Yahoo! Finance or independent data provider; fair use for educational purposes.

@chitacan
chitacan / index.html
Last active August 29, 2015 14:25 — forked from stepheneb/index.html
D3 Example: zoom, pan, and axis rescale
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>One Graph</title>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.v2.js"></script>
<script type="text/javascript" src="simple-graph.js"></script>
<style type="text/css">
body { font: 13px sans-serif; }
rect { fill: #fff; }
@chitacan
chitacan / README.md
Last active August 29, 2015 14:25 — forked from robschmuecker/README.md

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.

@chitacan
chitacan / .gitignore
Last active August 29, 2015 14:24 — forked from GerHobbelt/.gitignore
# Editor backup files
*.bak
*~
@chitacan
chitacan / index.html
Last active August 29, 2015 14:24 — forked from nbremer/.block
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>Scatterplot with Voronoi</title>
<!-- D3.js -->
<script src="http://d3js.org/d3.v3.js"></script>
<!-- jQuery -->