Skip to content
Browse files

Improved layout.

  • Loading branch information...
1 parent afa0434 commit 82e44bebe01319fcef9f25771345d1fed51eedbe @mbostock mbostock committed
View
2 _includes/chord.js
@@ -9,7 +9,7 @@ var chord = d3.layout.chord()
[ 1013, 990, 940, 6907]
]);
-var w = 710,
+var w = 960,
h = 600,
r0 = Math.min(w, h) * .41,
r1 = r0 * 1.1;
View
5 _includes/choropleth.js
@@ -1,9 +1,6 @@
var data; // loaded asynchronously
-var path = d3.geo.path()
- .projection(d3.geo.albersUsa()
- .scale(740)
- .translate([355, 185]));
+var path = d3.geo.path();
var svg = d3.select("#chart")
.append("svg:svg");
View
3 _includes/dji.js
@@ -8,7 +8,7 @@ d3.csv("dji.csv", function(csv) {
.domain([-.05, .05])
.range(d3.range(9));
- var w = 710,
+ var w = 960,
pw = 14,
z = ~~((w - pw * 2) / 53),
ph = z >> 1,
@@ -26,6 +26,7 @@ d3.csv("dji.csv", function(csv) {
vis.append("svg:text")
.attr("transform", "translate(-6," + h / 2 + ")rotate(-90)")
+ .attr("text-anchor", "middle")
.text(function(d) { return d; });
vis.selectAll("rect.day")
View
26 _layouts/api.html
@@ -13,24 +13,26 @@
</head>
<body>
<div class="body">
- <div class="sidebar">
- <a href="../">Overview</a>
- <a href="../ex/">Examples</a>
- <a href="../tutorial/">Tutorials</a>
- <b><a href="../api/">Reference</a></b>
- <a href="http://github.com/mbostock/d3">Download</a>
- </div>
<div class="content">
-
-<a href="http://github.com/mbostock/d3"><img
- style="position:absolute;top:0;right:0;border:0;"
- width="149" height="149" src="../forkme.png" alt="Fork me on GitHub"
- /></a>
+ <div class="topbar">
+ <a href="../">Overview</a>
+ <a href="../ex/">Examples</a>
+ <b><a href="../api/">Documentation</a></b>
+ <a href="http://github.com/mbostock/d3">Download</a>
+ </div>
+ <div class="sidebar">
+ <h1>d3.js</h1>
+ </div>
{{ content }}
</div>
<div class="foot">Copyright &copy; 2011 <a href="http://bost.ocks.org/mike">Mike Bostock</a></div>
</div>
+ </div>
+ <a href="http://github.com/mbostock/d3"><img
+ style="position:absolute;top:0;right:0;border:0;"
+ width="149" height="149" src="../forkme.png" alt="Fork me on GitHub"
+ /></a>
</body>
</html>
View
26 _layouts/default.html
@@ -13,24 +13,26 @@
</head>
<body>
<div class="body">
- <div class="sidebar">
- <b><a href=".">Overview</a></b>
- <a href="ex/">Examples</a>
- <a href="tutorial/">Tutorials</a>
- <a href="api/">Reference</a>
- <a href="http://github.com/mbostock/d3">Download</a>
- </div>
<div class="content">
-
-<a href="http://github.com/mbostock/d3"><img
- style="position:absolute;top:0;right:0;border:0;"
- width="149" height="149" src="forkme.png" alt="Fork me on GitHub"
- /></a>
+ <div class="topbar">
+ <b><a href=".">Overview</a></b>
+ <a href="ex/">Examples</a>
+ <a href="api/">Documentation</a>
+ <a href="http://github.com/mbostock/d3">Download</a>
+ </div>
+ <div class="sidebar">
+ <h1>d3.js</h1>
+ </div>
{{ content }}
</div>
<div class="foot">Copyright &copy; 2011 <a href="http://bost.ocks.org/mike">Mike Bostock</a></div>
</div>
+ </div>
+ <a href="http://github.com/mbostock/d3"><img
+ style="position:absolute;top:0;right:0;border:0;"
+ width="149" height="149" src="forkme.png" alt="Fork me on GitHub"
+ /></a>
</body>
</html>
View
26 _layouts/ex.html
@@ -13,24 +13,26 @@
</head>
<body>
<div class="body">
- <div class="sidebar">
- <a href="../">Overview</a>
- <b><a href="../ex/">Examples</a></b>
- <a href="../tutorial/">Tutorials</a>
- <a href="../api/">Reference</a>
- <a href="http://github.com/mbostock/d3">Download</a>
- </div>
<div class="content">
-
-<a href="http://github.com/mbostock/d3"><img
- style="position:absolute;top:0;right:0;border:0;"
- width="149" height="149" src="../forkme.png" alt="Fork me on GitHub"
- /></a>
+ <div class="topbar">
+ <a href="../">Overview</a>
+ <b><a href="../ex/">Examples</a></b>
+ <a href="../api/">Documentation</a>
+ <a href="http://github.com/mbostock/d3">Download</a>
+ </div>
+ <div class="sidebar">
+ <h1>d3.js</h1>
+ </div>
{{ content }}
</div>
<div class="foot">Copyright &copy; 2011 <a href="http://bost.ocks.org/mike">Mike Bostock</a></div>
</div>
+ </div>
+ <a href="http://github.com/mbostock/d3"><img
+ style="position:absolute;top:0;right:0;border:0;"
+ width="149" height="149" src="../forkme.png" alt="Fork me on GitHub"
+ /></a>
</body>
</html>
View
26 _layouts/tutorial.html
@@ -13,24 +13,26 @@
</head>
<body>
<div class="body">
- <div class="sidebar">
- <a href="../">Overview</a>
- <a href="../ex/">Examples</a>
- <b><a href="../tutorial/">Tutorials</a></b>
- <a href="../api/">Reference</a>
- <a href="http://github.com/mbostock/d3">Download</a>
- </div>
<div class="content">
-
-<a href="http://github.com/mbostock/d3"><img
- style="position:absolute;top:0;right:0;border:0;"
- width="149" height="149" src="../forkme.png" alt="Fork me on GitHub"
- /></a>
+ <div class="topbar">
+ <a href="../">Overview</a>
+ <a href="../ex/">Examples</a>
+ <b><a href="../api/">Documentation</a></b>
+ <a href="http://github.com/mbostock/d3">Download</a>
+ </div>
+ <div class="sidebar">
+ <h1>d3.js</h1>
+ </div>
{{ content }}
</div>
<div class="foot">Copyright &copy; 2011 <a href="http://bost.ocks.org/mike">Mike Bostock</a></div>
</div>
+ </div>
+ <a href="http://github.com/mbostock/d3"><img
+ style="position:absolute;top:0;right:0;border:0;"
+ width="149" height="149" src="../forkme.png" alt="Fork me on GitHub"
+ /></a>
</body>
</html>
View
38 api/index.markdown
@@ -1,13 +1,43 @@
---
layout: api
-title: Reference
+title: Documentation
---
-# d3.js ~ Reference
+# Documentation
-## Data-Driven Documents
+## Tutorials
-Coming soon!
+<div class="gallery">
+
+<div class="list">
+ <a href="../tutorial/bar-1.html">
+ <img src="../tutorial/bar-1.png"/>
+ </a>
+ <h4><a href="../tutorial/bar-1.html">A Bar Chart, Part 1</a></h4>
+
+ <p>Learn the basics of D3 with this introductory tutorial. Using the
+ example of a no-frills, static bar chart, this guide describes the core D3
+ concepts, including selections, functional properties, and scales. You'll
+ also see how D3 can be applied to HTML, CSS and SVG.</p>
+</div>
+
+<div class="list">
+ <a href="../tutorial/bar-2.html">
+ <img src="../tutorial/bar-2.png"/>
+ </a>
+ <h4><a href="../tutorial/bar-2.html">A Bar Chart, Part 2</a></h4>
+
+ <p>A continuation of the above introductory tutorial, this guide covers more
+ exciting dynamic aspects of D3, including transitions and data joins. Learn
+ how to create realtime visualizations and specify enter and exit
+ animations.</p>
+</div>
+
+</div>
+
+<br clear="left"/>
+
+## Reference
### d3
View
BIN calendar.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN chord.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
BIN choropleth.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
6 ex/calendar.markdown
@@ -3,11 +3,9 @@ layout: ex
title: Calendar View
---
-# d3.js ~ Calendar View
+# Calendar View
-## Data-Driven Documents
-
-<div id="chart"> </div>
+<div class="gallery" id="chart"> </div>
<link type="text/css" rel="stylesheet" href="calendar.css"/>
<link type="text/css" rel="stylesheet" href="colorbrewer.css"/>
<script type="text/javascript" src="../d3.js"> </script>
View
2 ex/chord.js
@@ -9,7 +9,7 @@ var chord = d3.layout.chord()
[ 1013, 990, 940, 6907]
]);
-var w = 710,
+var w = 960,
h = 600,
r0 = Math.min(w, h) * .41,
r1 = r0 * 1.1;
View
6 ex/chord.markdown
@@ -3,11 +3,9 @@ layout: ex
title: Chord Diagram
---
-# d3.js ~ Chord Diagram
+# Chord Diagram
-## Data-Driven Documents
-
-<div id="chart"> </div>
+<div class="gallery" id="chart"> </div>
<link type="text/css" rel="stylesheet" href="chord.css"/>
<script type="text/javascript" src="../d3.js"> </script>
<script type="text/javascript" src="../d3.layout.js"> </script>
View
4 ex/choropleth.css
@@ -1,7 +1,7 @@
svg {
background: #eee;
- width: 710px;
- height: 370px;
+ width: 960px;
+ height: 500px;
}
#counties path {
View
5 ex/choropleth.js
@@ -1,9 +1,6 @@
var data; // loaded asynchronously
-var path = d3.geo.path()
- .projection(d3.geo.albersUsa()
- .scale(740)
- .translate([355, 185]));
+var path = d3.geo.path();
var svg = d3.select("#chart")
.append("svg:svg");
View
6 ex/choropleth.markdown
@@ -3,11 +3,9 @@ layout: ex
title: Choropleth
---
-# d3.js ~ Choropleth
+# Choropleth
-## Data-Driven Documents
-
-<div id="chart"> </div>
+<div class="gallery" id="chart"> </div>
<link type="text/css" rel="stylesheet" href="choropleth.css"/>
<link type="text/css" rel="stylesheet" href="colorbrewer.css"/>
<script type="text/javascript" src="../d3.js"> </script>
View
3 ex/dji.js
@@ -8,7 +8,7 @@ d3.csv("dji.csv", function(csv) {
.domain([-.05, .05])
.range(d3.range(9));
- var w = 710,
+ var w = 960,
pw = 14,
z = ~~((w - pw * 2) / 53),
ph = z >> 1,
@@ -26,6 +26,7 @@ d3.csv("dji.csv", function(csv) {
vis.append("svg:text")
.attr("transform", "translate(-6," + h / 2 + ")rotate(-90)")
+ .attr("text-anchor", "middle")
.text(function(d) { return d; });
vis.selectAll("rect.day")
View
134 ex/index.markdown
@@ -3,110 +3,80 @@ layout: ex
title: Examples
---
-# d3.js ~ Examples
+# Examples
-## Data-Driven Documents
+<div class="gallery">
<div class="list">
- <div>
- <a href="calendar.html">
- <img src="../calendar.png"/>
- </a>
- </div>
- <div class="desc">
- <h4><a href="calendar.html">Calendar View</a></h4>
-
- <p>…</p>
- </div>
+ <a href="calendar.html">
+ <img src="../calendar.png"/>
+ </a>
+ <h4><a href="calendar.html">Calendar View</a></h4>
+
+ <p>…</p>
</div>
<div class="list">
- <div>
- <a href="chord.html">
- <img src="../chord.png"/>
- </a>
- </div>
- <div class="desc">
- <h4><a href="chord.html">Chord Diagram</a></h4>
-
- <p>…</p>
- </div>
+ <a href="chord.html">
+ <img src="../chord.png"/>
+ </a>
+ <h4><a href="chord.html">Chord Diagram</a></h4>
+
+ <p>…</p>
</div>
<div class="list">
- <div>
- <a href="choropleth.html">
- <img src="../choropleth.png"/>
- </a>
- </div>
- <div class="desc">
- <h4><a href="choropleth.html">Choropleth Map</a></h4>
-
- <p>…</p>
- </div>
+ <a href="choropleth.html">
+ <img src="../choropleth.png"/>
+ </a>
+ <h4><a href="choropleth.html">Choropleth Map</a></h4>
+
+ <p>…</p>
</div>
<div class="list">
- <div>
- <a href="force.html">
- <img src="../force.png"/>
- </a>
- </div>
- <div class="desc">
- <h4><a href="force.html">Force-Directed Graph</a></h4>
-
- <p>…</p>
- </div>
+ <a href="force.html">
+ <img src="../force.png"/>
+ </a>
+ <h4><a href="force.html">Force-Directed Graph</a></h4>
+
+ <p>…</p>
</div>
<div class="list">
- <div>
- <a href="splom.html">
- <img src="../splom.png"/>
- </a>
- </div>
- <div class="desc">
- <h4><a href="splom.html">Scatterplot Matrix</a></h4>
-
- <p>…</p>
- </div>
+ <a href="splom.html">
+ <img src="../splom.png"/>
+ </a>
+ <h4><a href="splom.html">Scatterplot Matrix</a></h4>
+
+ <p>…</p>
</div>
<div class="list">
- <div>
- <a href="stack.html">
- <img src="../stack.png"/>
- </a>
- </div>
- <div class="desc">
- <h4><a href="stack.html">Stacked Bars</a></h4>
-
- <p>…</p>
- </div>
+ <a href="stack.html">
+ <img src="../stack.png"/>
+ </a>
+ <h4><a href="stack.html">Stacked Bars</a></h4>
+
+ <p>…</p>
</div>
<div class="list">
- <div>
- <a href="stream.html">
- <img src="../stream.png"/>
- </a>
- </div>
- <div class="desc">
- <h4><a href="stream.html">Streamgraph</a></h4>
-
- <p>…</p>
- </div>
+ <a href="stream.html">
+ <img src="../stream.png"/>
+ </a>
+ <h4><a href="stream.html">Streamgraph</a></h4>
+
+ <p>…</p>
</div>
<div class="list">
- <div>
- <a href="voronoi.html">
- <img src="../voronoi.png"/>
- </a>
- </div>
- <div class="desc">
- <h4><a href="voronoi.html">Voronoi Diagram</a></h4>
-
- <p>…</p>
- </div>
+ <a href="voronoi.html">
+ <img src="../voronoi.png"/>
+ </a>
+ <h4><a href="voronoi.html">Voronoi Diagram</a></h4>
+
+ <p>…</p>
+</div>
+
</div>
View
33 index.markdown
@@ -2,22 +2,33 @@
layout: default
---
-# d3.js
-
-## Data-Driven Documents
+# Data-Driven Documents
**D3.js** is a small, [free](https://github.com/mbostock/d3/raw/master/LICENSE)
JavaScript library for manipulating documents based on data.
<div class="gallery">
- <a title="Calendar View" href="ex/calendar.html"><img src="calendar.png"></a>
- <a title="Chord Diagram" href="ex/chord.html"><img src="chord.png"></a>
- <a title="Choropleth Map" href="ex/choropleth.html"><img src="choropleth.png"></a>
- <a title="Force-Directed Graph" href="ex/force.html"><img src="force.png"></a>
- <a title="Scatterplot Matrix" href="ex/splom.html"><img src="splom.png"></a>
- <a title="Stacked Bars" href="ex/stack.html"><img src="stack.png"></a>
- <a title="Streamgraph" href="ex/stream.html"><img src="stream.png"></a>
- <a title="Voronoi Diagram" href="ex/voronoi.html"><img src="voronoi.png"></a>
+ <a title="Calendar View" href="ex/calendar.html"><img src="calendar.png"></a
+ ><a title="Chord Diagram" href="ex/chord.html"><img src="chord.png"></a
+ ><a title="Choropleth Map" href="ex/choropleth.html"><img src="choropleth.png"></a
+ ><a title="Force-Directed Graph" href="ex/force.html"><img src="force.png"></a
+ ><a title="Scatterplot Matrix" href="ex/splom.html"><img src="splom.png"></a
+ ><a title="Stacked Bars" href="ex/stack.html"><img src="stack.png"></a
+ ><a title="Streamgraph" href="ex/stream.html"><img src="stream.png"></a
+ ><a title="Voronoi Diagram" href="ex/voronoi.html"><img src="voronoi.png"></a>
+</div>
+
+<div class="sidebar">
+ <ul>
+ <li><a href="#selections">Selections</a></li>
+ <li><a href="#dynamic_properties">Dynamic Properties</a></li>
+ <li><a href="#enter_and_exit">Enter and Exit</a></li>
+ <li><a href="#transformation_not_representation">Transformation, not Representation</a></li>
+ <li><a href="#transitions">Transitions</a></li>
+ <li><a href="#subselections">Subselections</a></li>
+ <li><a href="#data_keys">Data Keys</a></li>
+ <li><a href="#modules">Modules</a></li>
+ </ul>
</div>
D3 allows you to bind arbitrary data to a Document Object Model (DOM), and then
View
91 style.css
@@ -19,21 +19,13 @@ a:hover {
margin: auto;
}
-.sidebar {
- width: 150px;
- margin-top: 128px;
- margin-right: 10px;
- float: left;
-}
-
-.sidebar a {
- display: block;
- margin-bottom: 1em;
+.topbar a {
+ margin-right: .5em;
}
.content {
- width: 710px;
- float: left;
+ position: relative;
+ margin-left: 240px;
}
.content img {
@@ -41,77 +33,72 @@ a:hover {
margin: auto;
}
+.sidebar {
+ position: absolute;
+ left: -240px;
+ width: 230px;
+ font-weight: 300;
+}
+
.gallery {
- width: 644px;
- margin: auto;
+ position: relative;
+ left: -240px;
+ width: 970px;
}
-.content .gallery img, .content .list img {
+.content .gallery img {
display: inline;
- width: 200px;
+ width: 226px;
height: 180px;
border: solid 2px #ccc;
- margin: 4px;
+ margin-right: 10px;
+ margin-bottom: 8px;
}
-.content .gallery a:hover img, .content .list a:hover img {
+.content .gallery a:hover img {
border-color: steelblue;
}
-.content .list {
- clear: both;
+.list {
+ clear: left;
}
-.content .list div {
- margin-right: 12px;
+.list img {
float: left;
}
-.content .list .desc {
- width: 486px;
- margin-right: 0;
-}
-
-.content .list h4 {
- font-weight: normal;
- margin: 0;
-}
-
h1 {
font-size: 36px;
font-weight: 300;
margin-bottom: .3em;
}
-h2 {
+.sidebar {
color: #666;
- font-weight: normal;
}
-.foot {
- font-weight: 300;
- margin-left: 160px;
- padding-top: 3em;
- width: 800px;
- clear: both;
+.sidebar ul {
+ padding-left: 0;
+ list-style-type: none;
}
-.side {
- float: left;
- width: 110px;
- padding-right: 40px;
- margin-right: 10px;
+.sidebar li {
+ white-space: nowrap;
+ width: 230px;
+ overflow: hidden;
+ text-overflow: ellipsis;
}
-.side ul {
- padding-left: 0;
- list-style-type: none;
+.sidebar h3 {
+ font-weight: 300;
}
-.center {
- float: left;
- width: 790px;
- margin-right: 0px;
+.foot {
+ font-weight: 300;
+ margin-left: 240px;
+ padding-top: 3em;
+ width: 710px;
+ clear: both;
}
button {
View
8 tutorial/bar-1.markdown
@@ -3,9 +3,7 @@ layout: tutorial
title: A Bar Chart, Part 1
---
-# d3.js ~ A Bar Chart, Part 1
-
-## Data-Driven Documents
+# A Bar Chart, Part 1
<style type="text/css">
@@ -48,7 +46,7 @@ One of the ways you might visualize this univariate data is a bar chart. This
guide will examine how to create a simple bar chart using D3, first with basic
HTML, and then a more advanced example with SVG.
-### HTML
+## HTML
To get started with HTML, you'll first need a container for the chart:
@@ -175,7 +173,7 @@ bars, is difficult in pure HTML. Chart types such as pies and streamgraphs are
practically impossible. Fortunately, there's a convenient alternative: [Scalable
Vector Graphics](http://en.wikipedia.org/wiki/Scalable_Vector_Graphics) (SVG)!
-### SVG
+## SVG
You use SVG much the same way as HTML, but it offers substantially more
flexibility. To start with SVG, create an `svg:svg` container instead of a
View
BIN tutorial/bar-1.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
10 tutorial/bar-2.markdown
@@ -3,9 +3,7 @@ layout: tutorial
title: A Bar Chart, Part 2
---
-# d3.js ~ A Bar Chart, Part 2
-
-## Data-Driven Documents
+# A Bar Chart, Part 2
The [previous part](bar-1.html) of this tutorial covered the construction of a
no-frills, static bar chart. This part will showcase some of the dynamic
@@ -17,7 +15,7 @@ at regular time intervals. For example, say you run a website, and want to track
how many visitors find your ideas intriguing? A bar chart could show the number
of visitors that subscribe to your newsletter in realtime!
-### Dynamic Data
+## Dynamic Data
Now typically, the subscription data would be downloaded to the client via an
HTTP request. You can poll the server to refresh the latest data every minute,
@@ -78,7 +76,7 @@ performance; with smaller data, the inefficiency of the `shift` operation is
negligible and can be ignored. The `redraw` method is a function that you will
define; we'll get to that shortly.
-### Dynamic Bars
+## Dynamic Bars
For now, the next step is to construct two scales, based on our knowledge of the
dataset and the desired chart size. To fix the maximum bar size to 80×20,
@@ -301,7 +299,7 @@ are joined to nodes by index. As the length of the data array is fixed, the
number of nodes never changes, and thus the enter and exit selections are always
empty.
-### Object Constancy
+## Object Constancy
Yet, the above animation is poor because it lacks object constancy through the
transition: it does not convey the changing data accurately. Rather than
View
BIN tutorial/bar-2.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
40 tutorial/index.markdown
@@ -1,40 +0,0 @@
----
-layout: tutorial
-title: Tutorials
----
-
-# d3.js ~ Tutorials
-
-## Data-Driven Documents
-
-<div class="list">
- <div>
- <a href="bar-1.html">
- <img src="bar-1.png"/>
- </a>
- </div>
- <div class="desc">
- <h4><a href="bar-1.html">A Bar Chart, Part 1</a></h4>
-
- <p>Learn the basics of D3 with this introductory tutorial. Using the
- example of a no-frills, static bar chart, this guide describes the core D3
- concepts, including selections, functional properties, and scales. You'll
- also see how D3 can be applied to HTML, CSS and SVG.</p>
- </div>
-</div>
-
-<div class="list">
- <div>
- <a href="bar-2.html">
- <img src="bar-2.png"/>
- </a>
- </div>
- <div class="desc">
- <h4><a href="bar-2.html">A Bar Chart, Part 2</a></h4>
-
- <p>A continuation of the above introductory tutorial, this guide covers more
- exciting dynamic aspects of D3, including transitions and data joins. Learn
- how to create realtime visualizations and specify enter and exit
- animations.</p>
- </div>
-</div>

0 comments on commit 82e44be

Please sign in to comment.
Something went wrong with that request. Please try again.