Fork of Reusable D3 Scatter Plot

100%

Fork of Reusable D3 Scatter Plot

✓ Published0🌍 Public

Last edited Mar 27, 2024

Created on Mar 27, 2024

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.

AI-generated description

A reusable scatter plot inspired by Towards Reusable Charts.

Shows the Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example visualizes a scatter plot of the Iris Dataset, showing the relationship between temperature and humidity for individual data points. The plot uses D3 v3 to generate SVG circles positioned by linear scales, with labeled axes for both variables. The code loads data from a CSV file via `d3.csv`, then maps numeric values to screen coordinates. The scatter plot demonstrates a reusable chart pattern from `scatterPlot.js`, which exposes configurable accessors and dimensions through a closure-based API.

Rreddysushma994@gmail.com

89% 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.

86% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This interactive scatter plot visualizes the Iris Dataset, cycling through different attribute combinations on the x-axis every two seconds. The code uses the D3.js library with `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map data points as animated circles within an SVG canvas. A reusable chart pattern, inspired by Mike Bostock’s “Towards Reusable Charts,” structures the visualization, while `setInterval` triggers periodic re-renders that update axes and circle positions. The data is loaded via `csv` from a remote Gist, with parsing and scaling handled by `d3.csv` and `d3.scaleLinear`.

Ddjtorrey

86% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example displays the Iris Dataset as an animated scatter plot, cycling through four different feature combinations every two seconds. The visualization is constructed using D3.js version 6.7, leveraging `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map data values to SVG circle positions. The plot is rendered as a full-window SVG, with data loaded from a CSV file hosted on GitHub. A reusable `scatterPlot` charting function encapsulates the rendering logic, allowing dynamic updates of the x-axis mapping without rebuilding the entire visualization.

MMar-99

86% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example shows an animated scatter plot of temperature data over time, cycling through multiple cities from the Iris Dataset. It visualizes yearly temperature readings (in Kelvin) for each city, with circles colored by city and positioned along the x-axis for year and y-axis for temperature. The visualization uses D3.js v7, loading data via `d3.csv`, parsing dates with `d3.timeParse`, and rendering SVG circles with scales like `d3.scaleLinear` and `d3.scaleOrdinal`. A `setInterval` triggers periodic updates, redrawing the plot for each city every two seconds.

YYashwanth0311

86% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example presents an animated scatter plot of the Iris Dataset, where the x-axis cycles every two seconds through the four measured features (petal width, sepal width, petal length, sepal length) while the y-axis remains fixed on sepal length. It uses D3 v6's `csv` loader, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` within a reusable chart pattern. SVG circles are positioned and transitioned via a `setInterval` loop that calls the chart function repeatedly, with styling applied from the Share Tech font.

Ssnehareddygurram

86% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example demonstrates the classic Iris Dataset through an animated scatter plot that cycles through different feature combinations every two seconds. The visualization uses D3.js v6 with a reusable chart pattern, leveraging `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render axes and circles in SVG. The code fetches CSV data from a GitHub gist, parses numeric columns, and employs `setInterval` to dynamically update the x-axis mapping between petal width, sepal width, petal length, and sepal length. The scatter plot fills the browser window and uses a custom font from Google Fonts.

Mmadipadiga.raviteja@gmail.com

86% match

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example presents an animated scatter plot of the Iris dataset, cycling through different flower measurements every two seconds. A reusable D3 scatter plot module uses `scaleLinear`, `axisLeft`, and `axisBottom` to render circles in an SVG. The code imports data via `csv` from D3 v6, parses numeric columns, and updates the x-axis mapping with `setInterval`. The full-window visualization includes custom styling from the Share Tech font.

PPoojaThandra

86% match