Skip to main content
SimilarExport ZIP
100%

Activity 7_q2

✓ Published1🌍 Public
Ssuhaibuddinahmed10@gmail.com
Last edited Dec 1, 2024
Created on Nov 2, 2024
Forked from Activity 7

This grouped bar chart compares three severe weather types—hail, tornadoes, and winds—by aggregating four damage metrics: property damage, crop loss, injuries, and fatalities. The data loads from three separate Google Drive CSV files and sums each metric per weather category. Built with d3.v7, it uses nested band scales (x0 for categories, x1 for sub-bars) and a linear y-scale, rendering SVG rectangles colored via `d3.schemeCategory10`. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, with a responsive margin-based layout.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

final_iter

A grouped bar chart compares annual totals for Hail, Tornadoes, and Winds across four damage categories: property loss, crop loss, injuries, and fatalities. It aggregates CSV data from three separate Google Drive sources, summing each metric per event type. The visualization uses D3.js version 6’s `scaleBand` for the categorical axes and `scaleLinear` for the value axis, rendering four distinct colored bars per group via SVG rectangles. An ordinal color scale maps each category, with legends and axis labels generated using `d3.axisBottom` and `d3.axisLeft`.

Ssuhaibuddinahmed10@gmail.com
83% match
Loading thumbnail…

2010

This horizontal bar chart shows the frequency of tornadoes per month in 2010, sourced from a local CSV file. It uses D3 v5 with SVG rendering, employing `scaleLinear` for the x-axis and `scaleBand` for the y-axis to position bars. The axes are customized with `axisBottom` and `axisLeft`, including a tick format that abbreviates large numbers, while gridlines and axis labels are manually styled.

Vvaideheeshah13
72% match
Loading thumbnail…

Activity6_Question 3

This stacked bar chart visualizes the distribution of fruit ratings across six categories, from “below 4.0” to “above 8.0.” Each horizontal bar represents a fruit, with segments colored by rating category and proportional widths indicating percentages. Built with D3 v7, the example uses `d3.stack()` for data transformation, `d3.scaleBand` for the y-axis, and `d3.scaleLinear` for the x-axis. It loads CSV data from a local file, renders SVG, and adds interactive tooltips on mouseover, styled with CSS.

Kkartheekgrpt@gmail.com
71% match
Loading thumbnail…

Activity 7_Q2

This example displays monthly average temperatures as a smooth area chart, with the area fill and line colored green and each data point labeled with its value in degrees Celsius. It loads CSV data from a GitHub gist and renders an SVG visualization using D3 v5, applying `scaleBand` and `scaleLinear` for the axes, `area` to generate the area path, and `axisBottom`/`axisLeft` for the titled axes. The code uses `select`, `csv`, `max`, and the `join` method to add text labels for peaks and troughs.

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

A7 - Small Multiples in D3

This example uses small multiples to display the frequency of Atlantic storms from 1995 to 2016, with each chart representing a different storm name. The visualization shows a line chart for each storm, mapping year on the x-axis and frequency on the y-axis, with all charts sharing identical scales for easy comparison. Built with D3 v6, it uses `d3.csv`, `d3.group`, `d3.line`, `d3.scaleTime`, `d3.scaleLinear`, and `d3.scaleOrdinal` to parse data, group by storm name, and render SVG paths, axes, and a legend. The color scale uses `d3.schemeCategory10`, and the data comes from an external CSV file linked in the code.

RRiya Mathur
70% match
Loading thumbnail…

Activity-8_Q3.6

This example shows a scatter plot of temperature versus humidity, with points shaped according to weather condition (sunny, cloudy, or rainy) and colored accordingly. The visualization loads CSV data via fetch, parses it with `d3.csvParse`, and renders shapes using `d3.symbol` with `symbolsFill` scales. Axes are drawn with `d3.axisLeft` and `d3.axisBottom`, while a custom legend maps shape scales to weather labels. The code is organized into modular ES6 files, using `d3.scaleLinear` for positioning and `d3.scaleOrdinal` for shape encoding.

SSree Yuktha Sunkara
70% match
Loading thumbnail…

Activity6_Ques2

This stacked bar chart compares the percentage distribution of ratings across six categories—Technology, Finance, Healthcare, Education, Sports, and Entertainment—using horizontal bars. Each bar is segmented into five rating bands, from "below 4.0" to "above 9,” with a legend in the right margin. The visualization uses D3 v7's `d3.stack()` to aggregate the data and `d3.scaleOrdinal()` for color mapping. An SVG renders the chart, while mouseover events display a tooltip showing the exact percentage for each segment. The data is loaded from a local CSV file.

Nnithinnc@outlook.com
70% match