derrick373519@gmail.com

Fork of HTML Starter

Data Visualization Final Project-updated

This visualization analyzes Pokémon Go battle mechanics across multiple coordinated views. It shows type effectiveness through a color-coded matrix, Pokémon rankings in a horizontal bar chart, and move statistics (damage, energy, and usage frequency) in an interactive scatter plot. Built with D3 v5, the SVG-based interface uses dropdown menus, mouse interactions, and animations to let users explore data from CSV files, including Pokémon stats and fast/charge move attributes.

Data Visualization Final Project

This visualization analyzes Pokémon type effectiveness through two linked views: a horizontal bar chart showing type counts and a matrix displaying damage multipliers between types. Hovering over a bar highlights the corresponding row in the effectiveness table, showing matchups against all other types. The bar chart uses `scaleLinear` and `scaleBand` for axes, while the matrix is rendered as an HTML table within a `foreignObject`. Data loading uses `csv()`, and interactivity relies on mouseover events that adjust rectangle opacity and table styling.

Data Visualization Homework 9: Spotify Tracks Dataset

This visualization explores a Spotify tracks dataset through multiple interactive views: a grid of per-attribute pie charts and histograms, a correlation matrix, a stacked bar chart of genre popularity, and a scatter plot relating artist and album popularity. Users switch views via dropdown menus and filter by genre. D3 v5 handles the SVG rendering, animations, and scales, while the jeezy and data2grid libraries compute the correlation matrix. The stacked bar chart uses `d3.stack` and a custom tooltip, and a legend highlights categories on mouseover.

Data Visualization Homework 5: Stacked Bar Chart

This stacked bar chart visualizes the 2024 Times World University Rankings, showing the weighted contributions of teaching, research, citations, industry income, and international outlook for 28 universities per page. Users can sort universities by any indicator in ascending or descending order via dropdown menus, and navigate between pages using previous and next buttons. The visualization uses D3 v5’s `scaleBand`, `scaleLinear`, `scaleOrdinal`, `d3.stack()`, and `axisBottom`/`axisLeft` to render the SVG bars, with hover tooltips displaying raw scores. Data comes from a CSV file, and color encoding is explained by a legend.

Data Visualization Homework 3: Correlation Matrix

This visualization shows a 3x3 grid of correlation matrices for male, female, and infant abalone, using data from the abalone.data file. Each matrix displays the pairwise correlations between eight physical attributes (Length, Diameter, Height, various weights, and Rings) as colored squares with numerical labels. The code uses D3 v5 to render SVG elements, with scales from `scaleBand` and `scaleLinear` for positioning and color encoding. Correlation calculations are performed using the `jz.arr.correlationMatrix` utility from the jeezy library, while the `data2grid` library reshapes the data for grid-based rendering.

Data Visualization Homework 8: Sankey Diagram

A Sankey diagram visualizes the Car Evaluation dataset, showing how combinations of car attributes (buying price, maintenance, doors, persons, luggage boot, safety) flow to final acceptability ratings. The diagram uses color-coded nodes grouped by attribute type, with link thickness representing the count of cars with each attribute combination. The code uses d3.sankey for layout, d3.drag for interactive node repositioning, and d3.csv for data loading. The visualization renders as SVG, calculating node positions and link paths through the sankey.layout(32) function.

Data Visualization Homework 8: Sankey Diagram

A Sankey diagram of car evaluation data visualizes the flow of car attributes—buying price, maintenance cost, doors, persons, luggage boot, and safety—toward an acceptability outcome. The diagram renders nodes and curved links as SVG elements using D3.js v5, with the custom `d3.sankey` layout computing node positions and link widths. Draggable nodes allow interactive repositioning, triggering a relayout that updates link paths via `d3.sankeyLinkHorizontal`. Data is loaded from a CSV text file using `d3.csvParse`.

Data Visualization Homework 8: Sankey Diagram

This visualization is a Sankey diagram that depicts the flow of car attributes—buying price, maintenance cost, number of doors, person capacity, luggage boot size, and safety—toward a final evaluation of acceptability. The diagram uses nodes for each attribute-value combination and weighted links to show the sequential relationships between them. The code builds the graph by parsing a CSV file and then uses a custom `d3.sankey()` layout algorithm to position nodes and links, rendering the final output as SVG. Interactive dropdown menus allow the user to select which columns to compare.

Data Visualization Homework 7: Horizon Chart

This D3.js visualization displays daily average air pollution levels for six pollutants (SO2, NO2, O3, CO, PM10, PM2.5) across multiple Seoul monitoring stations using a grid of horizon charts. Each chart encodes pollutant concentration through stacked colored bands derived from the `d3.scaleLinear` y-axis, with the `d3.area` API generating the band shapes. The visualization reads hourly measurements from an `air-pollution.csv` file, computes daily means via `d3.mean`, and renders the horizon charts as SVG paths within a 6000x10000 viewport. Colors are assigned per pollutant using custom RGB scales, with each band representing a fraction of the 98th percentile value.

Data Visualization Homework 6: ThemeRiver

This interactive theme river visualizes the median sale prices of houses, grouped by number of bedrooms, in a geographic region over time. Using D3’s stack and stackOffsetWiggle functions, it displays fluctuating price bands as colored streams. A color legend and a dropdown menu for selection filter the data. The SVG renders with HTML tooltips and axis ticks, with data loaded from a local CSV file.

Data Visualization Homework 1: Scatter Plots

This interactive D3 visualization demonstrates the Iris flower dataset through a customizable scatter plot. Users dynamically select which measurements (sepal length, width, petal length, or petal width) to display on the x- and y-axes via dropdown menus. The plot renders circles colored by Iris species, with a categorical color legend and animated transitions when axes change. Built with D3 v5, it uses `scaleLinear`, `scaleOrdinal`, `axisBottom`, `axisLeft`, and `transition()` to smoothly animate the scatter points.

Data Visualization Homework 4: Brushable Scatter Plot Matrix

This brushable scatter plot matrix displays the classic Iris dataset, showing pairwise relationships between sepal length, sepal width, petal length, and petal width across three flower classes, with histograms along the diagonal. Each off-diagonal cell renders circles colored by species using `d3.scaleOrdinal` with `schemeCategory10`. The visualization builds a grid of small multiples using D3 v5 selections, `d3.cross` to generate cell pairs, and `d3.axisBottom`/`d3.axisLeft` for lightweight axes. Diagonal cells use `d3.histogram` to show univariate distributions, while a custom color legend module lists the class categories.

Data Visualization Homework 2: Parallel Coordinate Plots

This parallel coordinate plot visualizes the classic Iris dataset, displaying four morphological measurements for three flower species. Each observation appears as a semi-transparent polyline crossing the vertical axes, with color encoding the species classification via a categorical color scale. The visualization supports interactive reordering by dragging axis headers, which triggers animated transitions repositioning the axes. Built with D3 v5, the implementation uses `d3.scaleLinear` for value mapping, `d3.scaleOrdinal` for color assignment, and `d3.line` for generating the polylines from the CSV data.