RSA

100%

✓ Published0🌍 Public

Last edited Aug 27, 2021

Created on Aug 27, 2021

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.

AI-generated description

MIT Licensed

Similar vizzes

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

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

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

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

70% match

Loading thumbnail…

Linechart2

This example shows multiple time series as colored lines, with each line representing a distinct category tracked over time on a shared axis. It uses D3 v6 to load a CSV dataset with `d3.csv`, group the data by category with `d3.group`, and render the lines with the `d3.line` generator. The visualization sets up a linear x-axis for years and a y-axis for values, applying a categorical color scale via `d3.scaleOrdinal`. The SVG is appended to a `div` container with explicit margins and dimensions, and axes are drawn using `d3.axisBottom` and `d3.axisLeft`.

Nnicolekevans

69% match

Loading thumbnail…

rvsales2

The visualization tracks recreational vehicle shipments and retail sales from 2008 to 2017, showing two overlaid line charts with a dual-axis design. It uses d3.v4 with SVG and animation, employing `d3.line` with curveBasis for smooth paths and `d3.scaleTime` for the x-axis. Two white curtain rectangles animate away sequentially to reveal the data, while axes use `d3.axisBottom` and `d3.axisRight` for the respective scales. The dataset comes from a CSV file containing yearly shipment and retail figures.

335degrees

69% match

Loading thumbnail…

d3 yoga

The visualization displays a small dataset of six numeric values using three overlaid chart types: circles sized by radius, vertical bars, and a line path. It shows how the same values can be represented through different encodings. The code uses d3.v4 with SVG for the circles and line, and HTML div elements positioned absolutely for the bars. Linear scales map the data domain to pixel ranges for radius, bar height, and line y-coordinates. The data is hardcoded as an array in the script, with no external source. The SVG and divs are both rendered on the same page, creating a combined view.

FFlameFuel

68% match

Loading thumbnail…

Untitled

This time series displays data points over a date range, using a blue-to-red vertical gradient to encode value magnitude along the line. The visualization reads a comma-separated dataset from an external URL and parses dates with `d3.timeParse`. It constructs an SVG line chart, computing scales with `d3.scaleTime` and `d3.scaleLinear`, and renders axes via `d3.axisBottom` and `d3.axisLeft`. A `linearGradient` element is defined and applied as the stroke, with the path generated by `d3.line`.

Ggabrielribeirob

68% match