An example of multiple pie (donut) charts created with D3. The data is represented as a tabular array of objects; each row in the table is mapped to an arc, and rows are grouped into pie charts using d3.nest
.
This file contains hidden or 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"/> | |
<title>Point-Along-Path Interpolation</title> | |
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.4.6"></script> | |
<style type="text/css"> | |
path { | |
cursor: pointer; |
This file contains hidden or 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 name="viewport" content="initial-scale=1.0, user-scalable=no"/> | |
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script> | |
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.29.1"></script> | |
<style type="text/css"> | |
html, body, #map { | |
width: 100%; |
This file contains hidden or 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"> | |
<title>Index of all bl.ocks.org pages owned by a github user</title> | |
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.0.3"></script> | |
<base target="_top"> | |
<style> | |
body { padding: 0.5em; margin: 0; } | |
h1 { padding: 0; margin: 0; } |
This file contains hidden or 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
<html> | |
<head> | |
<title>Pointing</title> | |
<script type="text/javascript" src="http://github.com/mbostock/protovis/raw/v3.3.1/protovis.js"></script> | |
<style type="text/css"> | |
#fig { | |
width: 450px; | |
height: 425px; | |
} |
This file contains hidden or 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> | |
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script> | |
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js"></script> | |
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.geom.js"></script> | |
<style type="text/css"> | |
.link { stroke: #ccc; } | |
.nodetext { pointer-events: none; font: 10px sans-serif; } | |
</style> |
This file contains hidden or 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"> | |
<title>Recettear Item Data</title> | |
<script src="http://mbostock.github.com/d3/d3.js?2.0.3"></script> | |
<script src="http://mbostock.github.com/d3/d3.geom.js?2.0.3"></script> | |
<script src="http://mbostock.github.com/d3/d3.layout.js?2.0.3"></script> | |
<link href="styles.css" rel="stylesheet" type="text/css"/> | |
</head> |
This parallel coordinates visualization of cars from the ‘70s and ‘80s demonstrates one of D3 2.5.0’s new interactive features: the brush component. By clicking and dragging along any axis, you can specify a filter for that dimension. The brush component is also used in the updated scatterplot matrix example.
Number of responses by zip code from the USGS' site from the 2011-11-05 3.2 quake near Piedmont, CA, USA, via Yahoo! Pipes.
Number of responses by zip code from the USGS' site from the 2010-11-05 3.2 quake near Piedmont, CA, USA, via Yahoo! Pipes.