O2 Monitor Chart

100%

O2 Monitor Chart

✓ Published0🌍 Public

Last edited Feb 22, 2023

Created on Feb 21, 2023

This chart plots oxygen level over time, filtering out zero values from a CSV dataset inspired by the Data Canvas Sense Your City project. It renders as an SVG line chart using React components and D3 v5’s `scaleLinear`, `scaleTime`, and `line` with `curveNatural`. Custom axis components generate ticks and labels, while the y-axis is fixed from 0 to 100. Data loading and parsing are handled by `useData` with D3’s `csv` function, converting time strings to Date objects and oxygen levels to numbers.

AI-generated description

A scatter plot of Data Canvas Sense Your City Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Line Chart

This line chart visualizes temperature changes over time using a dataset of Oceania COVID-19 reports. The chart employs smooth, natural curves to connect data points across a time-series axis. Built with React and D3 v5, it renders as an SVG, with the `line()` and `curveNatural()` functions from D3 generating the path. Axes are constructed using `scaleTime()` and `scaleLinear()`, with tick labels formatted via `timeFormat()`. The dataset is loaded asynchronously from a CSV file using D3’s `csv()` function.

SSonuSriN

75% match

Loading thumbnail…

Emma's O2 Data Viz

This visualization displays oxygen monitoring data over time as a scatterplot with a time-scaled x-axis. The code uses D3 v7 to load CSV data from a GitHub gist, then creates an SVG chart with `d3.scaleTime` and `d3.extent` to determine the temporal domain. An axis is rendered using `d3.axisBottom` positioned at the bottom of a 500x400 pixel SVG. The example focuses on the basic setup for importing D3 modules and processing time-series data, though it currently plots only the axis without visible data points.

EEmma Schaale

75% match

Loading thumbnail…

Stylized Line Chart

This stylized line chart visualizes temperature measurements over time from the Data Canvas Sense Your City dataset. The data is rendered as a smooth, natural curve using D3’s `line` and `curveNatural` functions, displayed as a thick teal path within an SVG. Axes are labeled “Time” and “Temperature”, with ticks styled in muted grays and a Poppins font applied throughout. The React application loads CSV data via `d3.csv`, maps timestamps and temperatures, and uses `scaleTime` and `scaleLinear` with `extent` and `nice` to set domains and ranges.

Rreo440

73% match

Loading thumbnail…

Stylized Line Chart

This stylized line chart visualizes temperature readings over time from the Data Canvas Sense Your City dataset. A smooth, natural curve connects the data points, rendered as an SVG path using D3’s `line` and `curveNatural` generators, with teal strokes and circular marks (commented out) available for point emphasis. The chart uses `scaleTime` and `scaleLinear` axes, with tick marks and labels generated by custom React components `AxisBottom` and `AxisLeft`. The React app loads CSV data via the `csv` function from d3.v5.

Bblkhar

72% match

Loading thumbnail…

Fork of Line Chart

This fork of a line chart visualizes the decline in ozone-depleting substance emissions from 1960 to 2014. The data, loaded via `csv` from a GitHub gist, is rendered as a smooth curve using D3’s `line` generator with `curveBasis`. Scales are set with `scaleLinear` for both axes, while `axisLeft` and `axisBottom` add labeled ticks with gridlines. The React-based example uses SVG output, styling the maroon path with a thick stroke via CSS.

SSquad-UNT

72% match

Loading thumbnail…

109550187_HW7

This interactive visualization shows air pollution levels across multiple monitoring stations, displaying daily average concentrations for six pollutants (SO2, NO2, O3, CO, PM10, PM2.5) as a series of stacked horizon charts. Users select a year and band number via dropdown menus, which updates React state and triggers D3 to re-render the SVG. The code uses `d3.csv` to load air pollution data from a remote server, `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.mean` to aggregate hourly measurements into daily averages. Each pollutant uses a distinct color scheme, with bands overlaid to encode magnitude.

Ppatricknicholas27@gmail.com

72% match

Loading thumbnail…

Linechart

This line chart visualizes weekly temperature measurements from the Data Canvas Sense Your City Dataset, plotting timestamps along the x-axis and temperature values along the y-axis. The SVG rendering uses React components, with d3.scaleTime and d3.scaleLinear mapping data to coordinates, and d3.line with curveNatural producing a smooth path through the points. Axes are rendered via custom React components using d3 ticks, while the Marks component applies a teal stroke to the line. Data is loaded asynchronously from a provided CSV URL using d3.csv.

SSophia Cofone

72% match

Loading thumbnail…

Line Chart with React & D3

This line chart shows monthly atmospheric CO₂ measurements from 1958 onward, with time on the x‑axis and CO₂ concentration in ppm on the y‑axis. The React component loads CSV data using `d3.csv`, parses dates with `d3.timeParse`, and passes the data to a reusable `viz` function. That function builds scales with `d3.scaleTime` and `d3.scaleLinear`, renders axes via `d3.axisBottom` and `d3.axisLeft`, and draws the curved line with `d3.line` using `curveMonotoneX`. Points with missing values are skipped via the line generator’s `.defined` method.

223100098@lums.edu.pk

72% match