index.html

<html><head>
    <meta charset="utf-8">
    <title>A Javascript Library For Building Composable And Declarative Charts | React-D3</title>
    <meta name="description" content="A Javascript Library For Building Composable And Declarative Charts | React-d3">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="apple-touch-icon" sizes="57x57" href="/favicon/apple-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="60x60" href="/favicon/apple-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="72x72" href="/favicon/apple-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="/favicon/apple-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="114x114" href="/favicon/apple-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="/favicon/apple-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="/favicon/apple-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="/favicon/apple-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-icon-180x180.png">
    <link rel="icon" type="image/png" sizes="192x192" href="/favicon/android-icon-192x192.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="96x96" href="/favicon/favicon-96x96.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">
    <link rel="manifest" href="/favicon/manifest.json">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="msapplication-TileImage" content="/favicon/ms-icon-144x144.png">
    <meta name="theme-color" content="#ffffff">

    <!-- Google fonts - which you want to use - (rest you can just remove) -->
    <link href="http://fonts.googleapis.com/css?family=Open+Sans:300,300italic,400,400italic,600,600italic,700,700italic,800,800italic" rel="stylesheet" type="text/css">
    <link href="http://fonts.googleapis.com/css?family=Raleway:100,200,300,400,500,600,700,800,900" rel="stylesheet" type="text/css">
    <link href="http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic" rel="stylesheet" type="text/css">

    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/animate.css">
    <link rel="stylesheet" href="/css/prettyPhoto.css">
    <link rel="stylesheet" href="/css/owl.carousel.css">
    <link rel="stylesheet" href="/css/main.css">
    <link rel="stylesheet" href="/css/responsive.css">
    <link rel="stylesheet" href="/css/github-markdown.css">
    <link rel="stylesheet" href="/css/prism.css">
    <style>
        .markdown-body {
            min-width: 200px;
            max-width: 850px;
            margin: 0 auto;
            padding: 30px;
        }

        .legend {
          height: 30px !important;
        }

        #area-stack .x.axis text{
          transform: rotate(45deg);
          text-anchor: start !important;
        }
    </style>
    <script src="js/vendor/modernizr-2.6.2.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.2/react.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
    <script src="https://cdn.jsdelivr.net/react/0.14.0/react-dom.js"></script>
</head>

