D3 Example 2B

100%

✓ Published1🌍 Public

Last edited Aug 26, 2021

Created on Aug 26, 2021

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.

AI-generated description

MIT Licensed

Similar vizzes

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

90% match

Loading thumbnail…

multiple lines better func

Two line charts compare the y1 and y2 series against a shared x-axis, with green step curves and red natural curves drawn via d3.line and distinct curve interpolators. Each series has its own left and right y-axis scales created with d3.scaleLinear and d3.axisLeft/axisRight, while a third band axis lists operation labels from example.tsv, rotated for readability. The visualization uses d3.tsv to load the tab-separated data and renders SVG circles and paths for each point. Axis ticks for operations are staggered using the scaleBand step.

NNoWizards

79% match

Loading thumbnail…

RSA

The visualization plots two series from a tab-separated dataset, example2.tsv, using d3.tsv to load the data. A green step-curve and red natural-curve line chart display the y1 and y2 values against the shared x-axis, each with circular point markers. The SVG rendering uses d3.scaleLinear, d3.line with d3.curveStep and d3.curveNatural, and d3.axisTop, d3.axisLeft, and d3.axisRight for separate scales. Two overlaid groups handle the series, with custom stroke and fill colors distinguishing them.

OOleJRask

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

75% match

Loading thumbnail…

Scatterplot with Multiple Series

This scatterplot displays two series, y1 and y2, as colored dots plotted against a shared x-axis, with each series distinguished by a different fill color from a categorical scale. The data is loaded from a CSV file using d3.csv, and the script dynamically extracts series names by filtering the CSV columns. Scales are set with d3.scale.linear, and axes are rendered via d3.svg.axis. Points are drawn as SVG circles, grouped into series containers, with coordinates mapped through the x and y scales. The visualization relies on D3 v3 and SVG rendering.

Mmbostock

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

74% match

Loading thumbnail…

D3: Linked charts

Two linked bar charts share the same dataset, visualizing grades and a second variable. Each chart uses its own linear scale and axis, while a single ordinal scale positions the bars. Animated transitions and sort buttons let users reorder the bars by ascending or descending values. The example demonstrates how to link two D3.js SVG visualizations built from the same data, enabling interactive comparison.

AAdlopez2016

71% match

Loading thumbnail…

v5 curve interpolation comparison

This visualization compares eight D3 v5 curve interpolation methods by rendering the same time-series dataset (Apple stock prices from April and May 2012) as distinct colored lines. Each curve—including curveLinear, curveStep, curveBasis, and curveCardinal—is drawn as an SVG path with a shared date-time x-axis and linear y-axis, plus an overlaid scatterplot of the original data points. Clicking a legend label toggles the corresponding line’s opacity with a 100-millisecond transition. The code uses d3.line(), d3.scaleTime(), d3.scaleOrdinal(), color legend, and d3.axisBottom/Left.

Dd3noob

71% match