Skip to main content
SimilarExport ZIP
100%

D3 ScatterPlot

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

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.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Interactive scatter plot

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.

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
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
79% 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
79% 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
77% match
Loading thumbnail…

Chart redesign

This visualization redesigns a line chart of daily humidity data from a local weather dataset, highlighting seasonal patterns and mean humidity levels. Using D3 v5 within a React framework, it sorts and downsamples the time-series data, then renders an SVG with an area chart, individual data points, and seasonal background bands for Spring, Summer, Fall, and Winter. The code employs `d3.area`, `d3.scaleTime`, and `d3.timeParse` to generate the chart, while linear gradient definitions and season mean lines provide additional visual context.

Jjbruzzo
77% 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
76% match
Loading thumbnail…

D3: Drawing a Scatter Plot

This example displays a basic scatter plot of ten data points, each represented by a circle and a red text label showing its coordinates. The visualization uses D3.js v7 to append SVG circles and text elements to the document body. Circle radii are calculated as the square root of the difference between the plot height and the y-coordinate, creating a size variation tied to vertical position. The chart is drawn with a 500 by 100 pixel viewport, using the data array directly as the source for positioning.

MMarisa Tania
76% match