Bret Kim chitacan

대한민국의 시군구별 인구밀도를 코로플래스(Choropleth)로 시각화. 자세한 작성법은 D3를 이용한 시각적 스토리텔링 부록 C 참고.

Author: Lucy Park
License: Apache v2

A random sample of 750 Abalone measurements from UCI Machine Learning Repository.

Dataset Description

1. Title of Database: Abalone data

2. Sources:

   (a) Original owners of database:

A sunburst is similar to the treemap, except it uses a radial layout. The root node of the tree is at the center, with leaves on the circumference. The area (or angle, depending on implementation) of each arc corresponds to its value. Sunburst design by John Stasko. Data courtesy Jeff Heer.

This example demonstrates how to prevent D3’s force layout from moving nodes that have been repositioned by the user. When the force layout’s drag behavior dispatches a dragstart event, the fixed property of the dragged node is set to true. This prevents the force layout from subsequently changing the position of the node (due to forces). Double-click to release a node.

Internally, the force layout uses three bits to control whether a node is fixed. The first bit can be set externally, as in this example. The second and third bits are set on mouseover and mousedown, respectively, so that nodes are fixed temporarily during dragging. Although the second and third bits are automatically cleared when dragging ends, the first bit stays true in this example, and thus nodes remain fixed after dragging.

Also note that the force layout resumes au

For continuous data such as time series, a streamgraph can be used in place of stacked bars. This example also demonstrates path transitions to interpolate between different layouts. Streamgraph algorithm, colors, and data generation inspired by Byron and Wattenberg.

	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/ >
	<title>Gooey Effect</title>

	<script src="http://d3js.org/d3.v3.min.js"></script>
	<!-- jQuery -->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<!-- Bootstrap 3 -->

	<!DOCTYPE html>
	<html>
	<head>
	<title>Simple tables in D3</title>
	<meta charset="utf-8">
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="https://rawgit.com/gka/d3-jetpack/master/d3-jetpack.js"></script>
	<style type="text/css">
	body { font-family: 'Helvetica Neue', Helvetica; font-weight: 300; padding: 20px;}
	th { text-align: left; }

	var EventEmitter = require('events').EventEmitter,
	_ = require('lodash');

	/**
	* Creates an action functor object
	*/
	exports.createAction = function() {

	var action = new EventEmitter(),
	eventLabel = "action",

	# Editor backup files
	*.bak
	*~