Emma's O2 Data Viz

100%

Emma's O2 Data Viz

✓ Published0🌍 Public

Last edited Jan 30, 2023

Created on Jan 30, 2023

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.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

O2 Monitor Chart

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.

EEmma Schaale

75% match

Loading thumbnail…

Emotions vs Time

This visualization plots emotions against time using circles positioned along a linear time axis and a categorical emotion axis. The code uses d3.csv to load data, d3.scaleLinear and d3.scaleBand for scales, and d3.axisLeft and d3.axisBottom with custom tick styling. Circles are rendered via SVG selections, with a steelblue fill, while axis labels and a title use d3.append. The data comes from a small inline CSV file.

Jjpdlourenco98

64% match

Loading thumbnail…

Fork of Fork of Let's make a face with D3.js!

This example demonstrates foundational D3.js DOM manipulation by loading oxygen level data from a CSV file and rendering the values as SVG text elements. The code uses `d3.select`, `.data()`, `.enter()`, and `.append()` to bind the parsed data to text nodes, positioning them horizontally with a fixed vertical offset. The visualization relies on the `d3.csv` method to fetch the external dataset, while the SVG canvas is configured with a width of 960 and height of 500. Although the title suggests a smiley face with moving eyebrows, the current implementation only displays the numerical oxygen readings.

EEmma Schaale

64% match

Loading thumbnail…

DataViz_Tp2_Meziani_Amina

A line chart displays twelve monthly data points from a JSON dataset, plotting values over time from January to December 2016. The SVG visualization uses D3 v4’s `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, and `d3.timeParse` to render the line and axes. Semi-transparent circles sit on each point; hovering a circle animates its fill to red, reveals the corresponding numeric value, and shows a dashed vertical guide line, with `transition.duration` and `style` opacity changes handling the effects.

AAminaSGitHub

64% match

Loading thumbnail…

test_data

This visualization uses a Vega-Lite API to render an interactive line chart of CO2 emissions over time, with three distinct types compared via colored lines. The chart encodes Year on the x-axis, emission amount on the y-axis, and type as color, with tooltips showing year values. Data from a CSV file is loaded via d3.csv, and the vega-lite-api library, combined with vega-tooltip for hover interactions, generates the SVG output. The visualization fills the entire browser window and uses custom axis styling.

Jjjacobatandover

63% match

Loading thumbnail…

Gist 473f153bb8e97062f0f4696aebe7a22c

This example shows a time-series line chart of oceanographic measurements from the Hakai Quadra station, pulling data via a JSON request to ERDDAP. It plots a single variable against time using a date-parsed x-axis and linear y-axis. The code uses d3.json to load rows from the ERDDAP table, d3.utcParse for ISO timestamps, and d3.line with d3.scaleTime and d3.scaleLinear to render the path. Axes are drawn with d3.axisBottom and d3.axisLeft, with the line styled in steelblue.

MMbrownshoes

63% match

Loading thumbnail…

Data Visualization

This visualization displays earthquake data from a CSV file, plotting year on the x-axis, magnitude on the y-axis, and encoding depth via circle radius. The SVG scatterplot uses d3.csv to load data, then d3.scaleLinear and d3.scaleSqrt for scales, with d3.axisBottom and d3.axisLeft generating the axes. Colored steelblue circles with 0.5 opacity clearly reveal distributions of earthquake events across the recorded timeframe.

HHassaan Gul

63% match

Loading thumbnail…

CO2

This line chart shows CO2 emission values from 2000 to 2014, with each data point marked by a circle that reveals its exact value on hover via a tooltip. The visualization uses D3 v4 to render an SVG with time-scaled X axis and linear Y axis, applying a basis curve to smooth the line path. It loads data from a CSV file and demonstrates axis customization, interactive mouse events, and tooltip styling.

Llamiyaa

63% match