react-d3 / react-d3.github.io Goto Github PK

View Code? Open in Web Editor NEW

30.0 30.0 17.0 13.97 MB

reactd3.org site

JavaScript 9.89% CSS 22.46% HTML 65.36% Makefile 2.29%

react-d3.github.io's People

Contributors

Stargazers

Watchers

Forkers

abdellah-neo mosutw zillow josephfinlayson rjokelai budde377 carnewal ahmednuaman borm burakince aggrolite ibrasho-forks davekeehn omiomi chenhang lazybensch nikolas

react-d3.github.io's Issues

on the front page of this site you have this code. Where is "Line" defined, core? basic? I cant seem to find anything related to this anywhere or any documentation related how to replicate something like this very first example on your site.


  <Chart
    width= {width}
    height= {height}
    data= {data}
    chartSeries= {chartSeries}
    x= {x}
    >
    // build line chart
    <Line
      chartSeries= {series1}
    />
    // build area chart
    <Area
      chartSeries= {series2}
    />
    <Xaxis/>
    <Yaxis/>
    <Xgrid/>
    <Ygrid/>
  </Chart>

Getting started gallery link is broken

http://www.reactd3.org/gallery does not resolve to the page.

Page titles

Hey!

I really appreciate the work you guys did for this and wanted to let you know that some of your pages titles haven't been fixed - both http://www.reactd3.org/docs/zoom/ and http://www.reactd3.org/docs/tooltip/ are still both titled 'react-d3-brush' and I'm assuming you'd like them to be react-d3-zoom and react-d3-tooltip respectively..

Is this website down?

Gallery URL in Get Started link broken

The gallery link at
https://github.com/react-d3/react-d3.github.io/blob/master/get_start/index.html#L218 points to /gallery instead of /components

Make it clearer on the website that React D3 is deprecated / no longer maintained

The note in the github description is not enough to ensure that developers do not inadvertently pick up this abandoned library. I was going to try and make a PR but I can't get this to build under OSX.

I suggest a clear banner across the top of all pages saying that this is no longer maintained.

For those that come after me I've found this useful: https://oli.me.uk/2015/09/09/d3-within-react-the-right-way/

Unpleasant color scheme for demos

While in no doubt the code is excellent, the selected color scheme in the demo is more than displeasing.
I would recommend taking the time to showcase better-looking examples.
Personally I will choose one package over another if its example page show nice, pretty, examples.

Previews are broken

In at least Chrome 44 on Mac, there are 4 errors being thrown stopping the previews from being rendered. They are all Uncaught TypeError: Object.assign is not a function for:

line_garbage.min.js
bar_group_brush.min.js
bar_stack_zoom.min.js
pie_tooltip.min.js

Just a heads up as it makes the library look less impressive ;)

Broken link

http://www.reactd3.org/get_start/

Pick one react-d3 you want to install (see gallery). Here we are going to demo using react-d3-basic library to draw a simple line chart.

The gallery link is broken, should go to http://www.reactd3.org/components/

Getting started using JSPM

Hi folks I wanted to share how you can go through your getting started using JSPM. Benefits include no manual config file and es6 out of the box.

Use the same data source.

Installation of jspm & dependencies:

npm init -y
npm install -D jspm
jspm init -y
jspm install [email protected] [email protected]  npm:react-d3-core npm:react-d3-basic json

HTML file: index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>React D3 getting started</title>
    <script src="jspm_packages/system.js" charset="utf-8"></script>
    <script src="config.js" charset="utf-8"></script>
    <script type="text/javascript">
      System.import('./main.js');
    </script>
  </head>
  <body>
    <div id="chart"></div>
  </body>
</html>

Javascript file: main.js

import chartData from './user_sample.json!';
import React from 'react';
import ReactDOM from 'react-dom';
import { LineChart } from 'react-d3-basic';
// loading chart data from json file using json-plugin
import chartData from './user_sample.json!';

const width = 700;
const height = 300;
const margins = { left: 100, right: 100, top: 50, bottom: 50 };
const title = 'User sample';
// chart series,
// field: is what field your data want to be selected
// name: the name of the field that display in legend
// color: what color is the line
const chartSeries = [
  {
    field: 'BMI',
    name: 'BMI',
    color: '#ff7f0e'
  }
];
// your x accessor
const x = (d) => d.index;

// Leaving out the Chart from the regular getting started because it didn't 
// nest the LineChart inside it properly and it didn't seem to be necessary. 
ReactDOM.render(
  <LineChart
    margins={margins}
    title={title}
    data={chartData}
    width={width}
    height={height}
    chartSeries={chartSeries}
    x={x}
  />
, document.getElementById('chart')
);

Now you can serve the folder in a web server and visit this index.html in a browser.

You can also easily create a useful npm start with a webserver and hot reloading by:

npm install -D serve chokidar-socket-emitter

Alter index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>React D3 getting started</title>
    <script src="../../jspm_packages/system.js" charset="utf-8"></script>
    <script src="../../config.js" charset="utf-8"></script>
    <script type="text/javascript">
      System.trace = true;
      System.import('systemjs-hot-reloader/default-listener.js');
      System.import('./index.js');
    </script>
  </head>
  <body>
    <div id="chart"></div>
  </body>
</html>

Add npm script:

  "scripts": {
    "start": "serve & chokidar-socket-emitter"
  },

Now you can run npm start and visit localhost:3000

remove d3 setting in setting webpack

Site content cannot be selected on smaller screens

The footer element is overlapping all of your content, so code snippets & links are not accessible.