Skip to main content
SimilarExport ZIP
100%

combined(bar + line)Assignment 6

✓ Published2🌍 Public
Ssaisowjanyaedupuganti.24f@gmail.com
Last edited Oct 19, 2025
Created on Oct 19, 2025

This visualization combines a bar chart and a line chart to show monthly climate trends for rainfall (in millimeters) and average temperature (in Celsius), using a dual-axis layout with the bars scaled to the left axis and the line to the right. The SVG rendering is built with D3 v7, leveraging `d3.scaleBand`, `d3.scaleLinear`, and the `d3.axis` utilities to construct the axes, while the line is drawn via `d3.line` appended as a path. Data is fetched from a remote CSV URL and aggregated by `Month_Index` using `d3.rollups` with mean calculations for both metrics. A legend, axis labels, and an annotation for the peak rainfall month complete the chart.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Assignment _6(Multi series chart)

This multi-series line chart visualizes monthly climate trends, comparing average temperature, rainfall, and humidity across aggregated city data. The chart uses a shared y-axis to display all three metrics, with distinct colored lines and a legend for identification. The code loads CSV data via `d3.csv`, aggregates it with `d3.rollups`, and scales axes using `d3.scaleLinear`. Lines are drawn with `d3.line` paths, while gridlines and axes are rendered using `d3.axisLeft` and `d3.axisBottom`. A highlighted circle annotates the peak temperature point.

Ssaisowjanyaedupuganti.24f@gmail.com
82% match
Loading thumbnail…

Assignment_6_Sowjanya_3

This multi-series line chart shows monthly climate trends for temperature, rainfall, and humidity from a CSV dataset, with each series color-coded via D3’s `scaleOrdinal` and `schemeSet2`. It uses the `d3.line` generator to draw three overlaid paths, and `d3.axisLeft` with negative tick sizes to create subtle gridlines. Data is aggregated by month using `d3.rollups` and `d3.mean`. A circle annotation highlights the peak temperature point, while legend and axis labels clarify the scales.

Ssaisowjanyaedupuganti.24f@gmail.com
82% match
Loading thumbnail…

Bar and Line chart

This example combines a bar chart of effective rainfall with a line and circle overlay of water level, both plotted against a shared time axis. The dual y-axes use independent linear scales, while the x-axis uses a time scale. Built with D3 v5, it renders to SVG and supports zooming via `d3.zoom`, which rescales all axes and re-renders bars, circles, and a line path generated with `d3.line`. The data is loaded from two CSV files hosted on VizHub. The chart initially displays the full dataset before user interaction.

SShane Carey
79% match
Loading thumbnail…

Bar and Line chart

This example displays a dual-axis chart combining bars for effective rainfall and a line with points for water level over time. The visualization uses two scales, time on the x-axis, and separate linear scales for the bar and line values. Panning and zooming are implemented via d3.zoom, rescaling both axes and updating the shapes. Data is loaded from two CSV files using d3.csv, and all elements are rendered as SVG.

SShane Carey
79% match
Loading thumbnail…

Assignment 6

This D3.js v7 visualization combines a bar chart of daily maximum temperatures with a monotone-smoothed line chart of mean temperatures from a 1948 weather dataset. Orange bars encode the maximum temperature values against the left y-axis, while the blue line uses the right y-axis for the mean temperature readings. The chart renders as an SVG using `d3.select`, `d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, `d3.axisRight`, and `d3.line` with `d3.curveMonotoneX`, displaying years along the bottom axis.

BBhargav Reddy
78% match
Loading thumbnail…

Bar chart

This bar chart displays monthly average temperatures, with each month on the vertical axis and temperature values extending horizontally. The chart uses an SVG canvas with pink bars, rendered using D3 version 5. The code employs `scaleLinear` for the x-axis, `scaleBand` for the categorical y-axis, and `axisLeft`/`axisBottom` for ticks, reading data from a CSV file. Months appear in order from January through December, showing a peak in May.

RRichard Wong
77% 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
77% match
Loading thumbnail…

Assignment-2-2

This visualization displays monthly average temperatures as a filled area chart, with temperature values plotted along the y-axis and months along the x-axis. The chart uses a steelblue fill to represent the temperature trend across the year. Built with D3.js, it imports data from a remote CSV file and leverages `scaleBand`, `scaleLinear`, and `area` to generate the geometry. The code employs `axisBottom` and `axisLeft` for the coordinate axes, with labels for "Month" and "Average Temperature (°C)". The SVG output is configured to fill the browser viewport.

Hhkodiripaka15@gmail.com
76% match