Skip to main content
SimilarExport ZIP
100%

charts

✓ Published0🌍 Public
MManeesh Kumar
Last edited Oct 20, 2025
Created on Oct 20, 2025
Forked from D3 Starter

This example combines a bar chart and a line chart in a single SVG to compare daily totals with the average of three component values. Light blue bars represent the total sum of fields A, B, and C, while a purple line traces the daily average across the same time period. The chart uses dual y-axes, with left labels for totals and right labels for averages, and a time-based x-axis showing date ranges. It is built with d3.v7, loading data from a CSV file via `d3.csv` and `d3.autoType`, then rendering using `d3.scaleBand`, `d3.scaleTime`, `d3.scaleLinear`, and `d3.line` with SVG output.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

charts

This example visualizes monthly sales trends from a CSV data source, comparing three product lines from 2019 to 2023. It shows a multi-series line chart with time-scale axes, using D3 v7 and SVG rendering. The code loads data with `d3.csv`, maps dates via `d3.timeParse`, and draws lines with `d3.line`, alongside a legend and axis labels. The second part combines a bar chart for total sales with an overlaid line for average price, using a dual y-axis scale.

MManeesh Kumar
78% match
Loading thumbnail…

Bar and Line chart

This example presents two SVG charts created with D3.js (v7). The top panel is a multi-series line chart rendering three synthetic variables (VarA, VarB, VarC) across 150 samples, with each series distinguished by color and a legend. The bottom panel combines a bar chart with a line overlay for the same random dataset, using a band scale for the x-axis and a linear scale for the y-axis. Both charts employ D3's axis, line, and scale APIs alongside standard SVG elements.

Sson.sultan@yahoo.com
77% match
Loading thumbnail…

multi charts

This example presents two SVG charts built with D3.js v7, both visualizing daily sales trends for three series (A, B, C) from `sales_trends.csv`. The top chart displays multi-series line plots, while the bottom combines bars for series A and B with an overlaid line for series C. The code uses `d3.csv` with `d3.autoType` for data loading, `d3.scaleTime` and `d3.scaleLinear` for axes, and renders interactive tooltips styled via CSS.

MManeesh Kumar
77% match
Loading thumbnail…

Basic bar+line chart

This chart combines a bar chart and a line chart in a single SVG visualization, with bars representing one data series and a line overlaid for a second series. It is built as a reusable template driven by a CSV file, where column names for the x-axis, bar values, and line values are configured in the code. The x-axis uses a band scale for categorical years, while the y-axis is linear and shared by both series. Blue bars show the primary values, and a green line connects the secondary values, with a legend distinguishing the two. The chart includes axis labels, a title, and a hover effect on the bars.

EEleonore9
76% match
Loading thumbnail…

Fork of multi charts

This example presents two SVG charts built with D3 v7, visualizing 180 days of daily sales data for three series (A, B, and C) from `sales_trends.csv`. The top chart is a multi-series line chart showing trends for all three series over time. The bottom chart combines bars for series A and B with a line for series C, using a dual-scale approach. The code relies on `d3.csv` for data loading, `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.axisBottom`/`d3.axisLeft` for rendering.

MManeesh Kumar
75% match
Loading thumbnail…

Task 3

This example shows a multi-series line chart comparing sales_A, sales_B, and sales_C over 20 time points, followed by a combined chart that overlays sales_A as bars on the left axis and sales_B as a line on the right axis. Both charts use D3 v7 with SVG rendering. The line chart applies d3.line, d3.scaleLinear, and d3.schemeCategory10 for color encoding, while the combined chart uses d3.scaleBand with axisLeft and axisRight for dual y-axes. Data is loaded from a local CSV file using d3.csv with d3.autoType.

SSai Charan
75% match
Loading thumbnail…

ice 6 (bar+line)

This visualization combines a time-series line chart with a monthly bar overlay, showing three metrics (metric_A, metric_B, metric_C) over time alongside the monthly average of metric_A as semi-transparent blue bars. The code uses d3.csv and d3.rollup to aggregate the data, with d3.scaleTime, d3.scaleLinear, and d3.scaleBand for positioning, and d3.line for the trend lines. The SVG is rendered with an axis on the bottom and left, a legend on the right, and a light blue bar fill at 50% opacity. The source data is loaded from a GitHub Gist as a multiseries CSV.

Kkmuktha09@gmail.com
74% 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)
74% match