Map

100%

✓ Published0🌍 Public

Last edited May 1, 2024

Created on May 1, 2024

A map-style scatterplot displays colored circles of varying sizes positioned over an SVG canvas, with click interactions that alert the name of each data point. Built with D3 v5, the visualization uses `selectAll` and data joins to bind an array of coordinate objects to circle elements. Local ES6 modules and D3 imports are demonstrated alongside styling via external CSS.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

MIT Licensed

Similar vizzes

Loading thumbnail…

Scatter Plot with Clickable Circles

A scatter plot displays car model data with circles plotted according to continuous axes. The visualization uses D3 v7 with a unidirectional data flow pattern, where clicking any circle highlights it by changing its fill to white and adding a black stroke, while resetting all other circles to black fills without strokes. The rendering pipeline uses D3 selectors with `.join` operations to manage SVG circles, and the interaction is implemented through mouse click event listeners that update the selected state and trigger a re-render.

BBismark Kofi Owusu Sarfo

75% match

Loading thumbnail…

Scatter Plot

A scatter plot displays individual data points positioned by two numeric variables, with each point rendered as a small circle. The visualization uses D3.js v6 and is built with a simple SVG container. The code applies the `d3.scaleLinear` function to map x- and y-values to pixel coordinates, then appends `circle` elements to the chart area. Axes are generated with `d3.axisBottom` and `d3.axisLeft`. The data is loaded from an external CSV file using `d3.csv`, and the plot updates dynamically once the data is parsed.

JJames Huang

74% match

Loading thumbnail…

D3: Drawing a Scatter Plot

This example displays a basic scatter plot of ten data points, each represented by a circle and a red text label showing its coordinates. The visualization uses D3.js v7 to append SVG circles and text elements to the document body. Circle radii are calculated as the square root of the difference between the plot height and the y-coordinate, creating a size variation tied to vertical position. The chart is drawn with a 500 by 100 pixel viewport, using the data array directly as the source for positioning.

MMarisa Tania

74% match

Loading thumbnail…

This is so cool "Map function inside Map function"

A React application renders an SVG scatterplot of 101 circles, where each circle's position and color derive from nested map functions iterating over an array of integers from 0 to 100. The outer and inner `Array.map` calls generate coordinates using `Math.random()` multiplied by the array value, producing a randomized distribution. Circle radius is fixed at 5, with fill and stroke colors computed from the index, using React's JSX syntax to create SVG elements. The code relies on React 16.10 and ReactDOM to mount the visualization into the DOM.

Ggrateful4music@hotmail.com

73% match

Loading thumbnail…

Check

This example demonstrates a scatterplot with five circles positioned on an SVG canvas, each sized according to a numerical value. The visualization is built using D3 version 7, specifically leveraging `select`, `scaleLinear`, `extent`, and the `axisLeft` and `axisBottom` helpers. The chart maps data from an inline array of objects with `xVal`, `yVal`, and `rVal` properties to positions and radii. The code uses the declarative scale functions to compute the mapping and appends the resulting circles to the SVG element, with the axes rendered at the left and bottom edges.

Fferneyhoughedward@gmail.com

73% match

Loading thumbnail…

Scatter Plot with d3.js

A scatter plot displays five sample data points with quantitative x and y values, rendered as steelblue circles. The visualization uses D3.js v6 to create an SVG chart with linear scales, axes, and labels. The code loads D3 from UNPKG, selects the chart container via `d3.select`, and builds the visualization using `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and SVG circle elements. It also demonstrates importing from an ES6 module, showing a "Hello VizHub!" message.

Aakshayvenishetty1437

73% match

Loading thumbnail…

D3: A simple scatterplot with SVG

This example shows a simple scatterplot of ten data points, each rendered as an SVG circle and labeled with its coordinates. The chart uses the D3.js library (version 3) to programmatically build the visualization: first, the code creates an SVG canvas via `d3.select` and `.append("svg")`, then uses `.selectAll("circle").data(dataset).enter()` to map the 2D array of `[x, y]` values to circle positions and radius sizes. Red text labels are added in a similar declarative manner, with font styling applied through attribute setters. The raw coordinate pairs come from a hardcoded dataset, and the circle radius is computed from the data point’s height, creating a visual encoding of magnitude.

Nnikomc

73% match

Loading thumbnail…

This is so cool "Map function inside Map function"

This example shows a dense scatter of colored circles rendered as an SVG inside a React application, where the circles overlap and vary in position and hue based on computed values. The visualization uses React’s `map` function nested twice to iterate over an array of numbers from 0 to 100, generating thousands of circle elements with random coordinates and RGB fill colors. Rendering relies on ReactDOM and raw SVG elements, with no external charting library, demonstrating how pure React can handle data-driven SVG generation.

NNita

73% match