Ashish Singh git-ashish

This sample is based on Mike Bostock's Box Plots. The box.js file has been modified in a number of ways besides making the box plots horizontal: the transitions have been removed, the 1.5 iqr function is included as the default to compute the whisker length, data objects are attached to the whisker ends and outlier dots (instead of just the values), and there are transparent q1-q2 and q2-q3 boxes that contain those respective data points for possible future use.

Hovering over outlier dots in the boxplot highlights them on the table and vice-versa. This also demonstrates a move-to-front functionality -- when an outlier circle is highlighted, it is moved to the end of the svg's elements so that it appears on top of the other outliers.

Also, the axis rounds its range to intervals that go into a power of 10 (see the cleanUpChartRange function).

The variable being plotted is a generated logNoraml distribution, to demonstrate outliers more prominently (sometimes there are so many, the table gets cut

Using collision detection with network visualization labels

This demonstrates how to use d3-annotation() with bboxCollide to procedurally place node labels. After using the nodes data to create a network visualization of the Les Miserables play, we filter the nodes to leave out the side characters and pass that array to d3-annotation. We then create a second forceSimulation, this time using the size of the notes as the property in our bounding box collision detection, to move the labels out of each others' way.

d3-annotation by Susie Lu.

Comparing 2016 presidential election cartograms from FiveThirtyEight, Washington Post, Wall Street Journal, NPR, and Daily Kos.

Uses Polylabel to pick some decent label positions.

See also: Jigsaw morphing, Smoother polygon transitions

The end result of my blog on SOM - Adding boundaries inside a hexagonal heatmap in D3.js in which the one heatmap of a Self Organizing Map is displayed with D3 with a small hover event and where boundaries between the overlaying segments have been visualized with black lines

A simpler version without line boundaries can be found here

	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>
	.longscroll {
	overflow-y: auto;
	width: 480px;
	height: 500px;
	float: left;
	}
	.longscroll .row {

	// Detect if device is a Mobile
	function isMobile() {
	var bIsMobile = false;
	try {
	bIsMobile = /Mobi/i.test(navigator.userAgent) \|\| /Android/i.test(navigator.userAgent);
	}catch(e){

	}
	return bIsMobile;
	}

	.idea/
	*.iml