Skip to main content
SimilarExport ZIP
100%

Fork of hmp155A Responsive Line Chart

✓ Published0🌍 Public
LLakshmi Keerthi
Last edited Apr 16, 2024
Created on Apr 16, 2024

This example visualizes temperature readings from the Vaisala HMP155A probe as a responsive line chart. It plots AirTC_1 values against time, using a gray background to delineate the plotting area. The chart uses `d3.scaleTime` for the x-axis and `d3.scaleLinear` for the y-axis, with the line generated via `d3.line`. It employs D3’s `select` and `join` for SVG construction, and the `observeResize` and `axes` functions from the `@drbagwell/responsive-viz-axes` library. Data is sourced from the `@drbagwell/hmp155a` package, which includes timestamped sensor measurements.

AI-generated description

Overview The HMP155A provides reliable relative humidity (RH) and temperature measurements for a wide range of applications. It uses a HUMICAP®180R capacitive thin film polymer sensor to measure RH over the 0 to 100% RH range. A PRT measures temperature over the -80° to +60°C range. This rugged, accurate temperature/RH probe is manufactured by Vaisala.

https://www.campbellsci.com/hmp155a

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of hmp155A Responsive Line Chart

This example visualizes temperature readings from the Vaisala HMP155A probe as a responsive line chart. It plots AirTC_1 values against time, using a gray background to delineate the plotting area. The chart uses `d3.scaleTime` for the x-axis and `d3.scaleLinear` for the y-axis, with the line generated via `d3.line`. It employs D3’s `select` and `join` for SVG construction, and the `observeResize` and `axes` functions from the `@drbagwell/responsive-viz-axes` library. Data is sourced from the `@drbagwell/hmp155a` package, which includes timestamped sensor measurements.

LLakshmi Keerthi
100% match
Loading thumbnail…

hmp155A Responsive Line Chart

This responsive line chart visualizes temperature readings from the HMP155A probe, supplied via the `@drbagwell/stat-moving-averages` dataset. The chart plots temperature (degC) against time (hours), rendering data as a single black line over a grey inner rectangle, with labeled axes. Built with D3 v7, it uses `scaleTime` and `scaleLinear` for scaling, `line` for path generation, and the `observeResize` and `axes` functions from `@drbagwell/responsive-viz-axes` to dynamically recompute dimensions and redraw on container resizing.

DDonald Bagwell
88% match
Loading thumbnail…

Fork of Line Chart

This fork of a line chart visualizes daily surface air temperature data from 1940 onward, colored by year using the d3 interpolatePlasma color scale. The chart plots each year as a separate line, with 2024 highlighted in thick red for emphasis, while a semi-transparent inner rectangle provides background contrast. The code uses d3’s scaleLinear, extent, line, and flatGroup to prepare and render the multiple series, alongside the responsive-axes library for labeled axes and the observeResize utility for container dimensions.

007versiasri@gmail.com
76% match
Loading thumbnail…

Fork of Line chart

This fork of a line chart displays daily temperature readings across multiple districts over time, with each district assigned a distinct color from a categorical scale and identified via a custom color legend. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `line` generator with `curveBasis`, and `nest` to group data by district, while parsing dates with Day.js and reading CSV input from a GitHub repository. Axes include grid lines and rotated labels, and the chart is rendered as an SVG with styled paths using mix-blend-mode for overlapping lines.

Vvidhyanamini
75% match
Loading thumbnail…

Fork of Working with Time

This visualization plots temperature over time as a smooth line chart using React and D3 v5. The temperature data is loaded from a CSV file via `d3.csv` and rendered with SVG paths using D3’s `line` and `curveNatural` generators. Axes are built with `scaleLinear` for both dimensions, with custom React components for the bottom and left ticks. The chart includes labeled axes for "Time" and "Temperature," and while circle marks are defined in the code, they are currently commented out, so only the dark grey curved line is displayed. The styling applies custom fonts and bold axis labels via an external stylesheet.

李李文韬
75% match
Loading thumbnail…

Fork of Line Chart with Multiple Lines

This example shows daily air surface temperatures from 1940 through 2024, with one line per year plotted against day of year. The current year (2024) is highlighted in red with a thicker stroke, while historical years fade into a plasma color scale. The code uses d3.scaleLinear, d3.scaleSequential, d3.flatGroup, and d3.line with a defined accessor. The @curran/responsive-axes library renders the axes, while @curran/daily-surface-air-temperature provides the dataset.

Ppeter.sime@gmail.com
75% match
Loading thumbnail…

Fork of Working with time

This visualization displays temperature readings over time, rendered as a smooth line chart in an SVG canvas. The React app loads CSV data from a GitHub-hosted weather dataset and uses D3 v5 utilities like `scaleTime`, `scaleLinear`, and `extent` to map timestamps and temperatures to coordinates. The `line` and `curveNatural` functions from D3 draw the path, while custom React components (`AxisBottom`, `AxisLeft`, `Marks`) handle axes and marks. Axis labels and tick styling are defined in CSS with the Poppins font.

SSamirAhma
74% match
Loading thumbnail…

Fork of Responsive Line Chart

This responsive line chart visualizes the Keeling Curve, plotting atmospheric CO2 concentrations over time. The code uses D3’s `scaleTime` and `scaleLinear` for axes, with the `line` generator drawing the trend, while `@curran/responsive-axes` handles label placement and `observeResize` adapts the SVG to the container. A gray inner rectangle highlights the plotting area, and the data comes from the `@curran/keeling-curve-data` package.

Mmuhmdabdollahi@gmail.com
74% match