Skip to content

Instantly share code, notes, and snippets.

View balint42's full-sized avatar

Balint Morvai balint42

19 followers · 2 following
View GitHub Profile
@balint42
balint42 / README.md
Last active August 29, 2015 14:13
convert SVG ellipse parameters javascript function

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 / index.html
Last active May 17, 2016 23:01 — forked from mbostock/.block
<!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;
@balint42
balint42 / README.md
Last active May 17, 2016 23:01 — forked from mbostock/.block

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.

@balint42
balint42 / README.md
Last active May 17, 2016 23:02 — forked from mbostock/.block

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.

@balint42
balint42 / README.md
Last active May 17, 2016 23:03 — forked from mbostock/.block

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.

@balint42
balint42 / README.md
Last active May 17, 2016 23:03 — forked from mbostock/.block

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.

@balint42
balint42 / README.md
Last active May 17, 2016 23:04 — forked from mbostock/.block

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 March 28, 2021 20:16
parse svg path javascript function

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 January 14, 2023 01:49
reflect point on line javascript function

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 June 4, 2024 02:16
Javascript De Casteljau's algorithm splitting n-th degree Bezier curve

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!