You can play around by moving the vertices.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<title>D3 : SVG animation</title> | |
<<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script> | |
<style> | |
svg { | |
font: 10px sans-serif; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<title>D3 : Object Constancy</title> | |
<script type="text/javascript" src="http://d3js.org/d3.v3.js"></script> | |
<style> | |
svg { | |
font: 10px sans-serif; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
header { | |
color: #007e99; | |
font-size: 1.5em; | |
padding:2px 350px; | |
} | |
header span { | |
color: #722; | |
} | |
nav { |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
id | value | |
---|---|---|
flare | ||
flare.analytics | ||
flare.analytics.cluster | ||
flare.analytics.cluster.AgglomerativeCluster | 3938 | |
flare.analytics.cluster.CommunityStructure | 3812 | |
flare.analytics.cluster.HierarchicalCluster | 6714 | |
flare.analytics.cluster.MergeEdge | 743 | |
flare.analytics.graph | ||
flare.analytics.graph.BetweennessCentrality | 3534 |
This example pulls together various examples of work with trees in D3.js.
The panning functionality can certainly be improved in my opinion and I would be thrilled to see better solutions contributed.
One can do all manner of housekeeping or server related calls on the drop event to manage a remote tree dataset for example.
Dragging can be performed on any node other than root (flare). Dropping can be done on any node.
Panning can either be done by dragging an empty part of the SVG around or dragging a node towards an edge.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<title>D3 + Leaflet (fork from bost.ocks.org/mike/leaflet/)</title> | |
<style> | |
#map { width: 960px; height: 500px;} | |
path { fill: #000; fill-opacity: .2; stroke: #fff; stroke-width: 1.5px;} | |
path:hover { fill: brown;fill-opacity: .7;} | |
</style> | |
<p id="map"><p> | |
<script src="http://d3js.org/d3.v2.min.js?2.9.3"></script> | |
<script src="leaflet.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> | |
<meta name="apple-mobile-web-app-capable" content="yes"> | |
<title>D3.js and Openlayers - US States</title> | |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/openlayers/2.13.1/theme/default/style.css" type="text/css"> | |
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/themes/blitzer/jquery-ui.css" type="text/css"> | |
<script src="http://d3js.org/d3.v2.min.js?2.9.3"></script> |