my_experiment

100%

✓ Published0🌍 Public

Last edited Jan 29, 2025

Created on Jan 29, 2025

Forked from Blank Slate with Hot Reloading

This example plots two data series from a tab-separated TSV file as scatterplots and line charts. The visualization uses D3 v7 to load the data via `d3.tsv`, apply linear scales with `d3.scaleLinear`, and render green and blue circles for the `y1` and `y2` columns. Red and cyan lines, generated with `d3.line`, connect the points of each series, mapping shared x-values to the same horizontal axis.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

My local D3

This example demonstrates the fundamentals of D3 version 3 for creating interactive SVG visualizations, starting with simple data binding and circle placement before progressing to a two-series line chart. The main visualization loads tabular data from a TSV file using `d3.tsv`, then applies linear scales (`d3.scaleLinear`) to map the x and y1/y2 columns to SVG coordinates. It renders two distinct line series using `d3.line` with step and natural curve interpolation, styled with purple and blue circles, and includes axis generation via `d3.axisTop`, `d3.axisRight`, and `d3.axisLeft`. The code also shows earlier iterations using `d3.select` and `d3.selectAll` for DOM manipulation.

Mmpraveen.smart@gmail.com

76% match

Loading thumbnail…

D3 Example 2

Two datasets, `y1` and `y2`, are plotted against a shared `x` axis, showing how their values diverge over the same input range. The visualization uses a single SVG canvas with green and blue circles for each dataset, and red and black line paths connecting the points. Built with D3 v7, it loads tab-separated data from `example2.tsv` using `d3.tsv`, scales both axes with `d3.scaleLinear`, and computes the line paths with `d3.line`. The layout positions axes within a 700×400 pixel light-gray SVG.

OOleJRask

75% match

Loading thumbnail…

Basic Chart, simple dataset

This example displays two overlaid line charts, each plotting a distinct series from a tab-separated dataset against the same x-axis. The visualization uses D3 v5 to load data via `d3.tsv`, applies linear scales (`d3.scaleLinear`) to map x and y values, and renders the series as both green and steel-blue circles and connected paths using `d3.line`. The SVG output is transformed by a 25-pixel offset, while the dataset contains paired y-values across nine x-points.

NNoWizards

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

70% match

Loading thumbnail…

d3.tsv

This example demonstrates loading and plotting tab-separated values from an external TSV file using the D3.js library. The chart displays five data points as circles on a simple scatterplot, with linear scales mapping x and y coordinates to SVG positions. The code uses the `d3.tsv` method to fetch and parse the file, then converts string values to numbers with the unary plus operator. Axes are rendered via `d3.svg.axis`, and the SVG circles are appended with the `.point` class, showing basic data parsing and visualization in a minimal setup.

Mmbostock

70% match

Loading thumbnail…

D3 Example 2B

This visualization compares two datasets, y1 and y2, sharing the same x-axis from a tab-separated TSV file. It renders both series as SVG circles and paths using distinct color schemes: y1 appears in green and black, while y2 uses red and blue. The chart applies two curve interpolation methods, `d3.curveStep` for y1 and `d3.curveNatural` for y2, to show different line shapes. Axes are generated with `d3.axisTop`, `d3.axisLeft`, and `d3.axisRight` using linear scales created via `d3.scaleLinear` with `d3.extent` and `.nice()` for domain calculation.

OOleJRask

70% match

Loading thumbnail…

D3 Example 1

This example plots five red circles on a light grey SVG canvas, with each circle’s position determined by x and y coordinates loaded from a tab-separated values file (`example1.tsv`). The visualization uses D3 v7, fetching the data via `d3.tsv()` and binding it to circle elements through `selectAll().data().enter().append()`. The circles are styled with fixed radius and fill color, while their `cx` and `cy` attributes are set directly from the data values, producing a simple scatterplot without any scales or axes.

OOleJRask

69% match

Loading thumbnail…

P0: Experiment Data

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`.

Zzihelian

68% match