Skip to main content
SimilarExport ZIP
100%

ICE-6 Multi-Series Chart

✓ Published1🌍 Public
Jjanisha30gowda@gmail.com
Last edited Oct 16, 2025
Created on Oct 16, 2025
Forked from HTML Starter

Two SVG charts display monthly weather data for multiple U.S. cities from `city_temps.csv`. The multi-series line chart draws separate lines for temperature, rainfall, and humidity per city using `d3.line`, `d3.scaleLinear`, and `d3.scaleOrdinal`. A combined chart juxtaposes Dallas rainfall as bars with a temperature line on the same axes, using `d3.scaleBand` and `d3.axisBottom`. Both charts use SVG rendering with D3 v7 selection and data-binding APIs.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

ICE-6 Multi-Series and Combined Chart

This example presents two D3.js v7 charts built with SVG, using data from a city_temps.csv file. The first is a multi-series line chart for Dallas showing monthly Temperature, Rainfall, and Humidity trends with distinct colored lines and a legend. The second is a combined chart overlaying steelblue bars for rainfall with a tomato-colored line for temperature, using a band scale for months and a linear scale for values. Both charts utilize d3.csv, d3.line, d3.scaleLinear, d3.scaleBand, d3.axisBottom, d3.axisLeft, and D3 selections to render the visualizations.

Jjanisha30gowda@gmail.com
93% match
Loading thumbnail…

ICE-6 Bar Chart

This bar chart visualizes the average annual temperature across several U.S. cities, derived from monthly city_temperature.csv data. Each bar represents one city, with heights mapped to the mean of its recorded monthly temperatures. Built with D3 v7, the SVG chart uses d3.rollup and d3.mean to aggregate monthly values per city, d3.scaleBand and d3.scaleLinear for positioning, and includes interactive hover tooltips that display the exact average temperature while highlighting the bar. Axis labels and rotated city names aid readability.

Jjanisha30gowda@gmail.com
81% match
Loading thumbnail…

Reusable Line Chart – ICE7

This reusable line chart visualizes average monthly temperatures in Dallas from 2015 to 2023, with each year’s temperature trend shown as a smooth, monotone curve. The chart uses D3 v7’s `d3.line()` with `curveMonotoneX` to generate the SVG path, along with `scaleLinear` for both axes. Gridlines are added via custom axis ticks, and the y-axis uses a fixed domain of 500 million to 1.5 billion, reflecting the dataset’s population values. The code reads from a CSV file and renders the visualization as an SVG element with a white background and shadow styling.

Jjanisha30gowda@gmail.com
79% match
Loading thumbnail…

Reusable Line Chart - Dallas Temperature (ICE7)

This example displays the average yearly temperature in Dallas from 2015 to 2023, drawing a single smooth line that reveals the overall warming trend across nine years. The visualization is built with D3 v7, using `d3.csv` to load the monthly temperature data, `d3.rollup` to group records by year and calculate the mean, and `d3.line` with `curveMonotoneX` to render the SVG path. Gridlines are generated with `d3.axisBottom` and `d3.axisLeft`, and the chart is presented on a 900×500 SVG canvas with labeled axes and a bold title.

Jjanisha30gowda@gmail.com
79% match
Loading thumbnail…

Q3_Ice6

This visualization presents daily weather data through two D3.js v7 SVG charts: a multi-series line chart and a combined chart. It uses `d3.csv` to load data, `d3.rollups` with `d3.mean` to aggregate values by date, and `d3.line` with a monotone curve to render temperature, humidity, and rainfall trends over time. The line chart includes gridlines, axes, and a legend, while the second chart combines multiple mark types. Data is sourced from a remote CSV file containing date, temperature, humidity, rainfall, and wind speed columns.

SSaiSriSuryaBandaru@my.unt.edu
79% match
Loading thumbnail…

Reusable Area Chart – ICE7

This example visualizes the average yearly temperature in Dallas from 2015 to 2023, transforming a CSV file of monthly readings into a single trend line with a shaded area beneath it. The chart uses a monotone cubic interpolation curve to emphasize the gradual yearly shifts in climate data. The code relies on D3 v7 APIs such as `d3.scaleLinear`, `d3.area`, `d3.rollup`, `d3.curveMonotoneX`, and `d3.axisBottom` to construct the scalable vector graphic (SVG), which includes a steelblue fill, gridlines, and labeled axes for temperature and year.

Jjanisha30gowda@gmail.com
78% match
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
78% match
Loading thumbnail…

Multi-line Chart

This multi-line chart displays monthly average temperatures (in °F) for four U.S. cities—New York, Los Angeles, Chicago, and Houston—using a distinct colored line for each, plus tooltips on hover. The D3 v7 code loads and parses a CSV dataset from a GitHub gist, then renders the lines and interactive circles as SVG within a React-compatible HTML page. The chart uses linear scaling for the y-axis (10–90°F) and a band scale for months, with user interactions handled directly via mouseover events.

AArun
77% match