mayblue9

A new take on a previous example about arc diagrams, showing character patterns in an Italian tongue-twister.

As in Wattenberg's original definition, only essential matching pairs are shown as arcs, to reduce visual clutter. Clicking on an arc highlights all the pairs having the same subsequence of characters.

Whitespaces are ignored by using a character replacement technique prior to the application of the matching algorithm.

Data is computed offline with a python tool by Oliver Mader, which implements a different version of Wattenberg's original algorithm.

A suggestive experiment leveraging the duck similarity to create "islands" of similar RDF resources.

The technique make use of a fixed random seed, an offline force directed layout simulation to displace the nodes, a Voronoi tessellation and SVG ClipPath to create the cells.

The example depicts the neighborhood of the Pink Floyd resource within DBpedia. Songs and albums are somewhat mixed in the left side of the map, while people (far right), lables (bottom right) are isolated.

This example shows the interactions of a group of forum users in the form of a matrix. The interaction is computed by taking into account the number of posts the users wrote into threads with common tags (tags are chosen from a list of relevant keywords). To make clusters more evident we sort the users with a hierarchical clustering algorithm.

A linear luminance multihue color scale is used to improve the readability of the color encoding.

Grid layout in combination with multi-dimensional sorting using d3.comparator.

	<!DOCTYPE html>
	<meta charset="utf-8">
	<head>
	<style>
	body { font-family: Hevetica; }

	.node {
	stroke: #fff;
	stroke-width: 1.5px;
	}

	<!DOCTYPE html>
	<meta charset="utf-8">
	<head>

	</head>
	<style>
	.q0-11 {fill: rgb(215, 48, 39);}
	.q1-11 {fill: rgb(244, 109, 67);}
	.q2-11 {fill: rgb(253, 174, 97);}
	.q3-11 {fill: rgb(254, 224, 144);}

	d3.sketchy = {};

	d3.sketchy.circle = function(selection) {

	var r = 5, c = [0,0], w = 2, fillColor = "red", strokeColor = "black";

	function d3_sketchyCircle(selection) {
	selection.append("circle").attr("class", "sketchy").attr("r", r).attr("cx", c[0]).attr("cy", c[1]).style("fill", fillColor)

	r = r * 1.5;