search

ychi / fire-elect

1 stars 3 forks source link

Study: D3 in React #5

Open ychi opened 4 years ago

ychi commented 4 years ago

Try different options, ex: https://github.com/react-d3-library/react-d3-library (no longer maintained) https://www.npmjs.com/package/react-d3-graph https://github.com/uber/react-vis

And then we can have a better idea how to build interactive chart

kaichehung commented 4 years ago

this could be an option

https://observablehq.com/@observablehq/how-to-embed-a-notebook-in-a-react-app

ychi commented 4 years ago

Really cool! We can develop interactive charts in Observable and embed them into react

ychi commented 4 years ago

Tried to add a notebook to react app, kept seeing the following error even if I added @babel/plugin-syntax-import-meta: ./node_modules/@observablehq/downloading-and-embedding-notebooks/c2a04e7b9a9d03bb@1061.js SyntaxError: ~/pretty-animation/node_modules/@observablehq/downloading-and-embedding-notebooks/c2a04e7b9a9d03bb@1061.js: Support for the experimental syntax 'importMeta' isn't currently enabled (4:206): ... Add @babel/plugin-syntax-import-meta (https://git.io/vbKK6) to the 'plugins' section of your Babel config to enable parsing.

What I tried: 1) adding a babel property into package.json: "babel": { "plugins": [ "@babel/plugin-syntax-import-meta" ] },

2) using react-app-rewired: (https://medium.com/manato/introduce-babel-new-plugins-to-create-react-app-ea55f56c3811) And putting this in .babelrc "plugins": [ "@babel/plugin-syntax-import-meta" ]

When I intentionally misspell the plugin name, the complain becomes Error: Cannot find module 'babel-plugin-plugin-syntax-import-meta'

Current suspicion is it has to do with babel 7 (https://babeljs.io/docs/en/config-files#6x-vs-7x-babelrc-loading). The blog post over in observable was back in May 2018, while babel 7 was released in August 2018.

hawknguyen189 commented 4 years ago

have the same problem when trying to embed a notebook into react