Mayank Kedia mickeykedia

Forked from enjalot's amazing block on Matrix Rotations !

Matrix: reboot

Remaking http://ncase.me/matrix/ with SVG and d3.js

This technical experiment currently lacks the finesse and wistfulness of the original. I'm most inspired by the genius (yet obvious in retrospect) technique of showing both the original point and the transformed point connected by a line. Even the idea to use a letter is brilliant to me: it is familiar and intuitive, it allows for discrete sampling without introducing other concepts like pixels.

My hope is that by going through the exercise of making it more data-driven I can expand on the concept to introduce things like rotation. Perhaps using d3 will also make the code more concise, but that's not certain as the original is relatively short.

I'm still working on porting all of the original interactions, but I'm quite pleased with the work in progress.

Bird Swing Graph

A graph for showing how close election results are for a particular political party in a set of constituencies.

The green bars represent seats that the party has won (or is leading in), and the black bars represent the seats that the party has lost (or is trailing in).

The bars are further color coded according to the party's performance last time.

Dark green bars represent constituencies in which the party lost the last time (swing seats)

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.12/d3.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
	<style>
	body {
	font-family: futura;
	width: 960px;

	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
	<style type="text/css">
	#line{
	width: 700px;
	margin: 20px 0;
	height: 300px;
	background: #eee;

	license: gpl-3.0
	height: 2910
	border: no

	license: gpl-3.0
	height: 2910
	border: no