P0: Experiment Data

100%

P0: Experiment Data

✓ Published0🌍 Public

Last edited Jan 20, 2021

Created on Jan 20, 2021

This example visualizes experimental trial data as a scatterplot, plotting accuracy against trial number. Each circle represents a single trial, with semi-transparent steelblue fills that highlight overlapping points. The visualization uses D3 v6 to load CSV data asynchronously and build an SVG chart with linear scales for both axes. It includes gridlines generated by axis tick marks, with axes customized to remove their domain lines. The code constructs scales via `d3.scaleLinear`, applies margins for the plot area, and renders axes using `d3.axisBottom` and `d3.axisLeft`.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

P0

This visualization displays the accuracy of repeated trials across four distinct trial groups, with each circle representing a single trial’s accuracy score. The x-axis maps accuracy values from 0 to 1 using d3.scaleLinear, while the y-axis uses d3.scalePoint to evenly space the trial categories. The chart renders as an SVG using D3 v5, with circles styled in steelblue and opacity 0.25 to show overlapping data points. Data is loaded from a CSV file using d3.csv. Axis ticks are customized using d3.axisBottom and d3.axisLeft, with the domain lines removed for a cleaner appearance.

JJames Gong

84% match

Loading thumbnail…

Trial

This example visualizes monthly revenue and profit from a JSON dataset as grouped bar charts, with revenue in tomato-colored bars and profit in green. It uses D3 v5 scales (scaleBand, scaleLinear) to position and size rectangles within an SVG. Axis labels and a legend are manually added. Data is loaded asynchronously and parsed from strings to numbers.

DdeafMother

72% match

Loading thumbnail…

D3 Experiment

A scatterplot of 20 fictional student marks displays each value as a pink dot, positioned with its value as both horizontal and vertical offset in viewport units, alongside a red underlined title. The example uses D3 v7 selection and join APIs, specifically `d3.select` and `d3.selectAll` with `.data()` and `.join()` to create and bind the data, then appends an SVG circle for each point. Data is hardcoded as an array in the script, and rendering uses SVG elements with absolute positioning.

YYiorgos Bagakis

71% match

Loading thumbnail…

another trial

This example demonstrates a grid of D3.js circles arranged along linear X and Y scales, alongside static circular SVG shapes. It uses React for DOM management and D3 version 6 to generate circles programmatically via `d3.range` and the `select` API. The visualization also constructs pie chart arc data using `d3.pie` on a custom `pieData` array, though the final rendering of these arcs is not completed in the provided code. The SVG canvas is fixed at 960 by 500 pixels, with blue filled circles as the primary geometric elements.

Mmauricio-acosta-reyes

71% match

Loading thumbnail…

Plot

This scatter plot visualizes the relationship between X and Y values across multiple datasets. The visualization uses color coding to distinguish different datasets, with circles rendered at low opacity to reveal overlapping points. Users can click a legend item to highlight a specific dataset's points at higher opacity, and double-click to reset the view. The plot also supports zooming via the d3.zoom API. Data is loaded from CSV files and rendered as SVG circles using D3 v5 within a React framework. The axes include gridlines and formatted tick labels.

Eendlesstory

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

70% match

Loading thumbnail…

Scatter Trial

This animated scatter plot compares monthly revenue and profit figures from a small JSON dataset. Two overlapping SVG circle groups represent the same months, with a toggle switching the y-axis between revenue and profit every two seconds. The visualization uses D3.js v5 scales, axes, and transitions with enter/exit animations as data points shrink or disappear. React serves as the framework, with SVG elements and animation handling via D3's transition API.

DdeafMother

69% match

Loading thumbnail…

Scatter Plot Example

This scatter plot visualizes a dataset of x and y coordinates as colored points on a linear scale. The code uses D3.js v6 to create an SVG rendering with x and y axes, and colors each circle based on its index. The visualization demonstrates basic scatter plot construction with d3.scaleLinear for mapping data values to screen coordinates, and d3.axisBottom and d3.axisLeft for displaying the axes. Labels are added to both axes to indicate the plotted dimensions.

BBhavanaGIrni

69% match