multiple lines better func

100%

multiple lines better func

✓ Published2🌍 Public

Last edited Mar 18, 2020

Created on Mar 14, 2020

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.

AI-generated description

Bar chart to display population data of most populated countries in the world United Nations: world population prospects 2017 page.

MIT Licensed

Similar vizzes

Loading thumbnail…

multiple lines better func

This interactive chart compares two series of operational data over time using multiple lines, each with a distinct curve fitting method. The visualization uses `d3.tsv` to load the dataset and `d3.scaleLinear` for axes, with `d3.line` and `d3.curveStep` and `d3.curveNatural` to render the lines, while circles mark each data point. It also includes a categorical x-axis for operation types via `d3.scaleBand`. The chart is rendered as an SVG, sourced from the example.tsv file.

RRambo-chan

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

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

77% match

Loading thumbnail…

Multiple line graph in v7

This example displays two line graphs on a shared time-based x-axis, comparing the open and close prices from a small CSV dataset over a three-month period. The close price is shown as a steelblue line, while the open price appears in red, with both axes scaled to fit the data. The visualization uses d3.line and d3.scaleTime to map data points, d3.axisBottom and d3.axisLeft to render the axes, and d3.csv to load the data. The SVG output includes two separate path elements styled with CSS classes.

Dd3noob

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

76% match

Loading thumbnail…

Multi-Series Line Chart With Two Y-axis

This example shows a multi-series line chart comparing daily sales for two products, Product A and Product B, over a period in September 2017. The chart uses two y-axes to accommodate the different scales of the two series, with the left axis for Product A sales and the right axis for Product B sales. The data is loaded from an embedded JavaScript array and bound to SVG paths, with D3 v4 handling the scales, axes, and line generation. A tooltip provides on-hover details about the batch ID, product name, and sales values. The visualization is rendered with SVG and includes a resize listener to adapt the chart dimensions to the window. The color scheme distinguishes the two series (red for Product A, green for Product B), and the chart is designed to be responsive within its container.This multi-series line chart compares daily sales for two products using dual y-axes to handle their different scales. Product A sales (red line) are plotted against the left axis, while Product B sales (green line) use the right axis. The x-axis displays dates over a three-week period in September 2017. Built with D3 v4 and rendered as SVG, the chart includes a legend, axis labels, and an interactive tooltip that appears on hover to display the batch ID and sales values. The visualization also supports window resizing, and its clean, dual-axis design makes it easy to compare the trends of the two product lines despite their differing magnitudes.

663anp3ca

76% match

Loading thumbnail…

d3.js line graph with dual Y axes

This example shows two time-series lines—one for closing values and one for opening values—plotted against a shared time axis but with separate y scales on the left and right sides. The SVG graphic uses D3.js version 3.5.17 with `d3.time.scale`, `d3.scale.linear`, and `d3.svg.axis` to render the axes and lines, while `d3.csv` loads the date-stamped data from a local CSV file. The left axis and blue line correspond to the close column, and the right axis and red line correspond to the open column, making it easy to compare trends across different value ranges.

Dd3noob

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

75% match