Bret Kim chitacan

This variation of a donut chart demonstrates how to add labels with lines. Clicking on the button changes the displayed data. Check Pie Chart with Labels and Missing Data to see how to handle transitions with missing/new data.

So fun, right? But think twice before you use gratuitous enter animations; they can be annoying! The motion is distracting if you’re reading text elsewhere on the page. And, if you’re looking at the visualization, the animation forces you to wait. Instead, use animation to facilitate by making it easier to follow data across views, or as a form of visual explanation. For more details, read Object Constancy.

Displaying planetary data from nasa.gov to test Parallel Coordinates in d3 with the awesome parcoords library

This is a fork of timelyportfolio’s gist, which timelyportfolio had forked from d3noob's example to allow a csv as the data source... Awesome work by those guys!

Still a long way to go, but this is a great start!

Multidimensional Visualization with D3.js

Speaker Links

D3.js Resources

Mike Bostock's Interactive Essays

This parallel coordinates visualization of cars from the ‘70s and ‘80s demonstrates one of D3 2.5.0’s new interactive features: the brush component. By clicking and dragging along any axis, you can specify a filter for that dimension. The brush component is also used in the updated scatterplot matrix example.

Update: Jason Davies has derived an example with reorderable axes!

Attempting to reimplement the stocks example from Cubism with the d3.horizon plugin.

A few notes so far:

d3.horizon does not expose d3.scales, which makes it hard to create axes
d3.horizon seems to expect an array of data which map to pixels. It would be more convenient the days in the year didn't have to be enumerated in this example, to fill in gaps. Without doing this, the chart appears to render fine but lacks gaps and is therefore wrong if the x-axis is a linear timecale.

Description

Level: Provinces (시도)
Data format: TopoJSON
Data source: GADM

The data download script can be found here.

Author

Lucy Park, Team POPONG

	<!DOCTYPE html>
	<html>
	<head>
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
	<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.29.1"></script>
	<style type="text/css">

	html, body, #map {
	width: 100%;

	//Practically all this code comes from https://github.com/alangrafu/radar-chart-d3
	//I only made some additions and aesthetic adjustments to make the chart look better
	//(of course, that is only my point of view)
	//Such as a better placement of the titles at each line end,
	//adding numbers that reflect what each circular level stands for
	//Not placing the last level and slight differences in color
	//
	//For a bit of extra information check the blog about it:
	//http://nbremer.blogspot.nl/2013/09/making-d3-radar-chart-look-bit-better.html