rtb scatter

100%

✓ Published1🌍 Public

Last edited May 4, 2024

Created on May 4, 2024

This interactive scatterplot visualizes daily river temperature and turbidity data from 2015, plotting each day as a circle with position encoding both variables. Hovering a point highlights it in red and displays its exact values in a tooltip. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear` for both axes, `axisBottom` and `axisLeft` for tick marks, and `.on('mouseover')` events to trigger the highlighting and tooltip updates.

AI-generated description

ToDo

make the .on functions select by id
make the tooltip adjust

might be worth starting from scratch using Ben's template so I know that things should work. Also, do imports come from the og fork?

MIT Licensed

Similar vizzes

Loading thumbnail…

rtb and weather chart

This visualization pairs a daily river temperature (rtb) scatterplot for 2015 with a linked weather chart. The left SVG shows each day as a circle, with hover interactions that highlight the point, display a tooltip, and update the right SVG to show that day's hourly temperature data. The right chart uses a line plot built with d3.scaleLinear and d3.line. Data is loaded from CSV files, and both charts use d3.axisBottom and d3.axisLeft with animated transitions for hover feedback.

Ookahne@gmail.com

89% match

Loading thumbnail…

rtb scatter and weather line

A linked-view dashboard shows a scatter plot of rtb values by day of year for a selected year (2015–2018), alongside a line chart comparing hourly temperature on a chosen day to its monthly average. Hovering over a scatter point highlights it and triggers an animated line update in the weather chart. The visualization uses d3.v6 with SVG rendering, d3.scaleLinear, d3.axisBottom/Left, and mouse events; radio buttons filter annual data, and a tooltip displays point details. Data is loaded from CSV files and parsed via custom functions.

Ookahne@gmail.com

86% match

Loading thumbnail…

Fork of weather scatter

This visualization shows the relationship between time of day and temperature for a single day, plotting temperature in Fahrenheit against the hour using a line chart generated with D3.js (d3.v5). The chart uses `d3.scaleLinear()` for both axes, with a `d3.line()` generator to draw the temperature curve, and includes grid lines and axis labels. Data is loaded from external CSV files (rtb.csv and temps_doy2015.csv) via `d3.csv()`, with the temperature data for a specific day of year 2015. The SVG rendering is configured with explicit margins, and the styling uses simple CSS for the circle elements.

Ookahne@gmail.com

77% match

Loading thumbnail…

weather scatter

A weather scatter plot visualizes hourly temperature readings (temp_F) for a single day of the year, plotting each hour along the x-axis and temperature along the y-axis. The visualization uses the D3 v5 library, rendering data from CSV files via `Promise.all` and `d3.csv`, with linear scales (`scaleLinear`) for both axes and grid lines generated by `axisBottom` and `axisLeft`. Circles represent individual temperature readings, and hovering over a point enlarges it, changes its fill to red, and displays a tooltip with hour and temperature values via D3 selection and event handlers. The chart includes axis labels, a title, and uses SVG rendering with CSS styling for circle opacity and tooltip appearance.

Ookahne@gmail.com

74% match

Loading thumbnail…

Scatter/Line Plot with Menus

This interactive visualization displays borehole depth and temperature measurements over time, plotted as red circles connected by a steelblue line. Users can switch the y-axis variable between Depth and Temp via dropdown menus, while the x-axis remains fixed to date. The chart uses D3 v5 scales, axes, and a line generator for rendering, with animated transitions on circle positions. SVG elements are updated through enter/merge/exit selections, and the menus are built using a reusable dropdownMenu module.

WW9183907

71% match

Loading thumbnail…

Temperatura Transboundary River Basin!

This scatter plot displays temperature readings over time for a transboundary river basin, using red semi-transparent circles to reveal data density. It loads CSV data from VizHub, parsing timestamps and numeric temperatures before rendering with D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` APIs. The SVG chart includes gridlines, labeled axes, and a title, with the data sourced from a 2015 Africa Union basin population estimate.

Aalbanodossantos

71% match

Loading thumbnail…

scatter

This example presents an animated scatterplot comparing two datasets loaded from separate JavaScript files. Green and red circles represent positive and negative y-values, transitioning between the datasets every three seconds. Built with D3 v4, the visualization uses `d3.scaleLinear` for axes and `d3.transition` to animate circle positions and radii. An SVG line marks the zero baseline, with axis updates handled by `d3.axisTop` and `d3.axisLeft`.

EEranM6

71% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This interactive scatter plot visualizes weather data from a CSV file, allowing viewers to cycle through humidity, precipitation, and pressure on the x-axis while temperature remains on the y-axis. Using D3.js version 6, the chart employs `scaleLinear`, `extent`, and `axisBottom`/`axisLeft` to render axes, with a `setInterval` driving automatic transitions between attributes every two seconds. Circles are drawn via `selection.selectAll` and `join` with a fixed radius, while margins and dimensions adapt to the window size. The Iris dataset is not shown here; instead, weather observations are sourced from a gist-hosted CSV, and styling uses the Share Tech font.

Hharichandanamone21@gmail.com

70% match