Skip to main content
SimilarExport ZIP
100%

Assignment 6 Diverging Bar Chart

✓ Published1🌍 Public
Aahuynh8@dons.usfca.edu
Last edited Mar 4, 2024
Created on Mar 4, 2024

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.

AI-generated description

CS 360 Assignment 6 Diverging Bar Chart Annie Huynh

CSV URL:https://raw.githubusercontent.com/Ahuynh111/gist-practice/main/Pokemon%20CS360%20-%20AttackDefense.csv

MIT Licensed

Similar vizzes

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
89% match
Loading thumbnail…

Assignment 4 Bar Chart D3

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.

Aahuynh8@dons.usfca.edu
87% 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
83% match
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
83% 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
81% 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
80% match
Loading thumbnail…

Fork of Simple Scatter Plot

This scatter plot shows the relationship between Attack and Defense stats for Pokémon, with each point colored by generation and accompanied by a legend. Built with D3.js, it uses `scaleLinear` for axes, `scaleOrdinal` with `schemeDark2` for color encoding, and `axisBottom`/`axisLeft` for tick marks. The SVG rendering includes a light gray inner rectangle, semi-transparent circles, and dynamically adjusted margins to fit the legend. Data comes from a CSV of Pokémon attributes.

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

Fork of Responsive Axes (SSP)

This visualization shows the relationship between Attack and Defense stats for Pokémon, with each point colored by generation and a legend indicating the generation. The scatter plot uses D3.js scales and axis functions, but its key feature is responsive axes that maintain consistent tick mark density as the viewport resizes. The code calculates the number of ticks based on the inner width and height divided by a fixed tick density constant, ensuring axes remain readable at any size. Data comes from a CSV file containing Pokémon attributes.

Bbenclark.3rd@gmail.com
78% match