Bret Kim chitacan

Description

Level: Municipalities (시군구)
Data format: TopoJSON
Data source: GADM

The data download script can be found here.

Author

A line chart with mouseover so that you can read the y-value based on the closest x-value. The x-value is found using d3.mouse and scale.invert. The y-value is then found by bisecting the data.

Click in the open space to add a node, drag from one node to another to add an edge.
Ctrl-drag a node to move the graph layout.
Click a node or an edge to select it.

When a node is selected: R toggles reflexivity, Delete removes the node.
When an edge is selected: L(eft), R(ight), B(oth) change direction, Delete removes the edge.

To see this example as part of a larger project, check out Modal Logic Playground!

This example builds a random tree using the Reingold-Tilford "tidy" algorithm, as described in "Tidier Drawings of Trees" and implemented by d3.layout.tree. As each node is added to the graph, it enters from the previous position of the parent node. Thus, the existing nodes and the new node transition smoothly to their new positions. The animation stops when 500 nodes have been added to the tree.

Ian Johnson and I implemented this graphic for fun.

This diagram shows the distribution of age groups in the United States over the last 150 years. Use the arrow keys to observe the changing population. Data from the Minnesota Population Center. Use the arrow keys to change the displayed year. The blue bars are the male population for each five-year age bracket, while the pink bars are the female population; the bars are partially transparent so that you can see how they overlap, unlike the traditional side-by-side display which makes it difficult to compare the relative distribution of the sexes.

	<!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; }

	<html>
	<head>
	<title>Animated Sparkline using SVG Path and d3.js</title>
	<script src="http://mbostock.github.com/d3/d3.v2.js"></script>
	<style>
	/* tell the SVG path to be a thin blue line without any area fill */
	path {
	stroke: steelblue;
	stroke-width: 1;
	fill: none;

	<!doctype html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8">
	<title>Line Chart</title>
	<style>

	.axis path,
	.axis line{
	fill: none;

	# Hello, and welcome to makefile basics.
	#
	# You will learn why `make` is so great, and why, despite its "weird" syntax,
	# it is actually a highly expressive, efficient, and powerful way to build
	# programs.
	#
	# Once you're done here, go to
	# http://www.gnu.org/software/make/manual/make.html
	# to learn SOOOO much more.