abhishekGNS

@abhishekGNS·3 public vizzes

Fork of Working with Time

This visualization displays temperature over time as a scatter plot, with each circle representing a timestamped measurement. The React application uses the d3.scaleTime and d3.scaleLinear APIs to map data to SVG coordinates, and d3.extent to compute domain ranges from the dataset. Data is loaded asynchronously from a gist URL using the d3.csv parser. The SVG rendering includes custom axis components that rotate bottom tick labels for readability, and each data point includes a tooltip displaying the formatted date. The visualization uses the D3 v5 library and React 16.9 for its component-based architecture.

Aug 1, 2022

Loading thumbnail…

Fork of Working with Time

This visualization shows how temperature in San Francisco varies over a week, with time plotted on the x-axis and temperature on the y-axis. The scatter plot uses a circle for each hourly measurement, with a hover tooltip displaying the day of the week. Built with React and D3 v5, it loads data from a CSV file, uses `scaleTime` and `scaleLinear` to map the data, and renders axes and marks as SVG elements.

Aug 1, 2022

Loading thumbnail…

Fork of COVID-19 Deaths in US (NYT data) Reusable D3 Scatter Plot Framework

A scatter plot visualizes the rolling seven-day average of COVID-19 deaths across the United States over time, using data from the New York Times. The chart renders an SVG with small circles, a time-scale x-axis formatted by month and year, and a linear y-axis. It is built as a reusable chart function following the Towards Reusable Charts pattern, using D3 v6 APIs like `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft`. Labels annotate the title, y-axis, and a vaccination milestone, with the source cited in the margin.

Jul 31, 2022