Skip to content

Instantly share code, notes, and snippets.

View eweitnauer's full-sized avatar

Erik Weitnauer eweitnauer

78 followers · 4 following
  • Bielefeld, Germany
View GitHub Profile
@eweitnauer
eweitnauer / README.md
Last active June 18, 2016 15:46
Growing neural gas in javascript using D3.js for visualization

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.

@eweitnauer
eweitnauer / README.md
Last active February 4, 2021 13:20
Fast Scrolling using D3

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.

@eweitnauer
eweitnauer / README.md
Last active January 15, 2019 23:20
Dominant Baseline Style

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

@eweitnauer
eweitnauer / Font.js
Last active April 12, 2024 23:00
Font.js Demo
/**
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
@eweitnauer
eweitnauer / index.html
Last active December 26, 2015 22:39
Path Finding with Simulated Annealing
<!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>
@eweitnauer
eweitnauer / README.md
Created October 24, 2013 20:32
Drag All in Rectangle

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

@eweitnauer
eweitnauer / README.md
Created October 24, 2013 20:31
Drag All on Line

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

@eweitnauer
eweitnauer / README.md
Created October 24, 2013 20:27
Hold and Tap

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

@eweitnauer
eweitnauer / README.md
Created October 24, 2013 20:24
mtouch Multi Drag

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.

@eweitnauer
eweitnauer / README.md
Last active September 23, 2019 16:05
mtouch Tap

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.