diff --git a/README.md b/README.md index dcd3972..6c65a59 100644 --- a/README.md +++ b/README.md @@ -16,35 +16,26 @@ Update git submodules $ npm run sync ``` -## Rebuild website - -first you have to install `canner-core` to generate html in http://reactd3.org +Start the dev server. The site will be available at http://localhost:8080 ``` -npm install -g canner-core +$ npm start ``` -building web pages. +## Rebuild website + +The parent website is written in markdown, and can be found in `./intro`. After each change, build the site with: ``` -canner-core build canner.js +$ npm run build-site ``` ----- - -We build most of our document in markdown. - -Inside `./docs` folder you can see there are two folders in each folder `md`, `md_origin`. `md_origin` is the original md files which need to compile via [smashmd](https://github.com/Canner/smash-md). - -You can just type +Additionally, we put the contents inside `./docs`. In each folder, there are two folders, `md`, and `md_origin`. `md_origin` contains the original md files which need to compile via [smashmd](https://github.com/Canner/smash-md). After each change, run build the docs with: ``` -make smashmd +$ npm run build-docs ``` -to recompile the whole original markdown files. - - ## License MIT diff --git a/get_start/index.html b/get_start/index.html index 10a89b6..61a5e44 100644 --- a/get_start/index.html +++ b/get_start/index.html @@ -276,11 +276,16 @@

Require Libraries

We need to require some library we need to use:

// first of course react!
 var React = require('react');
-// require `react-d3-core` for Chart component, which help us build a blank svg and chart title.
-var Chart = require('react-d3-core').Chart;
+// second, ReactDOM.
+var ReactDOM = require('react-dom');
 // require `react-d3-basic` for Line chart component.
 var LineChart = require('react-d3-basic').LineChart;
+

Or if you're using ES6 modules:

+
import React from 'react';
+import ReactDOM from 'react-dom';
+import {LineChart} from 'react-d3-basic';
+

Load

Load your data using webpack

var chartData = require('dsv?delimiter=,!../../data/garbage.csv');
@@ -315,31 +320,23 @@ 
Settings

 
Render!

 
Render it in React!

 
ReactDOM.render(
-    <Chart
-      title={title}
-      width={width}
-      height={height}
-      margins= {margins}
-      >
-      <LineChart
-        margins= {margins}
-        title={title}
-        data={chartData}
-        width={width}
-        height={height}
-        chartSeries={chartSeries}
-        x={x}
-      />
-    </Chart>
+  <LineChart
+    margins= {margins}
+    title={title}
+    data={chartData}
+    width={width}
+    height={height}
+    chartSeries={chartSeries}
+    x={x}
+  />
   , document.getElementById('line-user')
-  )
+)
 

 
Full code in your javascript

 
"use strict"
 
 var React = require('react');
 var ReactDOM = require('react-dom');
-var Chart = require('react-d3-core').Chart;
 var LineChart = require('react-d3-basic').LineChart;
 
 (function() {
@@ -367,25 +364,16 @@ 
Full code in your javascript

     }
 
   ReactDOM.render(
-    <Chart
+    <LineChart
+      margins= {margins}
       title={title}
+      data={chartData}
       width={width}
       height={height}
-      margins= {margins}
-      >
-      <LineChart
-        showXGrid= {false}
-        showYGrid= {false}
-        margins= {margins}
-        title={title}
-        data={chartData}
-        width={width}
-        height={height}
-        chartSeries={chartSeries}
-        x={x}
-      />
-    </Chart>
-  , document.getElementById('line-user')
+      chartSeries={chartSeries}
+      x={x}
+    />
+    , document.getElementById('line-user')
   )
 })()
 

diff --git a/intro/get_start/write_chart.md b/intro/get_start/write_chart.md
index 91f56c4..b6e3927 100644
--- a/intro/get_start/write_chart.md
+++ b/intro/get_start/write_chart.md
@@ -8,12 +8,20 @@ We need to require some library we need to use:
 ```js
 // first of course react!
 var React = require('react');
-// require `react-d3-core` for Chart component, which help us build a blank svg and chart title.
-var Chart = require('react-d3-core').Chart;
+// second, ReactDOM.
+var ReactDOM = require('react-dom');
 // require `react-d3-basic` for Line chart component.
 var LineChart = require('react-d3-basic').LineChart;
 ```
 
+Or if you're using ES6 modules:
+
+```js
+import React from 'react';
+import ReactDOM from 'react-dom';
+import {LineChart} from 'react-d3-basic';
+```
+
 ### Load
 
 Load your data using webpack
@@ -62,24 +70,17 @@ Render it in React!
 
 ```js
 ReactDOM.render(
-    
-      
-    
+  
   , document.getElementById('line-user')
-  )
+)
 ```
 
 ### Full code in your javascript
@@ -89,7 +90,6 @@ ReactDOM.render(
 
 var React = require('react');
 var ReactDOM = require('react-dom');
-var Chart = require('react-d3-core').Chart;
 var LineChart = require('react-d3-basic').LineChart;
 
 (function() {
@@ -117,25 +117,16 @@ var LineChart = require('react-d3-basic').LineChart;
     }
 
   ReactDOM.render(
-    
-      
-    
-  , document.getElementById('line-user')
+      chartSeries={chartSeries}
+      x={x}
+    />
+    , document.getElementById('line-user')
   )
 })()
 ```
diff --git a/package.json b/package.json
index ba13d4f..617e9a9 100644
--- a/package.json
+++ b/package.json
@@ -5,7 +5,10 @@
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "init": "npm install && git submodule init && git submodule update",
-    "sync": "git submodule foreach git pull origin master"
+    "sync": "git submodule foreach git pull origin master",
+    "start": "http-server",
+    "build-site": "canner-core build canner.js",
+    "build-docs": "make smashmd"
   },
   "repository": {
     "type": "git",
@@ -19,7 +22,10 @@
     "url": "https://github.com/react-d3/react-d3.github.io/issues"
   },
   "homepage": "https://github.com/react-d3/react-d3.github.io",
-  "dependencies": {
-  },
-  "devDependencies": {}
+  "dependencies": {},
+  "devDependencies": {
+    "canner-core": "^0.3.0",
+    "http-server": "^0.9.0",
+    "smash-md": "^0.1.2"
+  }
 }