100%

Fork of Simple Scatter Plot

✓ Published0🌍 Public

Last edited Jan 27, 2024

Created on Jan 27, 2024

This fork of a simple scatter plot visualizes a time-series dataset, plotting data values against years. The x-axis represents the year extracted from a `Time_Period` attribute, while the y-axis shows the corresponding `Data_Value`. The visualization uses D3's `scaleLinear`, `axisLeft`, and `extent` functions to map data to screen coordinates and renders circles with a fixed radius and opacity. It also employs custom `xAxis`, `yAxis`, `xAxisLabel`, and `yAxisLabel` functions from the `@curran/axis-labels` library to display axes and labels. The data source is imported from a VizHub dataset.

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…

Fork of Simple Scatter Plot

This example visualizes a temperature series dataset loaded from a remote JSON file. It renders a scatter plot where each point is positioned using D3’s `scaleLinear` on the x and y axes, with circles drawn via SVG selections. The underlying `viz` function, from the fork, maps bill length against flipper length from the Penguins Dataset, but here the data source is replaced with `temp_series.json`. Axis labels and margins are configured through helper functions like `xAxisLabel` and `yAxisLabel`.

Ookahne@gmail.com

81% match

Loading thumbnail…

Fork of Fork of Scatter Plot(test_data)

This scatter plot visualizes a dataset with Time on the x-axis and Value on the y-axis, using a connected line and circular marks to show the relationship between the variables. The visualization is built with React and D3 v5, using scaleLinear for both axes and the d3.line generator in the Marks component to draw the path. Data is loaded asynchronously from a CSV file via d3.csv, and the rendered SVG includes reusable AxisBottom and AxisLeft components for tick marks and labels.

Kkalyanikotha

79% match

Loading thumbnail…

Fork of Simple Scatter Plot

This example visualizes the Penguin dataset using a scatter plot that maps two numerical variables onto x- and y-axes. It leverages D3's `scaleLinear`, `extent`, and axis functions to create scales and render axes. The code draws a background rectangle, then places circles with fixed radius and opacity, using the `xValue` and `yValue` accessors to position each point. The plot includes axis labels via the `@curran/axis-labels` helper, making the data relationships clear.

CChaturyaAkhilaPallem@my.unt.edu

79% match

Loading thumbnail…

Fork of Scatter Plot(test_data)

This fork of a scatter plot displays how a data point’s value changes over time, with a black line connecting sequential points overlaid on teal circles. It uses React to render an SVG, with axes and marks built from custom components. The code leverages d3.scaleLinear for scaling, d3.extent for domains, d3.format for tick labels, and d3.csv to load data from a remote testData.csv. The chart includes axis labels for “Time” and “Value,” and each circle shows a tooltip on hover.

NNYY

79% match

Loading thumbnail…

Fork of Fork of making Scatter plottes

This fork of a scatter plot example visualizes harvested crop area per year from a small CSV dataset, drawing a smooth area chart rather than discrete points. The D3 v5 code sorts the data chronologically, then uses `scaleLinear` and `scaleTime` to map area and year values to SVG coordinates. It renders the area with `area()` and `curveBasis`, while grid lines and axis labels are generated via `axisLeft`, `axisRight`, and `axisBottom`. The SVG canvas is 960 by 500 pixels, with the area filled steelblue and black stroke, and the chart includes a title and axis labels.

SSteve_Nashon

78% match

Loading thumbnail…

Fork of Fork of Scatter Plot(test_data)

A scatter plot of time-series data from the Iris Dataset, showing Value over Time for each observation. D3's `scaleLinear` maps data to SVG coordinates, with axes rendered by custom components. The `Marks` component draws a black line connecting points and circles with tooltips using `d3.line`. Data is loaded asynchronously from a CSV URL via `d3.csv`, and the visualization is built with React and rendered as SVG, styled with the Poppins font.

MMar-99

78% match

Loading thumbnail…

Fork of Simple Scatter Plot

This example shows a static bar chart of a fruits dataset, displaying categorical values along the x-axis and numeric magnitudes on the y-axis. It loads a remote CSV file using `d3.csv` and renders the visualization as an SVG on the page. The code employs `d3.scaleBand` for the categorical axis, `d3.scaleLinear` for the value axis, and `d3.axisBottom` and `d3.axisLeft` to draw the axes. The chart explicitly constructs bars with SVG `rect` elements, while the data originates from a GitHub-hosted CSV file.

Kkotlavamsireddy@gmail.com

77% match

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a connected scatterplot showing how a numeric value changes over time, with a time-scaled X axis and linear Y axis. The visualization renders as an SVG using D3 v7, loading CSV data from a remote GitHub repository. The code uses `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, and `d3.axisBottom`/`d3.axisLeft` to draw the line and circular points. It also uses `d3.timeParse` to format dates and `d3.csv` for asynchronous data loading.

CCrystal Lee

77% match