Saiteja_ICE_6_Combined Chart (Bar + Line)

100%

Saiteja_ICE_6_Combined Chart (Bar + Line)

✓ Published1🌍 Public

Last edited Mar 7, 2026

Created on Mar 7, 2026

This combined bar and line chart displays monthly average notifications as light-blue bars on a left axis, with the average productivity score overlaid as an orange line on a right axis, facilitating comparison between the two metrics across time. The visualization aggregates daily records from a digital usage dataset by month using `d3.rollup` and `d3.timeMonth.floor`, then renders the result in SVG with D3 v7’s `scaleBand`, `scaleLinear`, `axisLeft`, and `line` generator.

AI-generated description

This visualization combines bars for average notifications and a line for productivity score across months. The dual-axis design makes it easier to compare notification frequency with productivity trends over time.

MIT Licensed

Similar vizzes

Loading thumbnail…

Saiteja_ICE_6_Line Chart

This multi-series line chart displays monthly trends in screen time, sleep hours, and productivity by aggregating daily records from the digital usage dataset into monthly averages. Three colored lines, generated with d3.line and scaled using d3.scaleTime and d3.scaleLinear, allow direct comparison of how these behavioral metrics change over time. The SVG chart includes gridlines, labeled axes, a legend, and uses d3.rollup to compute monthly means from the CSV data before rendering.

Ssaitejak1619@gmail.com

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

78% match

Loading thumbnail…

ice 6 combined

This combined bar-and-line chart displays monthly sales and profit trends using a sampled subset of the CSV data. Bar heights represent sales figures, while a red line with circular markers overlays profit values on the same axes. Built with D3 v7, the visualization uses `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the y-axis, and `d3.line` to generate the profit path, with points rendered as SVG circles.

GGuntupalli Mohan kalyan

76% match

Loading thumbnail…

ICE_7_Line Chart

This line chart visualizes monthly average screen time from a digital usage dataset, with each point representing the mean daily screen time for that month. The chart includes labeled axes, styled tick marks, and hover tooltips for data inspection. Built with D3 v7, it loads data from a CSV file, parses dates with `d3.timeParse`, groups entries by month using `d3.rollup`, and renders axes via `d3.axisBottom` and `d3.axisLeft`. An SVG canvas with a white background and drop shadow presents the final visualization.

Ssaitejak1619@gmail.com

76% match

Loading thumbnail…

ICE6_Combined_Bar_Line

This combined chart displays 150 months of coffee sales as blue bars on a left y-axis, overlaid with customer counts as a red line on a right y-axis, using two independent linear scales. The visualization also includes grid lines, axis labels, a legend, and circular data points along the customer line for precise value reading. Built with React and D3 v7, the chart renders as SVG, reads data from a CSV file via d3.csv, and constructs the bar and line elements using d3.scaleBand, d3.scaleLinear, d3.axisLeft, d3.axisRight, and d3.line.

AAddiga Himesh Chander

76% match

Loading thumbnail…

Saiteja_ICE5

This visualization summarizes a 150-row CSV dataset of simulated digital behavior records, showing key performance indicators like average app usage time and sleep hours in a left-hand card. An adjacent SVG bar chart, built with D3.js v7, displays the distribution of social media platforms using aggregated frequency counts. The page loads the remote CSV via JavaScript’s `fetch()`, parses it with `d3.csvParse`, and computes rollups with `d3.rollups`. A scrollable preview table shows the first eight rows to verify parsing.

Ssaitejak1619@gmail.com

75% match

Loading thumbnail…

ICE6-combinedchart

This combined chart displays sales as steelblue bars and profit as a red line across 28 days, using a band scale for the x-axis and a linear scale for the y-axis. The code loads CSV data via `d3.csv`, converts numeric fields with unary plus operators, and renders the visualization with SVG. It constructs the bar layer with `selectAll('rect')` and the line path using `d3.line`, then adds axes through `d3.axisBottom` and `d3.axisLeft`. The chart highlights the relationship between daily sales volume and profit trends.

HHariniPotla@my.unt.edu

75% match

Loading thumbnail…

ice6

A multi-series combined chart displays three time-based metrics (metric_A, metric_B, metric_C) as smooth lines alongside vertical bars representing monthly averages of metric_B. The SVG visualization uses D3 v7 with d3.csv for data loading, d3.scaleTime and d3.scaleLinear for axes, d3.rollups for monthly aggregation, and d3.line with curveMonotoneX for line generation. Gridlines and a legend support the view, with data sourced from a remote CSV file.

Kkmuktha09@gmail.com

74% match