Merge pull request #74 from FormidableLabs/fix-docs

fix docs
FormidableLabs · Dec 18, 2015 · 8678c2d · 8678c2d
2 parents 59cd24e + 6706cb4
commit 8678c2d
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 33 deletions.
diff --git a/docs/docs.jsx b/docs/docs.jsx
@@ -1,5 +1,6 @@
 import React from "react";
 import ReactDOM from "react-dom";
+import d3Scale from "d3-scale";
 import Ecology from "ecology";
 import Radium, { Style } from "radium";
 import {VictoryAxis} from "victory-axis";
@@ -21,6 +22,7 @@ class Docs extends React.Component {
  scope={{
  React,
  ReactDOM,
+ d3Scale,
  VictoryScatter,
  VictoryLine,
  VictoryAxis,

diff --git a/docs/ecology.md b/docs/ecology.md
@@ -3,7 +3,7 @@ VictoryChart
 
 A flexible charting component for React. VictoryChart composes other Victory components into reusable charts. Acting as a coordinator rather than a stand-alone component, VictoryChart reconciles props such as `domain` and `scale` for child components, and provides a set of sensible defaults. This component works with:
 
-- [VictoryAxis](http://github.com/formidablelabs/victory-axis) 
+- [VictoryAxis](http://github.com/formidablelabs/victory-axis)
 - [VictoryLine](http://github.com/formidablelabs/victory-line)
 - [VictoryScatter](http://github.com/formidablelabs/victory-scatter)
 - [VictoryBar](http://github.com/formidablelabs/victory-bar)
@@ -23,26 +23,26 @@ VictoryChart was designed to build charts from minimal information. Pass in only
 
 ```playground
 <VictoryChart>
- <VictoryLine 
+ <VictoryLine
  y={(x) => 0.5 * x * x}/>
 </VictoryChart>
 ```
 
-In the example above, VictoryChart was given a VictoryLine component as a child. In addition, it also created a set of VictoryAxis components with the correct domain for the data being plotted by VictoryLine, created tick values based on that data, aligned all of its child components into a correct chart, and applied a set of default styles. 
+In the example above, VictoryChart was given a VictoryLine component as a child. In addition, it also created a set of VictoryAxis components with the correct domain for the data being plotted by VictoryLine, created tick values based on that data, aligned all of its child components into a correct chart, and applied a set of default styles.
 
 ### Declarative Composition
 
 VictoryCharts are composed of other Victory components. Compose several components of the same type...
 
 ```playground
 <VictoryChart>
- <VictoryLine 
- style={{data: 
+ <VictoryLine
+ style={{data:
  {stroke: "red", strokeWidth: 4}
  }}
  y={(x) => Math.sin(2 * Math.PI * x)}/>
- <VictoryLine 
- style={{data: 
+ <VictoryLine
+ style={{data:
  {stroke: "blue", strokeWidth: 4}
  }}
  y={(x) => Math.cos(2 * Math.PI * x)}/>
@@ -53,22 +53,22 @@ or compose components of different types on the same chart
 
 ```playground
 <VictoryChart height={450}>
- <VictoryScatter 
+ <VictoryScatter
  style={{data: {fill: "purple"}}}
  symbol="star"
  size={5}
  data={[
- {x:-4, y: -4}, 
- {x: 4, y: 2, fill: "red"}, 
+ {x:-4, y: -4},
+ {x: 4, y: 2, fill: "red"},
  {x: 1.8, y: 3}
  ]}/>
- <VictoryLine 
+ <VictoryLine
  y={(x) => 0.3 * x * x}/>
- <VictoryBar 
+ <VictoryBar
  style={{data: {fill: "blue"}}}
  data={[
- {x: 3, y: -4}, 
- {x: -3, y: 4}, 
+ {x: 3, y: -4},
+ {x: -3, y: 4},
  {x: 1, y: 3}
  ]}/>
 </VictoryChart>
@@ -83,26 +83,26 @@ The sensible defaults VictoryChart provides makes it easy to get started, but ev
  height={500}
  padding={{
  top: 75,
- bottom: 40, 
- left: 40, 
- right: 40 
+ bottom: 40,
+ left: 40,
+ right: 40
  }}
  domainPadding={{x: 20}}>
- <VictoryAxis 
- label="X AXIS" 
+ <VictoryAxis
+ label="X AXIS"
  orientation="top"/>
  <VictoryAxis dependentAxis
  tickValues={[0, 1.5, 3, 4.5]}
  style={{
  grid: {
- stroke: "grey", 
+ stroke: "grey",
  strokeWidth: 1
  },
  axis: {stroke: "transparent"},
  ticks: {stroke: "transparent"}
  }}/>
- <VictoryBar 
- style={{data: 
+ <VictoryBar
+ style={{data:
  {width: 15, fill: "orange"}
  }}
  data={[
@@ -112,7 +112,7 @@ The sensible defaults VictoryChart provides makes it easy to get started, but ev
  {x: 4, y: 2.5},
  {x: 5, y: 1},
  ]}/> 
-</VictoryChart> 
+</VictoryChart>
 ```
 
 Stacked bar charts and non-numeric data are supported too!
@@ -145,21 +145,20 @@ Stacked bar charts and non-numeric data are supported too!
  {fill: "tomato"}
  ]}
  labels={[
- "apples\n(fuji)", 
- "bananas", 
+ "apples\n(fuji)",
+ "bananas",
  "oranges\n(navel)"
  ]}/>
 </VictoryChart>
 ```
 
-Time series data is also supported: 
+Time series data is also supported:
 
 ```playground
 <VictoryChart
  height={450}
  scale={{
- x: d3.time.scale(),
- y: d3.scale.linear()
+ x: d3Scale.time()
  }}>
  <VictoryAxis
  label="Decades"
@@ -168,7 +167,7 @@ Time series data is also supported:
  new Date(2000, 1, 1),
  new Date(2020, 1, 1),
  ]}
- tickFormat={d3.time.format("%Y")}/>
+ tickFormat={(x) => x.getFullYear()}/>
  <VictoryLine
  data={[
  {x: new Date(1982, 1, 1), y: 125},
@@ -208,7 +207,7 @@ class App extends React.Component {
 
  getStyles() {
  const colors = [
- "red", "orange", "magenta", 
+ "red", "orange", "magenta",
  "gold", "blue", "purple"
  ];
  return {
@@ -230,7 +229,7 @@ class App extends React.Component {
  return (
  <VictoryChart height={500}
  animate={{velocity: 0.02}}>
- <VictoryAxis dependentAxis 
+ <VictoryAxis dependentAxis
  style={{grid: {strokeWidth: 1}}}/>
  <VictoryLine
  data={this.state.data}
@@ -244,5 +243,3 @@ ReactDOM.render(<App/>, mountNode);
 ```
 
 ### Props
-
-