Multi-Series Line Chart With Two Y-axis

100%

Multi-Series Line Chart With Two Y-axis

✓ Published0🌍 Public

Last edited Oct 10, 2018

Created on Oct 10, 2018

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.

AI-generated description

forked from <a href='http://bl.ocks.org/ChandrakantThakkarDigiCorp/'>ChandrakantThakkarDigiCorp</a>'s block: <a href='http://bl.ocks.org/ChandrakantThakkarDigiCorp/37e35956f91cad360c222ce7a110f589'>Multi-Series Line Chart With Two Y-axis</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Multi-Series Line Chart With Two Y-axis

A multi-series line chart compares Product A and Product B sales over dates in September 2017, using two separate y-axes to accommodate their differing scales. The chart renders with SVG, animates on window resize, and includes a legend and tooltip. It is built with D3 v4, using `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, and `d3.axisBottom`/`d3.axisLeft`, alongside jQuery for DOM manipulation. Data comes from a static JavaScript array with daily sales figures.

CChandrakantThakkarDigiCorp

94% match

Loading thumbnail…

Multi Line Chart

This multi-line chart displays three data series (A, B, C) over a two-week period in July–August 2019, plotting daily measurement values. Each series is rendered as a distinct colored path with different dash patterns, accompanied by end-of-line labels. The visualization uses D3 v5 with an SVG viewBox for responsive scaling, d3.scaleTime and d3.scaleLinear for axes, d3.line with default curve interpolation for paths, and d3.axisLeft/axisBottom for gridlines. Data comes from an inline CSV file.

Nneetusingla12(Neetu Singla)

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

76% match

Loading thumbnail…

MultiSeries Line Chart

This example shows a multiseries line chart tracking two series of random weekly values over a one-year period, with a focus on interactive exploration. It includes a main time-series chart and a smaller brushing context view below it for zooming and panning. The visualization uses D3.js v3 with SVG rendering, leveraging `d3.svg.line`, `d3.svg.axis`, `d3.time.scale`, and `d3.svg.brush`. Data is generated randomly in the browser and rendered with animation support. The chart also includes a legend and mouse-tracker for hovering, though the code does not implement the hover interaction beyond the tracker rectangle.

663anp3ca

75% match

Loading thumbnail…

Multiple Line Chart with ToolTip

This example presents a multiple line chart that tracks sales quantity, total revenue, and total profit across four daily time periods (morning, noon, evening, late night). It uses React with D3 v4 to render an SVG visualization where each metric is drawn as a separate colored line. A hover interaction with an overlay rectangle and a vertical dashed line enables tooltips, displaying precise values for each data point at the cursor position. The chart uses d3.axisBottom and d3.axisLeft for scales, plus d3.bisect for date lookup, with data embedded directly in the JavaScript.

Wwusushi

75% match

Loading thumbnail…

Line Chart for sales

This line chart visualizes total sales across product categories, with the y-axis representing sales figures and the x-axis categorizing products. The chart uses D3.js v7, loading CSV data from a GitHub gist. The code converts string sales values to numbers, defines an SVG canvas, and constructs scales with `d3.scaleBand` and `d3.scaleLinear`. It renders axes via `d3.axisBottom` and `d3.axisLeft`, and draws the line using D3's `d3.line` generator, styled with a steelblue stroke. The SVG output includes labels for both axes.

Ssreeramyamini@gmail.com

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

74% match

Loading thumbnail…

Multi Line Chart

This multi-line chart shows three time series labeled Serie A, B, and C across dates in late July and early August 2019, with a y-axis labeled “Frequency.” The D3.js v5 code loads data from a CSV file, parses dates with `d3.timeParse`, and uses `d3.scaleTime` and `d3.scaleLinear` to construct axes. Lines are drawn via `d3.line` and appended as SVG paths, with distinct strokes for each series. The visualization is rendered entirely in SVG, with the final data point of each serie labeled beside the line.

JJimMaltby

74% match