This example demonstrates loading of CSV data, which is then quantized into a diverging color scale. The values are visualized as colored cells per day. Days are arranged into columns by week, then grouped by month and years. Colors by Cynthia Brewer. Layout inspired by Rick Wicklin and Robert Allison. Dow Jones historical data copyright Yahoo! Finance or independent data provider; fair use for educational purposes.
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"> | |
<title>One Graph</title> | |
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.v2.js"></script> | |
<script type="text/javascript" src="simple-graph.js"></script> | |
<style type="text/css"> | |
body { font: 13px sans-serif; } | |
rect { fill: #fff; } |
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.
# Editor backup files | |
*.bak | |
*~ |
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> | |
<title>Scatterplot with Voronoi</title> | |
<!-- D3.js --> | |
<script src="http://d3js.org/d3.v3.js"></script> | |
<!-- jQuery --> |
대한민국의 시군구별 인구밀도를 코로플래스(Choropleth)로 시각화. 자세한 작성법은 D3를 이용한 시각적 스토리텔링 부록 C 참고.
- Author: Lucy Park
- License: Apache v2
A random sample of 750 Abalone measurements from UCI Machine Learning Repository.
1. Title of Database: Abalone data
2. Sources:
(a) Original owners of database:
# Editor backup files | |
*.bak | |
*~ |
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.