100%

Fork of Simple Scatter Plot

✓ Published0🌍 Public

Last edited Mar 9, 2026

Created on Mar 9, 2026

This fork of the Simple Scatter Plot shows a dual-axis chart of Seattle weather data, displaying precipitation as blue bars and maximum temperature as a red line, with separate left and right Y-axis scales. It uses d3.csv to load the dataset, then d3.scaleTime and d3.scaleLinear to create the scales, with d3.axisLeft, d3.axisRight, and d3.axisBottom for the axes. The chart renders gridlines and includes interactive accessibility attributes, with the six-month slice of data displayed across the responsive width of its container.

AI-generated description

Dual-Axis Chart Visualization

A D3.js dual-axis chart displaying Seattle weather data with precipitation bars and maximum temperature line overlay.

Features

Dual Y-axis scales for different metrics (precipitation and temperature)
Bar chart for discrete values (precipitation)
Line chart for continuous values (temperature)
Responsive design
Gridlines for better readability
Legend showing both metrics
Reusable chart component

Data

Uses Seattle weather dataset with 180 samples (6 months) covering:

Date
Precipitation (mm)
Max Temperature (°C)

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Scatter Plot

This interactive scatter plot visualizes temperature readings over time using React and D3 v7. The visualization employs scaleTime and scaleLinear to map timestamps and temperature values to SVG coordinates, while custom AxisBottom and AxisLeft components render the time-formatted x-axis and numeric y-axis. The data is loaded asynchronously from a CSV file containing weekly San Francisco temperature measurements using D3's csv utility. Each data point is rendered as a circle mark with a tooltip displaying the day of the week.

Nnkarinti

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

ICE7-SCATTERPLOT

This scatterplot visualizes Seattle weather data, plotting daily maximum temperature against precipitation and encoding weather type by color. Built with D3 v7 and React, it uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` with `schemeTableau10` for categorical colors, and `d3.axisBottom`/`d3.axisLeft` for labeled scales. The SVG renders circles with fixed radius and opacity, includes a weather legend, and loads data from a CSV file.

Kkpavithrasai@gmail.com

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

79% match

Loading thumbnail…

Fork of Temperature in San Francisco Scatter Plot

This scatter plot visualizes a week of temperature data in San Francisco, displaying time on the x-axis and altitude on the y-axis with steelblue circles. The visualization uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisLeft`, and `axisBottom` to render the axes and plot points. Data originates from Data Canvas - Sense Your City and is loaded from a raw CSV file on GitHub. The chart includes labeled axes, a title, and gridlines, all rendered as SVG elements.

CChengwei Ye

79% match

Loading thumbnail…

Fork of Stylized Scatter Plot

This is a scatter plot that visualizes temperature readings over time from a San Francisco weekly temperature dataset. The visualization uses `d3.scaleTime` and `d3.scaleLinear` to map data to the SVG canvas, with custom components for axes and data marks. The chart is rendered using React, with D3 v5 providing the CSV loading and scaling utilities, while the Poppins font and specific color styling give it a polished, stylized appearance.

PPratik Raja

79% match

Loading thumbnail…

Fork of Fork of Fork of ICE-6 Scatter Plot

This scatter plot visualizes average rainfall against average temperature, with each point colored by year (2010-2018) using a color mapping function. The visualization uses D3 v6’s `csv` loader to fetch data from a GitHub gist, `scaleLinear` for x and y axes, and `axisLeft`/`axisBottom` to render the axes. Points are drawn as SVG circles with a fixed radius of 5, positioned via the `scaleLinear` ranges, and the chart includes labeled axes for both variables. The rendering is done through direct SVG manipulation in a React environment.

Nnavyasrimeka9@gmail.com

78% match

Loading thumbnail…

Fork of Stylized Scatter Plot

This scatter plot visualizes temperature over time in San Francisco, with each circle representing a daily measurement. The chart uses D3 scales (scaleLinear) to map data to positions, while React components render the SVG axes and marks. Axis ticks are styled with grid lines, and the data is loaded from a CSV file using D3’s csv method. Hovering over a circle reveals its timestamp via a native SVG title tooltip. The visualization is built with React 16.9 and D3 v5, using a Poppins font and a clean, minimal aesthetic.

AAnkit-Ian-53787

78% match