Skip to content

Commit

Permalink
added files
Browse files Browse the repository at this point in the history
  • Loading branch information
@shoelsch
shoelsch committed May 27, 2015
1 parent 99723ef commit 64c9c88
Show file tree
Hide file tree
Showing 6 changed files with 143 additions and 15 deletions.
Binary file added img/expressibility-vs-efficiency.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
0 logo.png → img/logo.png
View file
File renamed without changes
88 changes: 73 additions & 15 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
body {
font-family: 'Lato', sans-serif;
font-size: 1.2em;
font-weight: 300;
}

h1 {
Expand All @@ -18,6 +19,11 @@
font-weight: 400;
}

h3 {
font-size: 1.2em;
font-weight: 400;
}

.container {
width: 800px;
margin: 0 auto;
Expand All @@ -33,29 +39,81 @@
font-size: 1.5em;
}

.green {
color: green;
font-weight: 700;
}

.red {
color: red;
font-weight: 700;
}

section {
border-top: 1px solid #a8a8a8;
margin-top: 1.5em;
margin-bottom: 1.5em;
}
</style>
</head>
<body>
<div class='container'>
<header>
<img src='logo.png' width='80px' />
<img src='img/logo.png' width='80px' />
<h1>D3.js brown-bag</h1>
</header>
<div style='clear: both;'></div>
<h2>Web Standards</h2>
<ul>
<li><a href='tutorial/web-standards/0.html'>Example 0</a></li>
<li><a href='tutorial/web-standards/1.html'>Example 1</a></li>
<li><a href='tutorial/web-standards/2a.html'>Example 2a</a></li>
<li><a href='tutorial/web-standards/2b.html'>Example 2b</a></li>
<li><a href='tutorial/web-standards/3.html'>Example 3</a></li>
</ul>
<h2>Scatterplot</h2>
<ul>
<li><a href='tutorial/scatterplot/0.html'>Example 0</a></li>
<li><a href='tutorial/scatterplot/1.html'>Example 1</a></li>
<li><a href='tutorial/scatterplot/2.html'>Example 2</a></li>
</ul>

<section>
<h2>Overview</h2>
<p>Data-Driven Documents (D3.js)...</p>
<ul>
<li><span class='green'>IS</span> a declarative framework for binding arbitrary data to a Document Object Model (DOM) and manipulating it</li>
<li><span class='green'>IS</span> built atop of web standards, avoiding proprietary representation</li>
<li><span class='red'>IS NOT</span> a chart framework out of the box</li>
</ul>
<p><a href='http://d3js.org/'>Read more</a></p>
<img src='img/expressibility-vs-efficiency.png' />
</section>

<section>
<h2>What to Aspire to</h2>
<ul>
<li><a href='http://www.nytimes.com/interactive/2012/02/13/us/politics/2013-budget-proposal-graphic.html'>Obama's Budget Proposal</a></li>
<li><a href='http://www.nytimes.com/interactive/2012/11/02/us/politics/paths-to-the-white-house.html'>Paths to the White House</a></li>
<li><a href='http://bl.ocks.org/mbostock/061b3929ba0f3964d335'>Maze Tree</a></li>
<li><a href='http://bl.ocks.org/mbostock/267208068dbb75285114'>Spiral Triangle</a></li>
</ul>
</section>

<section>
<h2>Web Standards</h2>
<ul>
<li><a href='tutorial/web-standards/0.html'>Example 0</a></li>
<li><a href='tutorial/web-standards/1.html'>Example 1</a></li>
<li><a href='tutorial/web-standards/2a.html'>Example 2a</a></li>
<li><a href='tutorial/web-standards/2b.html'>Example 2b</a></li>
<li><a href='tutorial/web-standards/3.html'>Example 3</a></li>
</ul>
</section>

<section>
<h2>Scatterplot</h2>
<ul>
<li><a href='tutorial/scatterplot/0.html'>Example 0</a></li>
<li><a href='tutorial/scatterplot/1a.html'>Example 1a</a></li>
<li><a href='tutorial/scatterplot/1b.html'>Example 1b</a></li>
<li><a href='tutorial/scatterplot/2.html'>Example 2</a></li>
</ul>
</section>
<section>
<h2>Now What?</h2>
<ul>
<li><a href='https://github.com/mbostock/d3/wiki/Tutorials'>Tutorials</a></li>
<li><a href='https://github.com/mbostock/d3/wiki/Gallery'>Examples</a></li>
<li><a href='http://biovisualize.github.io/d3visualization/'>More Examples</a></li>
<li><a href='http://nvd3.org/'>NVD3: Reusable Charts for D3</a></li>
</ul>
<h2><a href='tutorial/blank.html'>Sandbox</a></h2>
</div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
Expand Down
0 tutorial/scatterplot/1.html → tutorial/scatterplot/1a.html
View file
File renamed without changes.
69 changes: 69 additions & 0 deletions tutorial/scatterplot/1b.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
<!DOCTYPE HTML>
<style>
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}

.axis text {
font-family: sans-serif;
font-size: 11px;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 600 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;

var x = d3.scale.linear()
.domain([0, 10])
.range([0, width]);

var y = d3.scale.linear()
.domain([0, 10])
.range([height, 0]); // Origin is in top left corner

var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");

var yAxis = d3.svg.axis()
.scale(y)
.orient("left");

var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

svg.append('g')
.attr('class', 'x axis')
.attr("transform", "translate(0," + height + ")")
.call(xAxis);

svg.append('g')
.attr('class', 'y axis')
.call(yAxis);

d3.csv('coordinates.csv', function(data) {
// Select
var circles = svg.selectAll('circle')
.data(data);

// Enter
circles.enter()
.append('circle')
.attr('cx', function(d) { return x(d.x); })
.attr('cy', function(d) { return y(d.y); })
.attr('r', 5)
.attr('fill', 'steelblue');
});


</script>
</body>
1 change: 1 addition & 0 deletions tutorial/scatterplot/coordinates.csv
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
x,y3,58,14,62,84,3
Expand Down

0 comments on commit 64c9c88

Please sign in to comment.