First Pass Radial Line Chart

index.js

import React, { useState, useCallback, useEffect } from 'react';

import ReactDOM from 'react-dom';

import { csv, scaleSqrt, scaleTime, max, timeFormat, extent } from 'd3';

import { useData } from './useData';

import { Marks } from './Marks';

const width = 960;

const height = 500;

const margin = { top: height / 2, right: 30, bottom: 65, left: width / 2 };

const xAxisLabelOffset = 50;

const yAxisLabelOffset = 45;

const App = () => {

const data = useData();

if (!data) {

return <pre>Loading...</pre>;

}

console.log(data[0])

const innerHeight = height - margin.top - margin.bottom;

const innerWidth = width - margin.left - margin.right;

const xValue = d => d.DATE;

const xAxisLabel = 'DATE';

const yValue = d => d.DEP_MEAN;

const yAxisLabel = 'Avg_Delay(mins)';

const xAxisTickFormat = timeFormat('%d %b');

const angleScale = scaleTime()

.domain(extent(data, xValue))

.range([0, Math.PI * 2]);

const minRadius = innerHeight * 0.5;

Last edited Jul 19, 2020

Created on Oct 18, 2019

Modified with the first steps towards a proper radial line chart visualization. Next steps would include:

Choosing a range for the angle scale that represents some periodic amount of time, like years, months, or weeks.
Adding axes (tick marks and labels) for angle and radius

MIT Licensed