Skip to main content
SimilarExport ZIP
100%

Working with Time

✓ Published0🌍 Public
Aanduskong
Last edited Dec 17, 2020
Created on Dec 17, 2020
Forked from Working with Time

This scatter plot visualizes COVID-19 data, showing the daily increase in positive cases (y-axis) against time (x-axis) as a series of circular marks. The visualization uses React to render SVG elements, with D3 v5 scales including `scaleTime` and `scaleLinear` to map data to coordinates. The code employs `d3.csv` for data loading from a GitHub-hosted CSV file, with custom `AxisBottom` and `AxisLeft` components generating tick marks and labels. Each circle includes a native SVG `<title>` element for tooltips displaying formatted dates, and the chart is styled with the Poppins font.

AI-generated description

A scatter plot of Data Canvas Sense Your City Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Stylized Line Chart

This stylized line chart visualizes daily new positive COVID-19 cases over time using data from the Data Canvas Sense Your City Dataset. The React application, rendered as SVG, uses d3.scaleTime and d3.scaleLinear to map dates and case counts, with d3.line and curveNatural creating the smooth connection between points. Axis components generate ticks and labels, while the Poppins font and muted teal color scheme give the chart its distinctive aesthetic. The chart fetches its CSV data from a GitHub-hosted file, demonstrating a clean, minimal approach to temporal data visualization.

Aanduskong
85% match
Loading thumbnail…

COVID-19 Forecast

This scatter plot visualizes COVID-19 infection counts over time, with the x-axis representing dates and the y-axis showing the number of infected individuals. The visualization uses D3 v5’s `scaleTime` and `scaleLinear` for axes, along with `axisBottom` and `axisLeft` to render ticks. Circles mark each data point, colored steelblue, while axis labels and a title are added via SVG text elements. Data is loaded as CSV from a GitHub repository and parsed with JavaScript’s `Date` and numeric conversion.

Ccacho2294
84% match
Loading thumbnail…

Scatter Plot 2

A scatter plot displays the relationship between confirmed and active COVID-19 cases, with each circle representing a data point. The visualization uses React components to render SVG elements, with d3.scaleLinear managing the x and y scales. Axes are generated from array methods like xScale.ticks() and map(), while the data loads through d3.csv with multiplication applied to numeric values. The chart includes axis labels and tooltips showing formatted values using d3.format with SI notation.

NNikithakatta30
83% match
Loading thumbnail…

Working with Time

This scatter plot displays temperature readings over the course of a week, with time on the x-axis and temperature on the y-axis. Built with React and D3 v5, it uses `scaleTime` and `scaleLinear` to map the data, with `extent` and `max` computing the domains. The visualization renders as an SVG, with custom axis components and circular marks that include tooltips via SVG `<title>` elements. Data comes from the Data Canvas Sense Your City dataset, loaded as CSV through `d3.csv`.

Jjerate11
82% match
Loading thumbnail…

Working with Time

This example shows a scatter plot of one week of temperature data from a CSV file hosted in a GitHub gist, with time on the x-axis and temperature in degrees on the y-axis. The visualization uses React components to render SVG circles, with d3.scaleTime and d3.scaleLinear for scales, d3.timeFormat for weekday tick labels, and d3.extent for domain calculation. Axes are custom-built using React, and each data point includes a title for hover-based tooltips. Data loading is handled asynchronously via d3.csv within a custom useEffect hook.

RRudy Shayganfar
82% match
Loading thumbnail…

Working With Time

This interactive scatterplot visualizes San Francisco’s temperature readings over one week, with time on the x-axis and temperature on the y-axis. Using D3 v5 scales (`scaleTime` and `scaleLinear`) and React, the chart renders SVG circles for each data point via the `Marks` component, while `AxisBottom` and `AxisLeft` generate tick marks and labels. The data comes from a CSV file loaded asynchronously with `d3.csv`, and hovering over a circle shows its exact time via a native SVG `<title>` tooltip.

Aaakarsh satyam
82% match
Loading thumbnail…

Stylized Line Chart

A stylized line chart visualizes the growth of COVID-19 cases over time, using data from the Data Canvas Sense Your City Dataset. The chart plots dates on the x-axis and cumulative case counts on the y-axis, with a smooth, naturally curved line connecting the data points. Built with React and rendered as SVG, it uses D3’s `scaleTime`, `scaleLinear`, and `line` with `curveNatural` to generate the path. The visualization includes custom axis components and styling via CSS, with tooltips on points commented out in the Marks component.

PProger666
82% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot NY Times COVID Data US Cumulative

A scatter plot displays cumulative COVID-19 cases in the United States over time, with each point representing a daily data record. The visualization uses D3.js 6.7.0, specifically the `scaleTime`, `scaleLinear`, `axisLeft`, and `axisBottom` functions from D3's API to map dates to the x-axis and case counts to the y-axis. It loads data from the NY Times COVID-19 rolling averages dataset via `d3.csv`. The chart renders as an SVG, populating circular marks with a radius of one pixel, and includes axes labeled with a custom Share Tech font.

DDasbach.EJ
82% match