Scatter Plot

100%

✓ Published0🌍 Public

Last edited Jun 4, 2020

Created on Jun 4, 2020

This interactive scatter plot visualizes the relationship between age and length for a dataset of 40 observations. A dropdown menu allows users to switch between different stimulus maps, which appear as background images with city-specific resolutions loaded from a CSV file. Users can hover over individual data points to see detailed tooltip information including fixation duration and coordinates. The visualization uses D3 v5 with SVG rendering, featuring animated k-means clustering via the `kmeans` algorithm with `d3.scaleOrdinal` for cluster colors, and axes that adapt to the selected image dimensions.

AI-generated description

This bar chart shows population of the top 10 most populous countries. The data comes from the year 2018 estimate in United Nations: World Population Prospects 2017.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot

This interactive scatter plot visualizes eye-tracking fixation data across different city map stimuli. Users select a city from a dropdown menu, which filters the data and displays fixation points as blue circles overlaid on the corresponding city image. The visualization uses D3.js with an SVG renderer, incorporating d3.scaleLinear for axes, d3.scaleOrdinal from d3-scale-chromatic for color coding, and interactive tooltips showing user, coordinates, fixation duration, and description. The background image resolution is mapped to the coordinate system using data from a separate CSV file.

KKanishka33

84% match

Loading thumbnail…

Scatter Plot

This interactive scatter plot visualizes eye-tracking data, plotting the mapped fixation point coordinates for viewers as they examine images of city landmarks. Users can select a specific city image from a dropdown menu, which updates the plot’s background and overlays the corresponding fixation points as circles. The visualization uses D3.js with SVG and animation, applying linear scales based on resolution data and implementing k-means clustering to group fixation points by color. Hovering reveals a tooltip with details like user, coordinates, fixation duration, and description.

JJiapengFan

80% match

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot lets users explore relationships between numeric measurements—including Length, Eye Diameter, and Jaw—across different countries. Two dropdown menus dynamically select which columns appear on the x- and y-axes, triggering a re-render of the visualization. Built with D3.js v5, it uses the library's `select`, `csv`, `scaleLinear`, `axisLeft`, and `axisBottom` APIs, along with custom dropdown and scatter plot modules. Circles animate into position using `transition().duration(2000).delay()`, while axis labels update to reflect the chosen variables. Data comes from a local CSV file.

KKanishka33

78% match

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot visualizes depression data across different age groups, allowing users to dynamically select which attributes appear on the x and y axes via dropdown menus. Built with React and D3 v5, the visualization uses d3.scaleLinear and d3.extent to map data points as SVG circles, with axis components rendered through custom React components. The dataset is loaded asynchronously using d3.csv from a remote URL. Users can switch between sepal measurements and species attributes, with axis labels updating accordingly to reflect the selected variables.

NNikithakatta30

78% match

Loading thumbnail…

scatterplot

This scatter plot visualizes the relationship between Age and Fare from a CSV dataset, with points colored by Sex. The visualization alternates between two subsets of the data every five seconds, dynamically resizing the SVG to fit the browser window. Built with D3.js, it uses the scatterPlot module and responsive-axes library to generate linear scales, axis labels, and semi-transparent circles. The code loads data via d3.csv, parses numeric fields, and employs setInterval to toggle between the two plot views, demonstrating a simple animated data exploration technique.

Vvishnupriya eupuri

77% match

Loading thumbnail…

Scatter Plot w. 1 Ordered Attribute

This scatter plot displays the relationship between length and age for a dataset of 39 items, with points distributed across a linear scale on both axes. The visualization positions circles based on their numeric values for each attribute, using D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` to construct the coordinate system and gridlines. The code loads data from a remote CSV via `d3.csv`, parses numeric fields, and renders the chart as SVG within a React component, adding axis labels and a title to clarify the comparison.

KKanishka33

77% match

Loading thumbnail…

Scatter Plot

This interactive scatter plot visualizes eye-tracking data, showing the x and y coordinates of mapped fixation points. A dropdown menu allows the user to filter the visualization by the status of the data entries. To create the chart, the code uses the D3.js library, specifically the `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` APIs within an SVG rendering. The image displayed as the background corresponds to the selected data grouping. Altered data is animated with circles transitioning to new positions using the `transition` API.

Nnifemi-sys

76% match

Loading thumbnail…

Reusable Scatter Plot

This reusable scatter plot visualizes the relationship between a person’s age and one of two scores, toggling between Score1 and Score2 every two seconds. It loads data from a local CSV file, using D3’s `scaleLinear`, `axisBottom`, `axisLeft`, and `csv` functions. The visualization is rendered as SVG circles with axes and labels, updating dynamically via a timer. It highlights the use of local ES6 modules and the D3 `select` API for chart construction.

UUVarshaReddy

76% match