🌍 Public
D3-React-JSX-ES6 DOM Structure
This example demonstrates a smiling face constructed with React components and D3, rendered as SVG. It shows how React manages the DOM structure while D3 generates the mouth path using the `arc` generator from `d3-shape`. The face includes a background circle, two eyes, and a curved mouth, all positioned via SVG group transforms. The code uses React 16.9, ReactDOM, and D3 v6, with components like `BackgroundCircle` receiving props for radius and stroke width. ES6 features such as destructuring, arrow functions, and template literals appear throughout.
AI-generated descriptionD3-React-JSX-ES6 DOM Structure
Steps to Complete
- 01- Datavis 2020 Episode 6 - Let's Make a Face Part II (React)
- 01.a- Getting started with React
- 01.b- What is UNPKG, NPM, CDN
- 01.c- Why use a module bundler? What is Rollup?
- 01.d- Importing libraries using ES6 module syntax
- 02- Datavis 2020 Episode 7 - Let's Make a Face Part III (React & D3)
- 02.a- Getting started with D3 library
- 02.b- Using
arcfromd3-shapepackage - 02.c- SVG Path elements
- 02.d- SVG group elements and the
transformattribute - 02.e- Using ES6 template literals
- 02.f- Adding a mouth to our face
- 03- Datavis 2020 Episode 8 - Let's Make a Face Part IV (React Components & ES6)
- 03.a- React components
- 03.b- React props
- 03.c- JSX transpilation
- 03.d- ES6 Background
- 03.e- ES5 functions vs ES6 Arrow functions
- 03.f- Variables: ES5
varvs ES6letandconst - 03.g- ES6 Destructuring
- 04- Datavis 2020 Episode 9 - Let's Make a Face Part V multiple files with ES6 modules
- 04.a- Refactoring react components
- 04.b- Using many files with ES6 modules
- 04.c- Named exports vs defaulot exports
- 04.d- Using react fragments
- 04.e- Composing the face from components
BackgroundCircle,EyesandMouth
MIT Licensed
Comments
Sign in to join the discussion.