import { arc, line, csv, scaleLinear, max, min } from 'd3'; import React, { useState } from 'react'; import ReactDOM from 'react-dom'; const csvUrl = "https://gist.githubusercontent.com/ilovedc74/559615eb3f3c708ed5ad490928a5822e/raw/countryRulingPartyTimeline.csv" // const getData = async (url) => { // const response = await fetch(url); // return await response.text(); // } // getData(csvUrl).then(text => { // const data = d3.csvParse(text) // // try to parse date later // // console.log(max(data)) // // const parseTime = d3.timeParse('%Y') // // const newDates = parseTime(data.yearStart) // // console.log(data, d=>d.yearStart) // const xScale = scaleLinear() // .domain([min(data, d=>d.yearStart), max(data, d=>d.yearEnd)]) // .range([0, width]) // console.log(xScale.domain()) // console.log(xScale.range()); // }); // const height = 500; // const line1Height = height/3*2; // const line2Height = height/3; // const width = 960; // //TODO - to draw the arc, fill the info you need. // //translate the values to points on the line // const getPoints = () => { // } // //find center point of the circle. write a function // const getCenter = () => { // } // //calculate the radius // const getRadius = () => { // } // //draw arc // const timeArc = arc() // .innerRadius(0) // .outerRadius(50) // .startAngle(-Math.PI /2) // .endAngle(Math.PI/2); const App = () => ( const [data, setData] = useState(null); csv(csvUrl).then(data => { console.log('fetching') setData(data)); }; return

data is { data ? loading : loaded }

// ); const rootElement = document.getElementById("root"); ReactDOM.render( , rootElement ); // const rootElement = document.getElementById('root'); // ReactDOM.render(, rootElement);

Arcs and Lines practice

Whitney Hung