teohangxanh

@teohangxanh·11 public vizzes

ICE-8 - Network - Nghia Dang

This visualization displays a force-directed network with 13 nodes and 17 links, where node color encodes group membership and link thickness encodes the connection’s value. Using D3 v5, it loads the data via `d3.json`, then applies `d3.forceSimulation` with `d3.forceLink` and `d3.forceManyBody` to position the nodes, while rendering circles and lines as SVG elements that update on each simulation tick.

Mar 30, 2022

Loading thumbnail…

ICE-8 Tree - Nghia Dang

A radial hierarchy displays fictional family trees, mapping birth years to distance from a central "God" root and using angular position for siblings. The visualization marks each decade with labeled concentric circles, while node colors vary by depth. Built with D3.js, it uses `d3.layout.tree` with radial projections and `d3.svg.diagonal.radial` for curved links, rendering as SVG. Data comes from a local JSON file, and the layout stretches years onto a 360-degree circular space.

Mar 30, 2022

Loading thumbnail…

ICE-8 US map - Nghia Dang

This choropleth displays United States counties as a uniform neon-yellow field with dark borders, using an Albers projection. Built with D3 v5, the code loads county boundaries from the us-atlas TopoJSON source, converts features via the topojson library, and renders them as SVG paths with `geoPath` and `geoAlbersUsa`. Hovering highlights each county in red.

Mar 30, 2022

Loading thumbnail…

ICE-8 World Map - Nghia Dang

This interactive world map uses an orthographic projection to display the globe, rendering landmasses in blue and highlighting internal country boundaries with silver strokes. A yellow graticule grid overlays the sphere, which has an empty fill. Built with D3 v7 and React, the visualization fetches country topologies from the world-atlas package, using `d3.geoOrthographic`, `d3.geoPath`, and `d3.geoGraticule`. The `topojson` library's `feature` and `mesh` functions process the data, while SVG paths draw the resulting map elements.

Mar 30, 2022

Loading thumbnail…

Area chart - Nghia Dang

This example visualizes world population by year from 1950 to 2015, using a filled area chart to emphasize the steady upward trend in billions. The SVG rendering is driven by D3 v5, employing `d3.scaleTime` for the x-axis, `d3.scaleLinear` for the y-axis, and the `d3.area` generator with a `curveBasis` interpolation to smooth the path. Axis labels and tick formatting are handled through `d3.axisBottom`, `d3.axisLeft`, and `d3.format` with abbreviations. Data is loaded as CSV from the provided dataset.

Mar 23, 2022

Loading thumbnail…

Line chart - Nghia Dang

This line chart visualizes temperature readings over time across multiple districts, with each line color-coded by district and labeled through a custom legend. Built with D3 v5 and rendered as an SVG, the chart uses `d3.scaleTime` and `d3.scaleLinear` for the axes, `d3.line` with `d3.curveBasis` for smoothed trajectories, and `d3.nest` to group data by district. Data comes from a remote CSV file parsed with Day.js for date handling. The visualization includes rotated axis labels, gridlines, and a title.

Mar 23, 2022

Loading thumbnail…

Pie Chart - Nghia Dang

This example shows the distribution of U.S. racial groups as a pie chart with a corresponding legend, using data loaded from a JSON file. The visualization uses d3.pie and d3.arc to generate SVG paths for each slice, with colors assigned via d3.scaleOrdinal. A custom legend on the right displays each category’s label and percentage, formatted with d3.format. The chart is rendered as scalable vector graphics in a 960×500 viewport.

Mar 23, 2022

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the Iris dataset, showing petal length against petal width, with points colored by species (setosa, versicolor, and virginica). The plot displays 150 data points from the CSV source, loaded via `d3.csv`. The code uses D3 v6 APIs such as `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to build the SVG visualization. Axis labels indicate the measured attributes, while point positions are derived from parsed numeric fields for petal and sepal dimensions.

Mar 23, 2022

Loading thumbnail…

ICE-6: Nghia Dang part 1

This visualization shows the weights of ten students in 2022 as horizontal bars, sorted by name along the y-axis. It is built with React and D3 v5, using `d3.csv` to load data from a GitHub-hosted fake dataset and rendering SVG rectangles scaled with `scaleBand` and `scaleLinear`. The code manually generates axis ticks and gridlines rather than relying on built-in axis components.

Mar 2, 2022

Loading thumbnail…

ICE-5 Nghia Dang

This example displays a hand-drawn pig illustration as static SVG artwork alongside a playful joke and a summary of a remote CSV dataset. The page uses D3 v7’s `d3.csv` to fetch `fake_data.csv` and then computes and displays the file size, row count, and column count in a `<pre>` element. The SVG pig, built with basic shapes like `ellipse`, `circle`, and `path`, is centered on the page with inline styles. Styling is handled by an external `index.css` using large font sizes and bold background colors for the title and message.

Feb 22, 2022

Loading thumbnail…

Let's make a face

This example builds a cartoon face out of scalable vector graphics (SVG) shapes using React and D3. The code draws a yellow circular head, two eyes, a nose, ears, and a mouth using basic SVG elements like circle and path. React handles the component structure, while D3’s arc generator calculates the mouth’s curved shape. The layout is centered on a 960 by 500 canvas, with each facial feature positioned through explicit pixel coordinates and styled with fills, strokes, and stroke widths.

Feb 22, 2022