Skip to content

Instantly share code, notes, and snippets.

Balint Morvai balint42

Block or report user

Report or block balint42

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
View index.html
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://balint42.github.io/libs/pathseg.js"></script>
<script src="http://balint42.github.io/libs/comic.min.js"></script>
<script>
var mouse = [480, 250],
count = 0;
View README.md

D3 example cartoonized with comic.js.

This diagram shows the distribution of age groups in the United States over the last 150 years. Use the arrow keys to observe the changing population. Data from the Minnesota Population Center. Use the arrow keys to change the displayed year. The blue bars are the male population for each five-year age bracket, while the pink bars are the female population; the bars are partially transparent so that you can see how they overlap, unlike the traditional side-by-side display which makes it difficult to compare the relative distribution of the sexes.

View README.md

D3 example cartoonized with comic.js.

A dendrogram is a node-link diagram that places leaf nodes of the tree at the same depth. In this example, the classes (leaf nodes) are aligned on the right edge, with the packages (internal nodes) to the left. Data shows the Flare class hierarchy, courtesy Jeff Heer.

Compare to this radial layout.

View README.md

D3 example cartoonized with comic.js.

Enclosure diagrams use containment to represent the hierarchy. Although circle packing is not as space-efficient as a treemap, it better reveals the hierarchy. Implementation based on work by Jeff Heer. Data shows the Flare class hierarchy, also courtesy Jeff Heer.

See also this zoomable version.

View README.md

D3 example cartoonized with comic.js.

Chord diagrams show directed relationships among a group of entities. This example also demonstrates simple interactivity by using mouseover filtering. Layout inspired by Martin Krzywinski's beautiful work on Circos.

View README.md

D3 example cartoonized with comic.js.

Bubble charts encode data in the area of circles. Although less perceptually-accurate than bar charts, they can pack hundreds of values into a small space. Implementation based on work by Jeff Heer. Data shows the Flare class hierarchy, also courtesy Jeff Heer.

@balint42
balint42 / README.md
Last active Aug 29, 2015
convert SVG ellipse parameters javascript function
View README.md

Convert SVG ellipse parameters

Javascript function for converting the parameters that come with an SVG elliptic arc, namely the starting point ps, the end point pe, the horizontal radius rh, the vertical radius rv, the rotation in degree rot, the large arc flag fa, the sweep flag fs. These are converted to the ellipse center point pc and a point containing the elliptic arc start and end rotations in degrees, phi1 and phi2. Thus the function returns an array with two points. The term point always refers to a JS object of the type {x:number1, y:number2}.

More precisely this code is the rough (some input checking rules are ignored) implementation of this standard.

@balint42
balint42 / README.md
Last active Aug 29, 2015
reflect point on line javascript function
View README.md

Reflect point along line

Javascript function to reflect point p along line through points p0 and p1. Expects three point objects of the type { x: number1, y: number2 } as input and returns the first point p reflected on p0 and p1 as output.

@balint42
balint42 / README.md
Last active Nov 24, 2018
parse svg path javascript function
View README.md

JS function for parsing SVG paths

Parse an svg path object and generate an Array of path commands. Each command is an Array of the form [command, arg1, arg2, ...] NOTE: parsing is done via pathSegList which is faster and more reliable than parsing the path string directly, but might not work in old browsers.

@balint42
balint42 / README.md
Last active Aug 29, 2015
Javascript De Casteljau's algorithm splitting n-th degree Bezier curve
View README.md

De Casteljau's algorithm

De Casteljau's algorithm for splitting n-th degree Bezier curves. Control points can be 1 or 2 dimensional, thus x only or [x, y] vectors. Does not return the values of a Bezier curve at a given point, but rather the correct new control points of the resulting partial curves, if the Bezier curve is split in two curves at the given point. This allows for animated drawing of Bezier curves as well: simply split at the point up to which you want to draw and only draw the first resulting curve, repeat on every animation frame while advancing the split point.

But beyond the well known "animated drawing of Bezier curves" scenario, this code also serves cases where you just want to have the control points of the split curves, not curve values. The whole thing is not optimized for speed but readability. See it here!

You can’t perform that action at this time.