Permalink
Browse files

Improved layout.

  • Loading branch information...
mbostock committed Feb 27, 2011
1 parent afa0434 commit 82e44bebe01319fcef9f25771345d1fed51eedbe
View
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
Binary file not shown.
View
BIN chord.png
Binary file not shown.
View
Binary file not shown.
View
@@ -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
@@ -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
@@ -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
@@ -1,7 +1,7 @@
svg {
background: #eee;
- width: 710px;
- height: 370px;
+ width: 960px;
+ height: 500px;
}
#counties path {
View
@@ -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,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
@@ -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")
Oops, something went wrong.

0 comments on commit 82e44be

Please sign in to comment.