Skip to main content
SimilarExport ZIP
100%

Assignment 4 Bar Chart D3

✓ Published2🌍 Public
Aahuynh8@dons.usfca.edu
Last edited Feb 21, 2024
Created on Feb 21, 2024

This example presents a bar chart showing the average attack power of Fire-type Pokémon across different generations. The chart uses D3.js version 6 to load CSV data from a GitHub repository, scale the categorical and quantitative axes with `d3.scaleBand` and `d3.scaleLinear`, and render SVG rectangles. Axis ticks are generated via `d3.axisBottom` and `d3.axisLeft`, with labels applied directly to the SVG canvas.

AI-generated description

CS 360 Assignment 4 Bar Chart in D3 Annie Huynh

CSV URL: https://raw.githubusercontent.com/Ahuynh111/gist-practice/main/PokemonAttack%20-%20Sheet1.csv

MIT Licensed

Similar vizzes

Loading thumbnail…

Assignment 5 Line D3

This line chart visualizes the average attack power of Fire, Grass, Water, and Dark Pokémon types across multiple generations. The SVG rendering uses D3.js v6 with `d3.scalePoint` for the x-axis and `d3.scaleLinear` for the y-axis, plotting four colored line paths from CSV data loaded via `d3.csv`. The chart includes axes, a title, and a manual legend with colored rectangles.

Aahuynh8@dons.usfca.edu
89% match
Loading thumbnail…

Assignment 6 Diverging Bar Chart

The chart compares average Attack and Defense stats across Pokémon generations using horizontal diverging bars, with Attack extending rightward and Defense leftward from a central axis. It employs D3 v6 to create an SVG visualization, using scaleBand for the categorical y-axis and separate linear scales for each metric. Bars are colored with a blue-red interpolated scale, and a d3-legend legend distinguishes the two directions. Data comes from a CSV file containing per-generation averages, rendered as static rectangles without animation.

Aahuynh8@dons.usfca.edu
87% match
Loading thumbnail…

Assignment 6 Bar Chart With Sequential Color Scale

This bar chart displays the average Attack Power of Grass-type Pokémon across different Generations, with bars colored using a sequential blue-green color scale to represent value magnitude. The visualization is rendered as an SVG using D3 v6, employing `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.scaleSequential(d3.interpolateBuGn)` for color encoding. A color legend is added via the `d3.legendColor()` API. Data is loaded from a CSV file containing Generation and Grass attack averages.

Aahuynh8@dons.usfca.edu
86% match
Loading thumbnail…

Assignment 4 ScatterPlot D3

This scatter plot visualizes the relationship between Attack and Defense stats for Pokémon, with each circle representing a single Pokémon. The visualization uses D3 v6 to load CSV data from a GitHub gist and render an SVG chart with linear scales mapping attack values to the x-axis and defense values to the y-axis. The code explicitly uses d3.csv, d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.selectAll to create the circles, axes, and labels, while styling circles with a mediumpurple fill and black stroke.

Aahuynh8@dons.usfca.edu
82% match
Loading thumbnail…

Assignment 5 Bubble Plot D3

This bubble plot visualizes Pokémon Attack and Defense stats, with HP mapped to bubble size and Generation mapped to color. It uses a D3.js v6 SVG scatter plot, scaling x and y axes with `d3.scaleLinear` and applying `d3.scaleOrdinal` for the categorical color scale. The underlying CSV data is fetched via `d3.csv` and drawn as circles using the standard D3 selection, enter, and append pattern, with axes generated by `d3.axisBottom` and `d3.axisLeft`.

Aahuynh8@dons.usfca.edu
80% match
Loading thumbnail…

Fork of Simple Bar Chart

This example displays the average total stats per generation for Pokémon, using data from a CSV file that includes attributes like HP, Attack, and Speed across all generations. The bar chart is built with D3 version 7, leveraging `scaleBand` and `scaleLinear` for positioning, and `axisLeft` for the y-axis. The visualization processes the raw dataset by grouping entries by generation and computing the mean Total value. It includes a gray inner rectangle to highlight the plot area, with axes and labels added via the `@curran/axis-labels` library.

Bbenclark.3rd@gmail.com
79% match
Loading thumbnail…

Task 4_question4

This bubble plot visualizes Pokémon statistics, mapping Attack to the x-axis, Defense to the y-axis, and HP to the size of each circle. A categorical color scale distinguishes the six generations of Pokémon represented in the dataset. Built with D3 v6, the SVG chart uses `d3.scaleLinear` for the axes and bubble radius, `d3.scaleOrdinal` for colors, and `d3.axisBottom`/`d3.axisLeft` to render the numeric scales. The data is loaded from a remote CSV using `d3.csv`.

Aanushapodapati99@gmail.com
77% match
Loading thumbnail…

Activity6_Task3_Q3

A scatterplot displays Pokémon Attack versus Defense stats, with each point colored by the Pokémon's generation and a legend identifying each generation. The chart uses D3's scaleLinear, axisBottom, and axisLeft to build axes, alongside scaleOrdinal and schemeDark2 for categorical coloring. The SVG render includes a gray inner plot area, semi-transparent circles, and labeled axes for Attack and Defense, powered by data from data.csv.

PPothuguntla Pranitha
77% match