100%

Project Visualizations

✓ Published0🌍 Public

Last edited Mar 25, 2024

Created on Mar 25, 2024

This scatter plot displays the Vancouver city humidity levels over time, with each data point colored according to its humidity value using a viridis color scale. The visualization loads CSV data from a GitHub gist via `d3.csv` and renders circles positioned by `d3.scaleBand` for both datetime and humidity axes. Gridlines enhance readability, while text labels above each point show the humidity percentage. The SVG is styled with custom CSS for axis colors, grid dashes, and background, and the code uses D3 v7 to construct the chart with margins and scales.

AI-generated description

A simple scatter plot with D3 showing the Penguins Dataset.

Challenge

Fork this viz
Modify it to show your data

MIT Licensed

Similar vizzes

Loading thumbnail…

D3.js Visualization for Vancouver's Humidity

This visualization shows Vancouver’s humidity over time as a single line chart. The SVG line represents humidity percentages across the datetime range, with labeled x and y axes. The code loads data from a CSV file using `d3.csv`, parses timestamps with `d3.timeParse`, and scales the coordinates via `d3.scaleTime` and `d3.scaleLinear`. It renders the line using `d3.line` and displays axes with `d3.axisBottom` and `d3.axisLeft`. The styling applies a steelblue stroke through CSS classes.

BBhavanaGIrni

88% match

Loading thumbnail…

HTML starter

This scatter plot visualizes the relationship between cities and datetime, with color intensity encoding humidity levels from the Vancouver dataset. The visualization uses D3 v7 to load CSV data and render an SVG with circular marks positioned by a band scale for city names on the x-axis and datetime on the y-axis. A sequential viridis color scale maps humidity values, and a gradient legend with an axis provides a reference for interpreting the color encoding. The code applies D3’s scaleBand, scaleSequential, and axis components to construct the chart, which displays the original weather data from the external CSV source.

Aanushapodapati99@gmail.com

88% match

Loading thumbnail…

Starter Template

This example shows a histogram of humidity measurements from weather data, with bars colored cornflower blue and a maroon dashed line marking the mean humidity. The visualization is built using D3 v5 and renders to SVG, using `d3.histogram` to bin the continuous humidity values and `d3.scaleLinear` for both axes. The chart is made accessible with ARIA roles and labels, and it includes a labeled x-axis for humidity. The data is loaded asynchronously from a JSON file hosted on GitHub.

Jjbruzzo

78% 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…

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

76% 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

75% match

Loading thumbnail…

Visualization Editor

This visualization editor presents a live scatter plot and line chart showing temperature and humidity data for seven cities, fetched from the Data Canvas Sense Your City API. The scatter plot maps humidity against temperature with lines connecting city-specific series, while the line chart shows temperature trends over time. Users can interact with a configuration editor pane, adjusting visualization parameters through Chiasm’s reactive model, built with D3.js, CodeMirror, and the Inlet library. The runtime loads data continuously in 24-hour intervals, displaying five-minute resolution records with SVG rendering.

CCurran Kelleher

75% match

Loading thumbnail…

Temperature in Vancouver Scatter Plot

This scatter plot displays a month of hourly temperature readings in Vancouver, with each circle representing a measurement over time on the x-axis and degrees Celsius on the y-axis. It uses d3.scaleTime and d3.scaleLinear for axes, d3.axisBottom and d3.axisLeft for ticks, and d3.csv to load data from a remote GitHub-hosted file. Circles are appended as SVG elements with a hover tooltip showing the exact temperature. The chart includes axis labels and a title, with data sourced from the Canadian government’s climate weather site.

Ssriramvsharma

75% match