<body id="top">
    <header>
        <!-- NAVIGATION -->
        <nav class="navbar navbar-default navbar-fixed-top">
            <div class="container">
                <!-- Brand and toggle get grouped for better mobile display -->
                <div class="navbar-header page-scroll">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>

                    <!-- LOGO -->
                    <a class="navbar-brand page-scroll" href="#page-top">
                        <img src="/img/react-d3_2.png" alt="" style="width:130px">
                    </a>
                    <!-- END LOGO -->

                </div>

                <!-- TOGGLE NAV -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav navbar-left">
                        <li class="hidden">
                          <a href="#page-top"></a>
                        </li>
                        <li>
                          <a href="/get_start">Get Started</a>
                        </li>
                        <li>
                          <a href="/docs">Docs</a>
                        </li>
                        <li>
                          <a href="/components">Gallery</a>
                        </li>
                      </ul>
                    <ul class="nav navbar-nav navbar-right">
                        <li>
                          <a href="http://map.reactd3.org">React-d3-map</a>
                        </li>
                        <li>
                          <a href="http://github.com/react-d3">Github</a>
                        </li>
                    </ul>
                </div>
                <!-- TOGGLE NAV -->

            </div>
            <!-- /.container -->
        </nav>
        <!-- END NAVIGATION -->
    </header>

    <!-- HOME -->
    <div id="home-area">
        <div class="overlay">
            <div class="container">
                <div class="row">
                    <!-- HOME CONTENT -->
                      <div class="home-content wow fadeInLeft" data-wow-duration="1s" data-wow-delay="0s">
                          <h1>A Javascript library for building composable and declarative charts</h1>
                          <p>A new solution for building reusable components for interactive charts</p>
                      </div>
                    <!-- END HOME CONTENT -->

                    <!-- HOME FEATURE IMAGE -->
                    <div class="col-md-10 col-sm-10 col-xs-12">
                      <div class="home-feature pull-right center-block wow bounceIn" data-wow-duration="1s" data-wow-delay="1s">
                        <a href="/get_start">
                          <button type="button" class="btn btn-danger btn-lg">Get Started</button>
                        </a>
                      </div>
                    </div>
                    <!-- END HOME FEATURE IMAGE -->

                </div>
            </div>
        </div>
    </div>
    <!-- END HOME -->

    <!-- SERVICES -->
        <a name="0"></a>
        <section id="services" class="section text-center">
            <div class="container">
                <h2 class="section-title wow fadeIn">Features</h2>
                <div class="row text-left wow fadeInRight" data-wow-duration="1s" data-wow-delay=".3s">
                      <div class="col-md-4 col-sm-6">
                          <div class="single-service text-left wow fadeInRight" data-wow-duration="1s" data-wow-delay=".3s">
                              <div class="row" style="margin-bottom:20px">
                                  <div class="col-md-12">
                                      <div class="service-content">
                                          <h3><span class="glyphicon glyphicon-stats"></span>  High-Level Charts</h3>
                                          <p><code>React-d3</code> support high level components which you can install and create a line chart, bar chart, pie chart... etc, within a component.</p>
                                      </div>
                                  </div>
                              </div>
                          </div>
                      </div>
                      <div class="col-md-4 col-sm-6">
                          <div class="single-service text-left wow fadeInRight" data-wow-duration="1s" data-wow-delay=".3s">
                              <div class="row" style="margin-bottom:20px">
                                  <div class="col-md-12">
                                      <div class="service-content">
                                          <h3><span class="glyphicon glyphicon-refresh"></span>  Flexible &amp; Reusable Components</h3>
                                          <p><code>React-d3</code> is a highly module library. You can build new d3 charts using <code>React-d3</code> to create axis using <code>xaxis</code> component,  <code>yaxis</code> component, label using <code>label</code> component, legend <code>legend</code> component... etc, in other word, it extends the flexibility of <code>d3</code> library so you can assemble a whole new chart using core components.</p>
                                      </div>
                                  </div>
                              </div>
                          </div>
                      </div>
                      <div class="col-md-4 col-sm-6">
                          <div class="single-service text-left wow fadeInRight" data-wow-duration="1s" data-wow-delay=".3s">
                              <div class="row" style="margin-bottom:20px">
                                  <div class="col-md-12">
                                      <div class="service-content">
                                          <h3><span class="glyphicon glyphicon-retweet"></span>  Clear Data Flow, and Better Structures</h3>
                                          <p><code>React-d3</code> combine the power of <code>d3</code> flexibility and the data flow, structures, components, virtual DOM, and others benefits that <code>react.js</code> provide.</p>
                                      </div>
                                  </div>
                              </div>
                          </div>
                      </div>
                </div>

          </div>
          <!--/.container -->
          <!-- END SERVICES -->
        </section>
        <a name="1"></a>
        <section id="services" class="section text-center">
            <div class="container">
                <h2 class="section-title wow fadeIn">Basic Charts</h2>
                <div class="row text-left wow fadeInRight" data-wow-duration="1s" data-wow-delay=".3s">
                      <div class="home-md">
                          <div class="single-service text-left wow fadeInRight" data-wow-duration="1s" data-wow-delay=".3s">
                              <h3 id="building-a-simple-line-chart">Building a simple line chart</h3>
<p><code>React-d3</code> is a highly modular chart library, you can create your d3 charts such as line chart or bar chart within a simple component. Besides, you can easily set different props of chart component to rendering various chart you want.</p>
<div id="line-garbage" class="demo home-right"></div>

<!--!!import '../../react-d3-example/simple/line/line_garbage.js';-->
<h4 id="data-csv-table">Data - CSV Table</h4>
<pre><code class="lang-js">month,total,incineration,garbageBury,largeGarbageRecycle,foodWaste,recycle,other,average
2001M01,770095,295355,339023,0,0,75630,60087,1.124
2001M02,629350,248283,256351,0,0,74732,49983,1.016
2001M03,663170,271344,264674,0,0,77137,50015,0.966
...
...
...
</code></pre>
<p><br></p>
<p>We provide low level api for you to assemble your own chart.</p>
<pre><code class="lang-js">ReactDOM.render(
  &lt;Chart
    width= {width}
    height= {height}
    data= {data}
    chartSeries= {chartSeries}
    x= {x}
    &gt;
    // build line chart
    &lt;Line
      chartSeries= {series1}
    /&gt;
    // build area chart
    &lt;Area
      chartSeries= {series2}
    /&gt;
    &lt;Xaxis/&gt;
    &lt;Yaxis/&gt;
    &lt;Xgrid/&gt;
    &lt;Ygrid/&gt;
  &lt;/Chart&gt;
, document.getElementById('line-garbage')
)
</code></pre>
<p><br></p>
<p>We also provide high level chart api.</p>
<pre><code class="lang-js">ReactDOM.render(
  &lt;Chart
    title={"Taiwan refuse disposal"}
    width={500}
    height={300}
    margins= {margins}
    &gt;
    &lt;LineChart
      margins= {margins}
      title={"Taiwan refuse disposal"}
      data={data}
      width={500}
      height={300}
      chartSeries={chartSeries}
      x={x}
      xScale={"time"}
    /&gt;
  &lt;/Chart&gt;
, document.getElementById('line-garbage')
)
</code></pre>
<script src="/react-d3-example/dist/simple/min/line_garbage.min.js"></script>

