Skip to main content
SimilarExport ZIP
100%

Fork of ICE6-Kumar Danam

✓ Published0🌍 Public
KKumar Danam
Last edited Oct 19, 2025
Created on Oct 19, 2025
Forked from ICE6-Kumar Danam

This fork of ICE6-Kumar Danam visualizes yearly sales performance with a dual-axis chart: blue bars represent total sales in millions of dollars on the left axis, while an orange line tracks total units sold on the right axis. It loads a remote CSV dataset and aggregates it with `d3.rollup`. The chart uses `d3.scaleBand` and `d3.scaleLinear`, rendered as SVG with `d3.axisBottom`, `d3.axisLeft`, and `d3.axisRight`, along with a legend and axis labels.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

ICE6-Kumar Danam

This visualization shows yearly sales performance, combining bar charts for total sales in millions of dollars with a line chart for total units sold. The code uses d3.rollup to aggregate the raw CSV data by year, then d3.scaleBand and two d3.scaleLinear instances create dual axes. SVG rendering displays the bars and line, with axes, labels, and a legend using d3.axisBottom, d3.axisLeft, d3.axisRight, and d3.join.

KKumar Danam
89% match
Loading thumbnail…

Fork of ICE-6(multi series)

This fork of ICE-6 combines bar and line series to compare monthly sales and profit data loaded from a CSV file. Bars encode sales values while a monotone-curved line shows profit, with both sharing a linear y-scale and band x-scale. The D3 v7 chart includes gridlines, axis labels, a legend, and interactive tooltips on bars and points. SVG rendering is used throughout, leveraging `d3.csv`, `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, `d3.line`, and event handlers for mouse and keyboard accessibility.

Vvydeeshm@gmail.com
82% match
Loading thumbnail…

Fork of ICE6 - Marks and Channels

This example shows a bar chart of sales revenue per product from January through May 2024. It uses D3 v6 with SVG rendering, loading CSV data from a GitHub gist and aggregating it with `d3.rollup` to sum revenues by product. Horizontal bars are drawn as `rect` elements with a steelblue fill that turns orange on hover, using `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis. Axes are generated with `d3.axisLeft` and `d3.axisBottom`.

Bbhargavinalamothu@gmail.com
82% match
Loading thumbnail…

Fork of ICE-7 Line Chart

This fork of an ICE-7 line chart visualizes the cost of sales from 2000 to 2013 using D3 v5. It renders an SVG line chart with time-scaled X-axis and linear Y-axis, using D3's `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` APIs. The chart loads CSV data from a GitHub gist, converts the Year field to `Date` objects, and draws a red line path via `line()`. The visualization includes labeled axes, a title, and grid lines generated through tick marks.

AAmrutha Mohan
81% match
Loading thumbnail…

Fork of ICE-7

This line chart shows sales data over time, with years on the x-axis and sales values on the y-axis, using orange strokes to highlight trends. It loads CSV data from a GitHub gist, parsing dates with `d3.timeParse` and rendering an SVG via D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` functions. Grid lines and axis labels are customized through CSS, while margins and tick padding adjust the layout.

TTulluripallavi
81% match
Loading thumbnail…

Fork of ICE-7 Line Chart

This fork of the ICE-7 line chart visualizes the cost of sales from 2000 to 2013, plotting yearly values as a single red line. It uses d3.scaleTime for the x-axis, d3.scaleLinear for the y-axis, and d3.line to generate the path, with d3.axisBottom and d3.axisLeft rendering labeled axes. The chart loads CSV data from a GitHub gist, parses the year and cost fields, and renders an SVG within a centered container. Axes include gridlines via tickSize, and the code uses D3 v5.

Nnsatyaprakash22
81% match
Loading thumbnail…

Fork of Fork of ICE-7

This example displays a line chart of sales data over time, with the x-axis representing years and the y-axis representing sales figures. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` APIs to build the axes, while a `line` generator creates the orange stroke path. Data is loaded from a CSV file hosted on GitHub Gist, and the year values are parsed with `d3.timeParse` to format them as dates. The SVG rendering includes custom axis labels and styled tick marks.

TTulluripallavi
81% match
Loading thumbnail…

Fork of ICE-7 Line Chart

This fork of ICE-7 Line Chart visualizes the cost of sales from 2000 to 2013 using an SVG line chart. The chart plots year-based data on the x-axis against cost values on the y-axis, with axis labels and a title displayed directly. Data is loaded from a CSV file via `d3.csv`, and the visualization is built with D3 v5, using `scaleTime`, `scaleLinear`, `line`, `axisBottom`, and `axisLeft` to construct the scales, path, and axes. The final rendering is a red stroke line path within a 960x500 SVG container.

Bbhanuteja1807@gmail.com
80% match