import React, { useState, useCallback, useEffect, } from 'react'; import ReactDOM from 'react-dom'; import { csv, scaleLinear, max, timeFormat, format, extent, scaleTime } from 'd3'; import {useData} from './useData'; import {AxisBottom} from './AxisBottom'; import {AxisLeft} from './AxisLeft'; import {Marks} from './Marks'; const width = 960; const height = 500; const margin = { top: 50, right: 50, bottom: 80, left: 100, }; const xAxisLabelOffset=50; const yAxisLabelOffset=40; const App = () => { const data= useData(); if (!data) { return

{'Loading...  '}

; } let refinedData=[]; data.forEach(d=>{ if (refinedData[d.MoveDate]){ refinedData[d.MoveDate].MoveIn+=d.MoveIn; refinedData[d.MoveDate].MoveOut+=d.MoveOut; refinedData[d.MoveDate].Transfer+=d.Transfer; } else{ refinedData[d.MoveDate]={"MoveIn": d.MoveIn, "MoveOut":d.MoveOut, "Transfer":d.Transfer}; } }) console.log(refinedData); const testing=Object.values(data); console.log(testing); const innerHeight = height - margin.top - margin.bottom; const innerWidth = width - margin.left - margin.right; const xValue= d => d.MoveOut; const xAxisLabel='Day Of the Week'; const yValue= d => d.MoveIn; const yAxisLabel='MoveIns'; const siFormat=format('.2s'); const xAxisTickFormat=tickValue=>siFormat(tickValue).replace('G','B'); const xScale = scaleLinear() .domain(extent(refinedData,xValue)) .range([0, innerWidth]) .nice(); const yScale = scaleLinear() .domain(extent(refinedData,yValue)) .range([innerHeight,0]) .nice(); console.log(xScale.ticks()); return ( ); }; const rootElement = document.getElementById('root'); ReactDOM.render(, rootElement);

Fork of Fork of Refactored Bar Chart

Patrick Feldman