Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

move around files for tutorial

  • Loading branch information...
commit 0424c17aa937e50f1f5cfec35f5192324ebe03b6 1 parent 0c5b057
@dchester dchester authored
View
17 tutorial/01.html
@@ -1,17 +0,0 @@
-<!doctype>
-<head>
- <script src="../vendor/d3.min.js"></script>
- <script src="../vendor/d3.layout.min.js"></script>
- <script src="../rickshaw.min.js"></script>
-</head>
-
-<body>
-
-<div id="chart"></div>
-
-<script>
-</script>
-
-</body>
-
-
View
13 tutorial/01.js
@@ -1,13 +0,0 @@
-var graph = new Rickshaw.Graph( {
- element: document.querySelector("#chart"),
- width: 300,
- height: 200,
- series: [
- {
- data: [ { x: 0, y: 40 }, { x: 1, y: 49 }, { x: 2, y: 38 }, { x: 3, y: 30 }, { x: 4, y: 32 } ],
- color: 'steelblue'
- }
- ]
-} );
-
-graph.render();
View
0  tutorial/02.html → tutorial/example_01.html
File renamed without changes
View
0  tutorial/03.html → tutorial/example_02.html
File renamed without changes
View
0  tutorial/04.html → tutorial/example_03.html
File renamed without changes
View
0  tutorial/05.html → tutorial/example_04.html
File renamed without changes
View
0  tutorial/06.html → tutorial/example_05.html
File renamed without changes
View
0  tutorial/07.html → tutorial/example_06.html
File renamed without changes
View
0  tutorial/08.html → tutorial/example_07.html
File renamed without changes
View
130 tutorial/introduction
@@ -1,130 +0,0 @@
-Rickshaw makes charting time series data easy.
-
-Building on top of Mike Bostock's delightful d3.js library, Rickshaw
-is a simple framework for drawing charts of time series data on a web
-page. These charts can be powered by static historical data sets, or
-living data that continuously updates.
-
-First let us fetch and install Rickshaw.
-
-% git clone gitolite@git.shuttercorp.net:rickshaw XXX FIXME github
-% cd rickshaw
-% make
-
-The make process depends on node and npm, which you may need to
-install. Alternatively you can source all of the Rickshaw JavaScript
-files you need independently. In this tutorial we'll be using the
-combined and minified "rickshaw.min.js" that a successful `make`
-created.
-
-We'll start with some boilerplate, which will also serve to satisfy
-all of our library dependencies.
-
-[01.html]
-
-Adding the following snippet of JavaScript inside our <script> tag is
-all we need to begin painting our chart.
-
-[01.js]
-
-Breaking that down a bit, on line 1 we create a new variable to hold
-our graph object and begin the call to Rickshaw.Graph's constructor.
-The 'element' parameter on line 2 is where we pass along an DOM
-element reference for Rickshaw to operate on (our empty chart div, in
-this case). Order is meaningful here, our chart div needs to exist
-before we can grab a reference to it. The next two lines specify the
-width and height of the vector graphic we're going to draw inside that
-element reference.
-
-The 'series' argument deserves a little extra attention. It receives
-an array of objects. We're only painting one line to begin with, so
-we're passing along one object which has two properties. 'color',
-which is a color unit (http://www.w3.org/TR/css3-color/#colorunits),
-and 'data'. The 'data' field also receives an array of objects, where
-each object is a pair of 'x' and 'y' coordinate values.
-
-Lastly, we call the render() method on our previously declared graph
-object, which creates paints our chart on the screen.
-
-[02.html]
-
-Our previous work allowed us to paint a chart of made up values with
-minimal scaffolding. That was fun, but it doesn't tell us anything
-interesting about data. Let's use population change data from the
-2010 U.S. Census
-(http://2010.census.gov/2010census/data/pop_change.csv) to power our
-chart, and see what we find.
-
-We'll begin by drawing a line representing the United States
-population with a point for each decade from 1910 to 2010. We'll use
-a short program to massage the CSV data at the census.gov URL into a
-JavaScript data structure that Rickshaw.Graph's constructor can take
-as its 'data' argument:
-
-% curl -s http://2010.census.gov/2010census/data/pop_change.csv | ./transform01.pl
-
-
-outputs:
-
-[ { x: 1910, y: 92228531 }, { x: 1920, y: 106021568 }, { x: 1930, y: 123202660 }, { x: 1940, y: 132165129 }, { x: 1950, y: 151325798 }, { x: 1960, y: 179323175 }, { x: 1970, y: 203211926 }, { x: 1980, y: 226545805 }, { x: 1990, y: 248709873 }, { x: 2000, y: 281421906 }, { x: 2010, y: 308745538 } ]
-
-which we can replace our previous data argument with.
-
-[03.html]
-
-A trained eye can already see some points of interest there. For
-instance, ending about a quarter way into the graph there is a short
-period where the growth rate flattens out significantly. What
-happened then?
-
-First we have to answer the question of when the flattening happened.
-Putting a label on our x axis should help. Rickshaw gives us a helper
-for time based axes. After we modify our data transformation script
-to use epoch seconds for the 'x' values we can pass our graph along to
-Rickshaw.Graph.Axis.Time's constructor. When the graph's render()
-function is later called Rickshaw examines the 'x' domain and
-determines the time unit being used, and labels the graph accordingly.
-The styling we included lines up the labels nicely across the bottom
-of our graph.
-
-[transform02.pl]
-[04.html]
-
-Now let's add the pieces to get a 'y' axis. We need a new HTML
-element to put the 'y' axis in, as well as some styling to position
-the axis absolutely in relation to the chart.
-
-Hopefully the new call to Rickshaw.Graph.Axis.Y is beginning to look
-familiar. We pass along a reference to our graph, as well as the
-element we want to draw the axis inside. And Rickshaw has some
-fixture data that helps format the numbers for us.
-
-[05.html]
-
-The Great Depression left a mark.
-
-We should break that data down by region. Some simple changes to our
-data transformation gives us the regional data for our series.
-
-[transform03.pl]
-
-Plugging that data into our series parameter leaves us wanting to
-provide colors for each of those individual series. We'll use the
-Rickshaw.Color.Palette plugin to pick our colors. Once we've created
-our palette, calling its color() method returns the next color.
-
-[06.html]
-
-We need a legend! By now hopefully this is a familiar pattern. We
-add a container div for the legend, and give it some styling to
-position it. The we call the constructor for the
-Rickshaw.Graph.Legend plugin, which takes a reference to our newly
-added dom element, and a reference to the graph.
-
-[07.html]
-
-New Yorkers have a bit of a reputation there, huh? While it is clear
-that the Northeast growth rate has flattened the most, it would be
-neat if we could see the growth by region as a percentage of total
-growth over time.
-
View
24 tutorial/pop-change.html
@@ -1,24 +0,0 @@
-<!doctype>
-<head>
- <script src="../vendor/d3.min.js"></script>
- <script src="../vendor/d3.layout.min.js"></script>
- <script src="../rickshaw.min.js"></script>
-</head>
-
-<body>
-
-<div id="chart"></div>
-
-<script>
-var graph = new Rickshaw.Graph( {
- element: document.querySelector('#chart'),
- renderer: 'line',
- series: [{
- data: [ { x: 0, y: 92228531 }, { x: 1, y: 106021568 }, { x: 2, y: 123202660 }, { x: 3, y: 132165129 }, { x: 4, y: 151325798 }, { x: 5, y: 179323175 }, { x: 6, y: 203211926 }, { x: 7, y: 226545805 }, { x: 8, y: 248709873 }, { x: 9, y: 281421906 }, { x: 10, y: 308745538 } ]
- }]
-} );
-
-graph.render();
-</script>
-
-</body>
View
0  tutorial/transform01.pl → tutorial/transform.pl
File renamed without changes
View
0  tutorial/transform02.pl → tutorial/transform_epoch.pl
File renamed without changes
View
0  tutorial/transform03.pl → tutorial/transform_region.pl
File renamed without changes
Please sign in to comment.
Something went wrong with that request. Please try again.