Erik Weitnauer eweitnauer

A javascript implementation of the classis Growing Neural Gas (GNG) algorithm from the paper A growing neural gas network learns topologies.

You can click or drag on the input space to add input data. At each step one input data instance is randomly selected and is used to update the GNG. Use the sliders to adjust the parameter values, hover over a value to see a description.

If you are looking at this on bl.ocks.org/eweitnauer, make sure to click the Open in a new window link to see the parameter input elements.

Scrolling through big amounts of time series data.

In fast mode, scrolling is achieved by moving a parent "g" element to the left or right. Entering and exiting of data is done at the end of dragging. In slow mode, entering, exiting and updating of data is done during the dragging.

Demonstrates the effect of dominant baseline for each of its possible values on text positioning in an SVG.

Each browser/ mobile browser seems to handle these a bit differently. Here are some issues:

Retrieving bounding boxes only works correctly after the font is loaded (and there is no easy way to find out when this happens)
The bounding box width does not reflect the actual extent of a text, but how far it advances the cursor. That means that in an italic letter 'f' in many fonts, part of the f will actually lie outside of the bounding box
The baseline-shift style does not work in FF
dominant-baseline values are interpreted different among browsers

All in all its best just use 'alphabetical' (which is consistent across browsers) and do any further vertical positioning by manually by using the x,y or dx,dy or the transform attributes. Also, if one needs to find out about the actual bounds of a text, one cannot rely on the getBBox() or the getBoundingClientRect() DOM methods, but has to use

Drag multiple circles at once using two fingers. The circles inside the rectangle spanned by your fingers when you start dragging are selected.

Drag multiple circles at once using two fingers. The circles on the line connecting your fingers when you start dragging are selected.

Hold any circle and tap another one to connect / disconnect both.

Performant dragging of multiple elements using mtouch_events. Hit-testing is done manually, so you can start dragging anywhere and you'll pick up the first elements you pass over. If elements overlap, you can also move several at once. Works fine even with 10 fingers at once.

Demonstration of the basic mtouch_events event types.

mtouch_events allows treating mouse events and touch events the same way. It supports the events "touch", "release", "tap", "dbltap", "hold", "drag" and "mdrag". The "mdrag" event is dispatched per mousemove/touchmove DOM event and can contain multiple changed touches at once, while all the other events are dispatched per touch.

	/**

	Font.js v2012.01.25
	(c) Mike "Pomax" Kamermans, 2012
	Licensed under MIT ("expat" flavour) license.
	Hosted on http://github.com/Pomax/Font.js

	This library adds Font objects to the general pool
	of available JavaScript objects, so that you can load
	fonts through a JavaScript object similar to loading

	<!doctype html>
	<meta charset="utf-8">
	<title>Path Finding using Simulated Annealing</title>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<style>
	.obstacle { fill: lightpink }
	.point { fill: steelblue }
	</style>
	<body>
	<script>