Daniel Teixeira ddtxra

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

The tree layout implements the Reingold-Tilford algorithm for efficient, tidy arrangement of layered nodes. The depth of nodes is computed by distance from the root, leading to a ragged appearance. Cartesian orientations are also supported. Implementation based on work by Jeff Heer and Jason Davies using Buchheim et al.'s linear-time variant of the Reingold-Tilford algorithm. Data shows the Flare class hierarchy, also courtesy Jeff Heer.

Compare to this Cartesian layout.

This chart shows a histogram of a Bates distribution. The data is randomly generated. The values are then binned at regular intervals using D3’s histogram layout. The x-axis uses a linear scale, such that the tick values appear between bars; this provides better indication that each bar represents the count of values between its surrounding tick values.

See also this histogram of a log-normal distribution of time durations.

group	date	value
1	2008-01	10
1	2008-04	8
1	2008-07	14
1	2008-10	9
1	2009-01	10
1	2009-04	8
1	2009-07	14
1	2009-10	9
2	2008-01	3

	import numpy as np
	from sklearn.neural_network import MLPRegressor
	from sklearn.model_selection import RandomizedSearchCV
	from keras.models import Sequential
	from keras.layers import Dense
	from keras.wrappers.scikit_learn import KerasRegressor
	import sklearn.metrics
	def mean_absolute_percentage_error(y_true, y_pred):
	if any(y_true == 0):
	return 0.0

	/*!
	* Bootstrap v3.3.2 (http://getbootstrap.com)
	* Copyright 2011-2015 Twitter, Inc.
	* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
	//! normalize.css v3.0.2 \| MIT License \| git.io/normalize */html{font-family:sans-serif;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{margin:.67em 0;font-size:2em}mark{color:#000;background:#ff0}small{font-size:80%}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{height:0;-webkit-box-sizing:content-box

	html,body,#wrapper {
	width: 100%;
	height: 100%;
	margin: 0px;
	}

	.chart {
	font-family: Arial, sans-serif;
	font-size: 12px;
	}

	<html>
	<head>
	<title>D3 in Action Chapter 5 - Example 10</title>
	<meta charset="utf-8" />
	<script src="http://d3js.org/d3.v3.min.js" type="text/JavaScript"></script>
	</head>
	<style>
	svg {
	height: 500px;
	width: 500px;

	license: gpl-3.0
	height: 960
	border: no