Thai Ha Dang

@hadt222·14 public vizzes

Fork of activity_6_task_4

A geographic bubble chart maps California housing data from a GitHub-hosted CSV, plotting longitude and latitude as axes. Each bubble’s radius encodes population, while its color reflects median house value using a D3 sequential color scale with an interpolateCool gradient and a legend. The chart renders as SVG via D3 v-scaleLinear and scaleSqrt, with axes labeled and bubbles styled with opacity and black strokes.

Nov 28, 2024

Loading thumbnail…

CSCE5320_project

This dashboard visualizes Netflix content distribution using a series of Chart.js charts. It displays the total number of shows, movies, and series, alongside a pie chart for content type breakdown, a bar chart for titles released per year, and additional pie charts for rating and duration distributions. The visualization loads data from the `netflix_titles.csv` file using the Fetch API, parses it with simple JavaScript string operations, and renders each chart on its own canvas element.

Nov 28, 2024

Loading thumbnail…

Fork of Activity_7.2

This stacked area chart shows population trends for China, India, the USA, and Indonesia from 1960 to 2020. It uses d3.stack, d3.area, and d3.scaleTime with annotated dots at five-year intervals on a light gray grid. Data is loaded as CSV from a GitHub gist and rendered as SVG with d3-axis for tick marks and a legend. Each country is assigned a distinct fill color with 70% opacity.

Nov 2, 2024

Loading thumbnail…

Activity_7.1

This pie chart displays the number of University of North Texas students by major, with each slice labeled with its count in thousands and percentage of the total. The visualization uses D3 v5 APIs including `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to generate SVG paths and color-coded segments, with a legend positioned to the right. Major names and student counts come from an external CSV file loaded via `d3.csv`, and labels are formatted using `d3.format`.

Nov 2, 2024

Loading thumbnail…

Activity_7_Question_1

This pie chart visualizes the count of students from each major at UNT, with each slice labeled with its value in thousands. The chart uses D3 v5 to load CSV data, compute pie segment angles via `d3.pie()`, and render arcs with `d3.arc()`. A legend on the right maps each major to its color and student count. The visualization relies on `d3.scaleOrdinal` for color assignment and `d3.format` for tick labels.

Nov 1, 2024

Loading thumbnail…

activity7

This animated scatter plot cycles through different Iris flower measurements, displaying petal width, sepal width, petal length, and sepal length on the x-axis while keeping sepal length on the y-axis. Points are colored by species (setosa, versicolor, virginica) with a legend and axis labels. Built with D3.js, it loads CSV data, uses `d3.csv` for parsing, and relies on `setInterval` to rotate the displayed variable, re-rendering SVG circles and text each cycle.

Nov 1, 2024

Loading thumbnail…

activity_6_task_4

This bubble chart visualizes California housing data, plotting longitude and latitude coordinates to reveal geographic distribution. Each bubble’s size encodes population, while its color represents median house value on a gradient scale. The chart uses D3.js v6 with SVG rendering, including `scaleLinear` for axes, `scaleSqrt` for bubble sizing, `scaleSequential` with `d3.interpolateCool` for the color mapping, and `d3.axisBottom` and `d3.axisLeft` for labeled axes. Data loads from a GitHub-hosted CSV, with a legend displaying the value range.

Oct 19, 2024

Loading thumbnail…

activity_6_task_4

This bubble chart visualizes California housing data, showing the relationship between median income and median house value across different locations. Each bubble’s size represents population, and its color encodes ocean proximity (e.g., NEAR BAY). The chart uses D3 v6 with `scaleLinear` for the x and y axes, `scaleSqrt` for bubble radius, and `scaleOrdinal` with a categorical color scheme. The SVG is rendered with circles, while axes are drawn using `axisBottom` and `axisLeft`. The data is loaded from a CSV file containing housing statistics.

Oct 19, 2024

Loading thumbnail…

Activity_6_task_3

This scatter plot visualizes the apple quality dataset, plotting fruit size on the x-axis against weight on the y-axis, with each point colored green or red to indicate good or bad quality. The visualization uses D3 v6 with SVG rendering, employing the `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs to load data, compute scales, and draw axes. The code retrieves the dataset from a GitHub-hosted CSV file and renders approximately 4,000 circles across the full browser window.

Oct 19, 2024

Loading thumbnail…

activity6_task2

A stacked horizontal bar chart displays customer satisfaction ratings across five product categories, with segments representing the percentage of responses in each rating level from "Excellent" to "Very Poor." The visualization uses D3 v7 with SVG rendering, employing `d3.stack()` to compute stacked series, `d3.scaleLinear` for the x-axis, `d3.scaleBand` for product categories, and `d3.scaleOrdinal` for color mapping. Interactive tooltips appear on mouseover, showing the exact percentage for each rating segment. Data comes from a local CSV file loaded asynchronously.

Oct 19, 2024

Loading thumbnail…

activity 6_Task_1.1

This example displays a horizontal bar chart of the top 10 countries by population in the year 2000, using a green fill for each bar. It loads CSV data from a GitHub-hosted file via `d3.csv` and renders the visualization with React and SVG. The chart uses `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the quantitative x-axis, with axes and bars drawn as SVG elements. References to D3 modules like `scaleBand`, `scaleLinear`, `max`, `format`, and the `csv` function are made via ES6 imports, demonstrating local module use.

Oct 19, 2024

Loading thumbnail…

Activity 6_Task_12

This example shows a horizontal bar chart of 2010 population figures for 30 countries, with a green fill on each bar and a tooltip displaying the abbreviated population value. The visualization loads a CSV from GitHub via `d3.csv`, maps the data through `useData`, and renders SVG bars using React components. Scales are built with `d3.scaleBand` for the categorical country axis and `d3.scaleLinear` for the population axis, while tick formatting uses `d3.format`.

Oct 19, 2024

Loading thumbnail…

activity 5

A collection of multicolored circles scatter randomly across an SVG canvas, overlapping a large, flower-patterned background image. The circles are generated through three nested array maps, each iterating over the same numeric array to produce many small points with random positions and colors. The visualization also includes a detailed Buddha silhouette path, rendered with a large SVG path element and styled with a purple fill and pink stroke. The code uses React to manage the SVG output and relies on JavaScript's `Math.random` for all generative variation, with imported React and ReactDOM libraries.

Oct 18, 2024

Loading thumbnail…

Fork of Buddha

A generative animation displays eleven circles on a black canvas, each growing to a uniform radius and positioned according to coordinates from a CSV file. The circles use a screen blend mode, creating luminous color overlaps as they converge. Built with D3.js, the code uses `transition` and `easeLinear` for timed growth and movement, with a slow initial expansion followed by rapid updates. A secondary SVG path, defined by a long path string, is also present, though its rendering is not explicitly handled in the visible logic.

Oct 15, 2024