Added circles and a line svg elements using D3 to control the DOM

Author: Mousavi Jalali

package.json

@@ -6,6 +6,7 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "d3": "^5.16.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-scripts": "3.4.1"

src/App.css

@@ -1,38 +1,3 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+svg {
+  background: #eee;
 }

src/App.js

@@ -1,26 +1,38 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import React, { useRef, useEffect, useState, Fragment } from 'react'
+import './App.css'
+
+import Circles from './components/Circles'
+import Line from './components/Line'
+
+
 
 function App() {
+
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
+    <Fragment>
+        {/* <Circles/> */}
+      <Line/>
+    </Fragment>
+  )
 }
 
-export default App;
+export default App
+
+
+
+
+// In pure React, to draw a connected line is svg, can use the line element or the path element
+//path element is more powerful and takes the attribute d, which defines how your path is drawn, where it starts and ends etc:
+//e.g. if you want it to start at 0 and go to 150, then 100 to 100, then 150,120
+
+// function App() {
+//   return(
+//     <React.Fragment>
+//       <svg>
+//         <path d='M0,150 100,100 150,120' stoke='blue' fill='none' />
+//       </svg>
+//     </React.Fragment>
+//   )
+// }
+
+

src/App.test.js

@@ -0,0 +1,34 @@
+import React, { useRef, useEffect, useState, Fragment } from 'react'
+import { select } from 'd3'
+
+
+
+function Circles() {
+
+  const [data, setData] = useState([25, 30, 45, 60, 20])
+
+  const svgRef = useRef()
+  useEffect(() => {
+    const svg = select(svgRef.current)
+    svg
+      .selectAll('circle')
+      .data(data)
+      .join('circle')
+      .attr('r', value => value)
+      .attr('cx', value => value * 2 )
+      .attr('cy', value => value * 2 )
+      .attr('stroke', 'red')
+  }, [data])
+
+  return (
+      <Fragment>
+          <svg ref={svgRef}></svg>
+          <br />
+          <button onClick={() => setData(data.map(value => value + 5))}>Update Data</button>
+          <button onClick={() => setData(data.filter(value => value < 35 ))}>filter Data</button>
+      </Fragment>
+  )
+
+}
+
+export default Circles

src/components/Circles.jsx

@@ -0,0 +1,55 @@
+import React, { useEffect, useRef, Fragment, useState } from 'react'
+import { select, line, curveCardinal } from 'd3'
+
+
+const Line = () => {
+
+    const [data, setData] = useState([25, 30, 45, 60, 20, 65, 75])
+    const svgRef = useRef()
+
+    useEffect(() => {
+        const svg = select(svgRef.current)
+        const myLine = line()
+            .x((value, index) => index * 50 )
+            .y((value => 150 - value))
+            .curve(curveCardinal)
+
+        svg
+            .selectAll('path')
+            .data([data])
+            .join('path')
+            .attr('d', value => myLine(value))
+            .attr('fill', 'none')
+            .attr('stroke', 'blue')
+    }, [data])
+
+    return (
+        <Fragment>
+            <svg ref={svgRef}></svg>
+            <br />
+          <button onClick={() => setData(data.map(value => value + 5))}>Update Data</button>
+          <button onClick={() => setData(data.filter(value => value < 35 ))}>filter Data</button>
+        </Fragment>
+    )
+}
+
+export default Line
+
+
+
+// In pure React, to draw a connected line is svg, can use the line element or the path element
+// path element is more powerful and takes the attribute d, which defines how your path is drawn, where it starts and ends etc so you give it data points. Each data point has an x and a y value thus the line is drawn accordingly: 
+// e.g. first data point 0,150 
+// Second data point is at 100,100
+// Third data point is at 150,20:
+
+// function App() {
+//   return(
+//     <React.Fragment>
+//       <svg>
+//         <path d='M0,150 100,100 150,120' stoke='blue' fill='none' />
+//       </svg>
+//     </React.Fragment>
+//   )
+// }
+

src/components/Line.jsx

@@ -1,17 +1,13 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import './index.css';
-import App from './App';
-import * as serviceWorker from './serviceWorker';
+import React from 'react'
+import { render } from 'react-dom'
+import App from './App'
 
-ReactDOM.render(
+
+render(
   <React.StrictMode>
     <App />
   </React.StrictMode>,
   document.getElementById('root')
-);
+)
+
 
-// If you want your app to work offline and load faster, you can change
-// unregister() to register() below. Note this comes with some pitfalls.
-// Learn more about service workers: https://bit.ly/CRA-PWA
-serviceWorker.unregister();