Andi Pollok andipollok

Simple mouseover on a text, changing its color and font size.

Experiment with animated typography outlines in paper.js for the RCA Work in Progress Show 2014 of the School of Communication.

Menu items unfold on mouseover and move on click.

Activate slow transitions by pressing shift key.

Menu items unfold on mouseover. Also includes code to trigger mouse events on d3 objects via jQuery. This was necessary here because the mouse over area of the whole menu as well as the buttons have to react to mouse events and they are on top of each other.

Button mouseover animations with d3 transitions, which offer much more possibilities than CSS animations. Bonus points for knowing why I selected these six countries for this demo!

Resizing the background rectangle of text labels according to the bounding box of the text.

Added text labels to the dots, that show and hide depending on zoom level. Semantic zooming of random positioned clusters with connected dots.

	// using p5 to draw and canvas2svg to export svg from canvas-sketch
	// https://gist.github.com/mattdesl/83a1eb53bb703f5dd939d424ccab86b6
	//
	// ====================================================================================================
	// Not working, SVG is empty. P5 content renders fine.
	// ====================================================================================================

	const canvasSketch = require('canvas-sketch');
	const svg = require('./canvas-to-svg.js');
	const p5 = require('p5');

	<!DOCTYPE html>
	<html ng-app='test'>
	<head>
	<meta name="description" content="Load and display CSV using an Angular controller and a directive">
	<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js"></script>
	<meta charset="utf-8">
	<title>JS Bin</title>
	</head>
	<body ng-controller="testCtrl">
	<test-directive>

	/**
	* Align text on typographic baseline at absolute position on page
	* http://en.wikipedia.org/wiki/Baseline_(typography)
	* also see discussion on SO http://stackoverflow.com/questions/6178506/css-display-text-at-descent-instead-of-baseline
	*/

	.position {
	position:absolute;
	top:100px;
	left:50px;