benlyall

Example for http://stackoverflow.com/questions/29880870/d3-calendar-view-using-json/29888069#29888069

An interactive version of a Reingold–Tilford tree. Click on the nodes to expand or collapse.

Location	2002	2003	2004	2005	2006	2007	2008	2009	2010	2011	2012
Australia	6.2	6	5.8	5.7	5.8	5.8	5.8	4.6	4.8	5.1	4.6
Austria	21.3	18.7	19.7	21	22.1	24.1	25.3	27.8	27.2	26.6	29.5
Belgium	1.3	1.5	1.6	2	2.3	2.7	3.1	3.8	4.2	4.9	5.1
Brazil	39.4	42	42.3	42.9	43.3	44.4	44.5	45.8	44	42.7	42.2
Canada	16.9	15.6	15.6	15.9	15.7	16.2	16.8	17.5	17.1	18	17.9
Chile	26.2	24.8	24.2	25.1	25.3	23.5	24.4	26.1	22	23.1	24.1
China (People's Republic of)	18.4	16.2	14.5	13.7	12.8	12.5	12.6	12.1	11.4	10.7	9.8
Czech Republic	3.7	3.4	3.8	4	4.2	4.7	4.9	5.8	6.3	6.9	7.5
Denmark	11	11.9	13.6	15	14.2	16.1	16.7	17.8	20	22.2	24.4

This example shows how it is possible to use a D3 sunburst visualization (partition layout) with data that describes sequences of events.

A good use case is to summarize navigation paths through a web site, as in the sample synthetic data file (visit_sequences.csv). The visualization makes it easy to understand visits that start directly on a product page (e.g. after landing there from a search engine), compared to visits where users arrive on the site's home page and navigate from there. Where a funnel lets you understand a single pre-selected path, this allows you to see all possible paths.

Features:

works with data that is in a CSV format (you don't need to pre-generate a hierarchical JSON file, unless your data file is very large)
interactive breadcrumb trail helps to emphasize the sequence, so that it is easy for a first-time user to understand what they are seeing
percentages are shown explicitly, to help overcome the distortion of the data that occurs wh

	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>
	.country {
	fill: green;
	stroke: darkgrey;
	stroke-width: .5px;
	stroke-linejoin: round;
	}

	<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>Final Map</title>
	<script src="//d3js.org/d3.v3.min.js"></script>
	<script src="//d3js.org/topojson.v1.min.js"></script>
	<script src="http://d3js.org/queue.v1.min.js"></script>
	<style>
	* {

	<!DOCTYPE html>
	<html>
	<head lang="en">
	<meta charset="UTF-8">
	<title>Final Map</title>
	<script src="//d3js.org/d3.v3.min.js"></script>
	<script src="//d3js.org/topojson.v1.min.js"></script>
	<style>
	* {
	margin: 0;

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>NY State Counties With Map Markers</title>
	<style>
	body {
	margin-top: 50px;
	padding: 0;
	background-color: #eee8d5;

	<!DOCTYPE html>
	<html class="ocks-org do-not-copy">
	<meta charset="utf-8">
	<title>Object Constancy</title>
	<!-- <head><link rel="stylesheet" type="text/css" href="flu_style.css" /></head> -->

	<style>


	/default font/