Chi Aghaizu

Total Remittance Entering Various Countries in 2019 (MM USD)

A horizontal bar chart displays migrant remittance inflows in millions of U.S. dollars for 19 countries in 2019. The visualization uses React hooks for state management and d3.scaleBand and d3.scaleLinear to map country names and values to SVG rectangles. Data is loaded from a CSV file using d3.csv, with the top 19 rows selected. Axis ticks and labels are rendered manually, while bars use indianred fills with darkred strokes and rounded corners.

Nov 24, 2023

ICE - Eight 2B - Social Network

This visualization shows a social network of 16 named individuals connected by 19 relationships, rendered as an interactive force-directed graph on an SVG canvas. The code uses d3.forceSimulation with forceLink and forceManyBody to position nodes and links, while d3.select appends circle nodes and line links. The network is laid out dynamically as the simulation runs, with node labels displayed in purple. The rendering approach is purely SVG with HTML and CSS styling on a lavenderblush background, driven by D3 v6.

ICE - Eight 2A- Family Tree

A family tree visualization displays eight generations of descendants from Miriam, including figures like Deborah, Phoebe, and their children, using a collapsible hierarchical layout. The interactive tree allows nodes to expand or collapse on click, with animated transitions updating the SVG. Built with React, the code relies on D3 v3’s `d3.layout.tree` and `d3.svg.diagonal` for positioning links, while custom click handlers toggle child visibility. The visualization presents the genealogical data in a clear, navigable structure, emphasizing relationships and lineage through a standard tree diagram with smooth rendering.

ICE - Eight 1B - Madagascar Map

This example displays a choropleth-style map of Madagascar, with the country’s boundary rendered in orange and its interior filled with light green. The map highlights regions on hover by turning them yellow. Built with D3 v7 and TopoJSON, it loads world-atlas country data, filters to Madagascar, and projects the geometry using `d3.geoMercator` with `fitSize`. Paths are generated via `d3.geoPath` and rendered as SVG, with mouse events changing fill colors.

ICE Eight-1A - World Map

This example presents a world map visualization using the Mercator projection, with each country rendered as an SVG path. The countries are initially filled teal with white borders, and hovering over a country turns it yellow, while moving the mouse away changes it to light green. The code loads geographic data from the world-atlas TopoJSON file and converts it to GeoJSON using the topojson library. It leverages D3.js v6 APIs including `d3.geoMercator`, `d3.geoPath`, and SVG `path` elements for rendering, with mouse events handled via D3's `.on()` method.

Area Chart

This area chart visualizes total inward remittance from Algeria over time, using a time-scaled x-axis for years and a linear y-axis for remittance amounts in millions of USD. The code leverages D3 v6 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `d3.area` to generate the filled path. Data is loaded from a CSV file via `d3.csv`, with the year field parsed as a `Date` object. The SVG rendering includes labeled axes, gridlines via tick sizes, and an orange area fill, with the chart styled using the Optima font.

Fork of Line Chart

This visualization displays the total inward remittance from Algeria over time using a time series line chart. The chart employs D3 v6 with SVG rendering, using `d3.scaleTime` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.line` to generate the path. Axis labels and a title are added via SVG text elements, with dark orange styling for the line. The data is loaded from a CSV file using `d3.csv`, parsed with year values converted to Date objects and remittance values to numbers.

Pie Chart

This pie chart visualizes total inward remittance flows to the US in 2019, using a D3.js v6 SVG rendering. The chart displays seven slices, each labeled with its value in millions and accompanied by a legend showing the country name and corresponding amount. The code fetches data from a CSV via `d3.csv`, processes it with `d3.pie`, and applies a custom ordinal color scale. Text labels are positioned using `d3.arc` centroids and rotated for readability, while the legend is built with appended SVG elements.

Line Chart

A line chart displays total inward remittance in US dollars over time, with year on the x-axis and automobile sales on the y-axis. Built with D3 v6, it uses `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` to render the SVG path, with axes and gridlines styled via `tickSize`. The chart loads CSV data from a gist, formatted with `format` for tick labels, and includes labeled axes and a bold title.

ICE-6: CSCE 5320 Q2 Penguins Dataset

This scatter plot visualizes the Palmer Penguins dataset, mapping flipper length to body mass and coloring each point by species—blue for Adelie, purple for Chinstrap, and red for Gentoo. It also encodes culmen length and depth as non-visual attributes within the data marks. Built with React and D3 v6, the example uses `d3.csv` to load data, `d3.scaleLinear`, `d3.extent`, and `d3.axisLeft`/`d3.axisBottom` to render an SVG with circles, explicit axes, and custom labels.

Mar 12, 2023

ICE 5 - CSCE 5320

This page displays metadata for a Global Inward Remittances dataset, showing its size in kilobytes, row count, and column count. The visualization fetches a CSV file from a GitHub gist using D3 v7’s `d3.csv` method. It then calculates data size with `d3.csvFormat` and presents the information in a styled HTML page, featuring a blinking hyperlink to the dataset and a World Bank background image via CSS.

Mar 4, 2023