<hr>

                          </div>
                      </div>
                      <div class="home-md">
                          <div class="single-service text-left wow fadeInRight" data-wow-duration="1s" data-wow-delay=".3s">
                              <h3 id="building-bar-group-chart-with-brush">Building bar group chart with brush</h3>
<p><code>React-d3-brush</code> support charts with brush! We support all kinds of common charts such as line chart, bar chart, bar group chart... etc.</p>
<p></p><div id="data_brush_bar_group" class="demo home-right"></div><p></p>
<script src="/react-d3-example/dist/simple/min/bar_group_brush.min.js"></script>

<!--!!import '../../react-d3-example/simple/bar_group_brush/bar_group_brush.js';-->
<pre><code class="lang-js">ReactDOM.render(
  &lt;BarGroupBrush
    title= {"Bar Group Chart With Brush"}
    data= {data}
    width= {500}
    height= {300}
    chartSeries = {chartSeries}
    x= {x}
    xScale= {xScale}
    yTickFormat= {yTickFormat}
    brushHeight= {100}
  /&gt;
, document.getElementById('data_brush_bar_group')
)
</code></pre>

                          </div>
                      </div>
                      <div class="home-md">
                          <div class="single-service text-left wow fadeInRight" data-wow-duration="1s" data-wow-delay=".3s">
                              <h3 id="building-bar-stack-with-zoom">Building bar stack with zoom</h3>
<p><code>React-d3-zoom</code> support charts with zoom! We support all kinds of common charts such as line chart, bar chart, bar group chart... etc.</p>
<p></p><div id="data_zoom_bar_stack" class="demo home-right"></div><p></p>
<script src="/react-d3-example/dist/simple/min/bar_stack_zoom.min.js"></script>

<!--!!import '../../react-d3-example/simple/bar_stack_zoom/bar_stack_zoom.js';-->
<pre><code class="lang-js">ReactDOM.render(
  &lt;BarStackZoom
    title= {"Bar Stack Chart With Zoom"}
    data= {data}
    width= {500}
    height= {400}
    chartSeries = {chartSeries}
    x= {x}
    xScale= {"ordinal"}
    yTickFormat= {yTickFormat}
  /&gt;
, document.getElementById('data_zoom_bar_stack')
)
</code></pre>

                          </div>
                      </div>
                      <div class="home-md">
                          <div class="single-service text-left wow fadeInRight" data-wow-duration="1s" data-wow-delay=".3s">
                              <h3 id="building-pie-chart-with-tooltip">Building pie chart with tooltip</h3>
<p><code>React-d3-tooltip</code> support charts with tooltip! We support all kinds of common charts such as line chart, bar chart, bar group chart... etc.</p>
<p></p><div id="data_tooltip_pie" class="demo home-right"></div><p></p>
<script src="/react-d3-example/dist/simple/min/pie_tooltip.min.js"></script>

<!--!!import '../../react-d3-example/simple/pie_tooltip/pie_tooltip.js';-->
<pre><code class="lang-js">ReactDOM.render(
  &lt;PieTooltip
    title= {title}
    data= {generalChartData}
    width= {width}
    height= {height}
    chartSeries= {chartSeries}
    value = {value}
    name = {name}
  /&gt;
, document.getElementById('data_tooltip_pie')
)
</code></pre>

                          </div>
                      </div>
                </div>
                <!--.row-->
                <a href="/get_start">
                  <button type="button" class="btn btn-danger btn-lg">Get Started</button>
                </a>

          </div>
          <!--/.container -->
          <!-- END SERVICES -->
        </section>

    <!-- FOOTER -->
    <footer>
        <div class="container">
            <div class="row">

                <!-- FOOTER MENU -->
                <div class="col-md-6">
                </div>
                <!-- END FOOTER MENU -->

                <!-- FOOTER CONTENT -->
                <div class="col-md-6">
                    <div class="footer-content text-right">
                        <p>© 2015 License Apache2.0, <a href="/">React-d3</a>
                        </p>
                    </div>
                </div>
                <!-- END FOOTER CONTENT -->

            </div>
            <!-- /.row -->
        </div>
        <!-- ./container -->
    </footer>
    <!-- js files -->
    <script src="/js/vendor/jquery-1.10.2.min.js"></script>
    <script src="/js/plugins.js"></script>
    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/wow.min.js"></script>
    <script src="/js/prettyPhoto.js"></script>
    <script src="/js/owl.carousel.min.js"></script>
    <script src="/js/main.js"></script>
    <script src="/js/prism.js"></script>
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
      ga('create', 'UA-67901975-1', 'auto');
      ga('send', 'pageview');
    </script>

</body></html>