Skip to main content
SimilarExport ZIP
100%

ICE-6 Bar Chart

✓ Published0🌍 Public
Jjanisha30gowda@gmail.com
Last edited Oct 20, 2025
Created on Oct 16, 2025
Forked from D3 Starter

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

ICE6-BAR graph fork Yashwanth with D3.js

This bar chart visualizes average temperatures for multiple cities, with each city represented by a blue rectangle and the y-axis encoding temperature values. The visualization uses D3.js v5 scales (scaleBand for the x-axis, scaleLinear for the y-axis) alongside React hooks to manage CSV data loading and rendering. Axes are generated using d3.axisBottom and d3.axisLeft, while the temperature data is loaded from a remote CSV file. The chart includes labeled axes for "Cities" and "Temperature," with a 10-unit headroom added to the y-axis maximum for visual spacing.

YYashwanth0311
82% match
Loading thumbnail…

temperature_data.csv

This bar chart displays the average annual temperature for numerous U.S. cities, with each bar’s height corresponding to the temperature in degrees Celsius. Built with the D3.js library using `d3.scaleBand` and `d3.scaleLinear`, the visualization renders as SVG on a light background. It reads the `temperature_data.csv` file, parses the numeric temperature values, and draws the bars, axes, and a rotated x-axis label list using D3's modular APIs. The chart’s title and axis labels are added as SVG text elements.

RRuthvik Bairaboina
82% match
Loading thumbnail…

Ice 6 bar

A bar chart visualizes population counts for a list of cities, with each bar's height proportional to its population value. The chart uses an SVG renderer with D3 v7 to load CSV data, construct linear and band scales, and draw grid lines, axes, and labeled tooltips via appended `title` elements. Axis ticks are filtered to show every tenth city, and city labels are rotated for readability.

HHarshithaDontha@my.unt.edu
82% match
Loading thumbnail…

ICE-6 Multi-Series Chart

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.

Jjanisha30gowda@gmail.com
81% match
Loading thumbnail…

ICE6 Q1-BarChart

This bar chart visualizes average annual rainfall in millimeters for over 100 cities worldwide, using data loaded from an external CSV file. Each city’s rainfall value is represented by a green bar, with axes labeled and rotated city names for readability. The visualization is built with D3 v7, employing `d3.scaleBand`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft` to render the SVG chart, while mouse hover changes bar color to orange.

Aakshayamsgrad@gmail.com
81% match
Loading thumbnail…

1Q_SDV_Assgnmt6

A bar chart displays the average annual temperatures of U.S. cities in degrees Celsius, sourced from a local CSV file. The chart uses a vertical bar for each city, with the y-axis representing temperature and the x-axis showing city names, which are rotated for readability. Built with D3 v7, the visualization employs `scaleBand` and `scaleLinear` to map data, `selectAll` to create SVG rectangles, and `axisBottom` with filtered tick values to manage crowded labels. The chart includes a title, axis labels, and a light gray background.

RRuthvik Bairaboina
80% match
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
79% match
Loading thumbnail…

Diverging Bar Chart of Temperatures

This diverging bar chart displays average December 2016 temperatures for various station cities, with each horizontal bar extending left or right from a central zero axis to show below- or above-freezing values. The bars are colored using a sequential red-blue interpolator (`d3.scaleSequential` with `d3.interpolateRdBu`), ranging from blue for cold to red for warm temperatures. The visualization loads weather data via `d3.csv` and renders as SVG, using `d3.scaleBand` for the city axis, `d3.axisBottom`, `d3.axisLeft`, and `d3.axisRight` for ticks, and the external `d3.legend` library’s `d3.legendColor` for a color scale legend. Hovering over a bar turns it red.

AAllen Ho
79% match