Skip to main content
SimilarExport ZIP
100%

Interactive scatter plot

✓ Published1🌍 Public
Jjbruzzo
Last edited Oct 27, 2022
Created on Oct 27, 2022

A scatter plot uses the D3.js library to visualize the relationship between dew point and relative humidity, drawing each day of the weather dataset as a circle on an SVG canvas. The code creates linear scales for both axes, renders the axes with labels, and implements interactive hover effects that display a tooltip with the exact date, humidity, and dew point values using D3’s time parsing and formatting functions. React is loaded for potential integration, but the visualization itself is built with vanilla D3 selections and transitions.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

D3 ScatterPlot

This scatter plot visualizes the relationship between dew point and relative humidity, with each point’s color mapped to cloud cover. The SVG visualization uses the D3 v5 library’s `scaleLinear` for axes and color, rendering circles with `attr("cx")` and `attr("cy")` based on a JSON dataset of weather observations. Axis labels and tick marks are generated via `axisBottom` and `axisLeft`, while the chart’s size adjusts to the viewport.

Jjbruzzo
88% match
Loading thumbnail…

Voronov scatter plot

This interactive scatter plot visualizes the relationship between dew point and relative humidity for weather data. Each point represents a day, and the chart uses a Voronoi diagram to define hover regions around each point, making it easier to select and inspect individual data points. The visualization, rendered as an SVG using D3.js v5 and the d3-delaunay library, displays a tooltip with the exact date, humidity, and dew point values upon mouseover. The data is loaded as JSON and plotted using linear scales for both axes.

Jjbruzzo
85% match
Loading thumbnail…

Dashboard

This dashboard presents a scatterplot comparing pairs of weather variables, such as temperature and humidity, from a dataset that includes daily records. Users select the x and y variables from dropdown menus to change the visualization. The chart is rendered as an SVG using D3 v5, with D3’s scale and axis components generating the grid and tick marks. The surrounding layout uses CSS to position header panels and the plot area.

Eeourm20
82% 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
81% match
Loading thumbnail…

Interactive barchart

This interactive barchart shows the distribution of humidity measurements from a weather dataset. Users can hover over bars to see the exact humidity range and the number of days in each bin via a tooltip. Built with D3 v5 and React, it uses `d3.histogram()` to generate bins, `d3.scaleLinear()` for axes, and SVG for rendering. The mean humidity is marked with a dashed line. Data is loaded asynchronously via `d3.json()`.

Jjbruzzo
80% match
Loading thumbnail…

D3 Scatter Plot w/ other data set

This scatter plot displays the relationship between temperature and humidity using data from the Sense Your City dataset, which is loaded via a CSV URL. Each circle represents a data point, with position mapped along the x-axis for temperature and y-axis for humidity. The visualization leverages D3 v6.7.0 within a React environment, using `scaleLinear` and `axisLeft`/`axisBottom` from D3 to construct the plot, rendering circles as SVG elements. The margins are defined, and the plot area spans the full window dimensions.

Ccardoza-IPH
80% match
Loading thumbnail…

Fork of Scatterplot with Iris Data

This interactive scatterplot visualizes the relationship between temperature (°C) and humidity (%) from a CSS color dataset, styling each data point as a circular mark. Built with React and D3 v7, the code uses `scaleLinear`, `extent`, and `format` to map the values, while `csv` loads the data from a remote URL. The SVG rendering includes custom axis components and hover tooltips that display temperature values. The visualization uses a Poppins font and muted teal marks on a clean background, with labels for both axes.

MM
79% match
Loading thumbnail…

Time scatter plot

This time scatter plot visualizes temperature readings over time as red circles on an SVG canvas. The visualization uses D3's `scaleTime` and `scaleLinear` for axes mapping, with `timeFormat` to display weekday labels on the bottom axis. React renders each data point as a circle, with tooltips showing the formatted timestamp. The chart loads data from a CSV file via D3's `csv` utility, and custom React components handle axis and mark rendering.

Yyastika
79% match