patricknicholas27@gmail.com

@109550187·10 public vizzes

vizhub kntl

This interactive bar chart visualizes country-level data, allowing users to filter by continent and select among metrics like population, GDP, and life expectancy. The visualization uses D3 v5 (d3.scaleBand, d3.scaleLinear) with SVG rendering, and supports sorting bars in ascending or descending order via buttons. Data is loaded from a CSV file using d3.csv, parsed with custom cleanup logic, and rendered with animated transitions between states.

Jan 4, 2024

Loading thumbnail…

Project

This interactive bar chart visualizes country-level data from a CSV file, allowing users to filter by continent and select among numerous socioeconomic metrics. The visualization updates dynamically, showing one bar per country, with bars sortable by population in ascending or descending order. Built with D3 v5, it uses `scaleBand`, `scaleLinear`, and `d3.select` for DOM manipulation, while rendering as SVG with animated transitions. Dropdown menus and buttons control the displayed subset, leveraging D3's data-binding capabilities.

Jan 4, 2024

Loading thumbnail…

Fork of barGraph

This bar chart displays the 2022 population for countries worldwide, with bar height mapped to population values and blue circles marking each data point. Users can re-sort the countries in ascending or descending order via two buttons. Built with D3 v5, the visualization uses `scaleBand` and `scaleLinear` for axes, `transition()` for animated updates, and `mouseover` events to show population details in a tooltip. Data comes from a CSV file containing population figures across multiple decades. The SVG rendering includes rotated country labels for readability.

Jan 3, 2024

Loading thumbnail…

109550187_HW5

This visualization displays the 2024 Times Higher Education World University Rankings as a horizontal stacked bar chart, comparing five score components—teaching, research, citations, industry income, and international outlook—for each institution. Users can reorder the bars by selecting a sorting key and direction from dropdown menus. The chart uses D3 v7’s `d3.stack` to generate stacked segments, `d3.scaleBand` for the y-axis, and `d3.scaleLinear` for the x-axis. Hovering over a bar segment triggers a tooltip showing the school name, segment score, and overall total, calculated via `d3.format`.

Jan 3, 2024

Loading thumbnail…

109550187_HW8

This visualization uses a Sankey diagram to show the flow of car attribute combinations from the UCI Car Evaluation dataset, sourced via a remote CSV file. It displays how categorical values for buying price, maintenance cost, doors, persons, luggage boot, and safety connect sequentially. The D3.js v4 code employs `d3.sankey()` for layout, `d3.csvParse` for data ingestion, and SVG rendering with `d3.drag()` for interactive node repositioning. Link stroke width represents frequency, while color encodes distinct source nodes.

Nov 13, 2023

Loading thumbnail…

109550187_HW7

This interactive visualization shows air pollution levels across multiple monitoring stations, displaying daily average concentrations for six pollutants (SO2, NO2, O3, CO, PM10, PM2.5) as a series of stacked horizon charts. Users select a year and band number via dropdown menus, which updates React state and triggers D3 to re-render the SVG. The code uses `d3.csv` to load air pollution data from a remote server, `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.mean` to aggregate hourly measurements into daily averages. Each pollutant uses a distinct color scheme, with bands overlaid to encode magnitude.

Nov 6, 2023

Loading thumbnail…

109550187_HW4

This visualization presents a multivariate comparison of the numeric fields in the iris dataset, using a scatterplot matrix to show pairwise relationships among sepal length, sepal width, petal length, and petal width. The three iris species are distinguished by color, with histograms on the diagonal showing each variable’s distribution. Built with D3 v7, the visualization uses `d3.brush` to enable interactive selection across plots, updating the displayed data points dynamically. The SVG rendering includes axis labels and tick marks generated via `d3.axisBottom` and `d3.axisLeft`.

Oct 23, 2023

Loading thumbnail…

109550187_HW3

This visualization displays three correlation matrices for subsets of the Abalone dataset, showing the pairwise relationships between nine physical measurements. Each matrix uses diverging colors from blue through yellow to red to represent correlations from -1 to 1, with numeric values overlaid on each cell. A fourth SVG shows the corresponding color legend. The matrices are rendered as SVG using D3 v5 scales and the `jz.arr.correlationMatrix` API from the jeezy library, with interactive hover effects that display detailed correlation information in text below. The data is loaded asynchronously from a remote CSV file.

Oct 9, 2023

Loading thumbnail…

109550187_HW2

This interactive parallel coordinates plot displays the Iris dataset, showing each flower’s sepal length, sepal width, petal length, and petal width as colored polylines grouped by class. Using React state with dropdown menus, users can reorder the four axes. Hovering over the color legend highlights lines of a selected species while fading others. The visualization is rendered as SVG using D3 v7 scales for axes and line generation, with data loaded via `d3.csv`.

Oct 2, 2023

Loading thumbnail…

109550187_HW1

This interactive scatterplot displays the Iris dataset, plotting 150 flowers with selectable axes for the four measured features (sepal and petal dimensions). A drop-down menu encodes a categorical color scale for the three Iris species, while the circles animate and reposition at a fixed radius as the user changes the x or y axis. Built with D3 version 7, the visualization uses `select` chains, `scaleLinear`, `transition`, and the `menu` module’s change event to update the plot. The SVG rendering honors the displayed data from the included CSV file.

Oct 2, 2023