docs(readme): add example gifs

closes #6
colinmeinke · Mar 15, 2016 · ebecfd1 · ebecfd1
1 parent a8c1b76
commit ebecfd1
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 14 deletions.
diff --git a/README.md b/README.md
@@ -2,6 +2,14 @@
 
 Animated SVG charts for React.
 
+![Line chart example](https://www.dropbox.com/s/vnm0u1k8orkc5n8/line-chart.gif?raw=1)
+
+[View line chart example code](./examples/lineChart)
+
+![Bar chart example](https://www.dropbox.com/s/xlmgpmml5og0q1j/bar-chart.gif?raw=1)
+
+[View bar chart example code](./examples/barChart)
+
 ## Installation
 
 ```
@@ -19,11 +27,11 @@ import { BarChart } from 'react-svg-chart';
 const App = () => (
   <BarChart
     bars={[
-      { value: 11 },
-      { value: 27 },
-      { value: 4 },
-      { value: 19 },
-      { value: 10 },
+      { label: 'travel', value: 11 },
+      { label: 'accomodation', value: 27 },
+      { label: 'food', value: 4 },
+      { label: 'drink', value: 19 },
+      { label: 'tourism', value: 10 },
     ]}
     height={ 400 }
     width={ 600 }
@@ -41,11 +49,11 @@ const App = () => (
   <LineChart
     lines={[
       { points: [
-        { value: 11 },
-        { value: 27 },
-        { value: 4 },
-        { value: 19 },
-        { value: 10 },
+        { label: 'travel', value: 11 },
+        { label: 'accommodation', value: 27 },
+        { label: 'food', value: 4 },
+        { label: 'drink', value: 19 },
+        { label: 'tourism', value: 10 },
       ]},
     ]}
     height={ 400 }

diff --git a/examples/barChart/App.js b/examples/barChart/App.js
@@ -6,7 +6,7 @@ const days = [
     title: 'Thursday, 9th March',
     bars: [
       { label: 'travel', value: 0.00 },
-      { label: 'accomodation', value: 20.25 },
+      { label: 'accommodation', value: 20.25 },
       { label: 'food', value: 20.28 },
       { label: 'drink', value: 7.43 },
       { label: 'tourism', value: 13.50 },
@@ -16,7 +16,7 @@ const days = [
     title: 'Wednesday, 8th March',
     bars: [
       { label: 'travel', value: 13.50 },
-      { label: 'accomodation', value: 17.77 },
+      { label: 'accommodation', value: 17.77 },
       { label: 'food', value: 14.63 },
       { label: 'drink', value: 9.47 },
       { label: 'tourism', value: 0.00 },
@@ -26,7 +26,7 @@ const days = [
     title: 'Tuesday, 7th March',
     bars: [
       { label: 'travel', value: 138.88 },
-      { label: 'accomodation', value: 21.50 },
+      { label: 'accommodation', value: 21.50 },
       { label: 'food', value: 17.42 },
       { label: 'drink', value: 3.98 },
       { label: 'tourism', value: 0.00 },

diff --git a/examples/lineChart/App.js b/examples/lineChart/App.js
@@ -3,7 +3,7 @@ import { LineChart } from '../../src';
 
 const categories = [
   {
-    title: 'Accomodation',
+    title: 'Accommodation',
     points: [
       { label: 'Fri 17', value: 7.65 },
       { label: 'Sat 18', value: 25.50 },