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.
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!
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.
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.
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.
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.
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.
<!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; |
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.