D

Duc Pham

@ducpham03·35 public vizzes

Loading thumbnail…

A3_HistPlot

This example displays a personalized birthday invitation card in Vietnamese, featuring a Ghibli-style portrait and event details for Hinn.hinn’s party. The page uses vanilla HTML and CSS with a flexbox layout to center the card, which includes an embedded image (Image.png) and handles responsive scaling via a media query for shorter screens. The design relies on a clean white card with rounded corners, soft shadows, and a pink accent color, making the invitation visually appealing and readable.

Loading thumbnail…

A2_DotPlot

This dot plot visualizes the average earthquake magnitude for countries with values above 4.0, using data loaded from a CSV file via p5.js’s `loadTable`. Each dot’s color indicates whether the magnitude exceeds 4.8 (red) or falls below (orange), with Japan and Afghanistan labeled as highest and lowest. The visualization computes averages through nested loops, renders points and axes on a p5.js canvas, and includes a hover tooltip that displays country and magnitude details when the mouse moves near a dot.

Loading thumbnail…

A2 - Visualizing Amounts using P5js

This example presents four P5.js visualizations of amounts: a bar chart, a dot plot, a heatmap, and a bar chart with a logarithmic scale. It uses the P5.js library for drawing and rendering. Each chart is embedded via VizHub links on a plain HTML page. The code demonstrates different approaches for encoding quantitative values, including rectangular bars, circles, color intensity in a grid, and a log-transformed axis for data with wide ranges.

Loading thumbnail…

A2_HeatMap

A heatmap visualizes earthquake magnitudes across different countries and months, with each cell color-coded to indicate impact level, where pink represents high magnitude and blue represents low magnitude. The visualization also includes a legend and tooltip that displays country, month, and magnitude details when hovering over a cell. Built with p5.js, the code loads earthquake data from a CSV file using `loadTable()` and renders rectangles via the Canvas API, using color interpolation based on magnitude values to encode severity.

Loading thumbnail…

A2_BarChart

This bar chart visualizes the average earthquake magnitude for different countries, sorted alphabetically, with bars colored orange and highlighted green on hover. It displays a tooltip showing the country name and average magnitude when the mouse moves over a bar. The visualization is built using p5.js, loading earthquake data from a CSV file via `loadTable()`, and uses custom drawing functions like `rect()`, `line()`, and `text()` to render the chart, axes, and labels.

Loading thumbnail…

A8 - Graph Visualization in D3

This example presents a graph visualization as a series of four interactive demonstrations. It first shows a node-link diagram using a force-directed layout, then compares it to an adjacency matrix representation. The visualization then implements edge-bundling for the node-link diagram and concludes with a slider that allows users to modulate the amount of tension in the edge bundling. The examples use D3.js and are embedded from VizHub, with each part linked to its source code.

Loading thumbnail…

A7_ Small multiples (of lines) chart

This example displays monthly temperature variations for four U.S. cities—NYC, LA, Chicago, and Houston—as small multiples of line charts, with dots marking each data point and a color-coded legend. Hovering over a dot enlarges it and shows the exact temperature value as a tooltip. The code uses D3 v7’s `d3.csv`, `d3.scaleBand`, `d3.scaleLinear`, `d3.line`, and `d3.axisBottom`/`d3.axisLeft` to render SVG charts, with data pulled from a GitHub-hosted CSV file. A `d3.legendColor` scale generates the legend, and the visualization is built with React in a single HTML file.

Loading thumbnail…

A7_StreamGraph

This streamgraph visualizes the monthly average temperatures for New York City, Los Angeles, Chicago, and Houston in 2021. The data is loaded from a CSV file using `d3.csv`, then stacked with the `d3.stack` API. The graphic uses an SVG canvas, with temperature values parsed from strings, and interactive tooltips on mouseover, while distinct colors represent each city.

Loading thumbnail…

A7 - Time Series in D3

This example demonstrates four time-series visualizations: a multi-line chart, a heatmap, small multiples of lines, and a streamgraph. It uses the D3.js library to render SVG elements and scales, with a color legend for each chart to distinguish categories. The data is mapped to time-based axes, and the streamgraph employs stacked area shapes. The code includes interactive tooltips that appear on hover, enhancing data exploration. All charts share a consistent color scheme, and the visualizations are built using D3’s data-binding and selection APIs.

Loading thumbnail…

A7_Multi-line Chart

This multi-line chart compares average monthly temperatures across four U.S. cities—NYC, LA, Chicago, and Houston—using data from a CSV file. It renders four colored lines (blue, red, green, orange) via `d3.line` and `d3.curveLinear`, with circular dots for each city. Built with d3.v7 and SVG, it includes a hover tooltip that displays the city and temperature in Fahrenheit. The y-axis domain is fixed from 10 to 90 degrees, and the chart uses `d3.scaleBand` for the x-axis (month names) and `d3.scaleLinear` for the y-axis.

Loading thumbnail…

A7_HeatMap

This heat map visualizes GDP per capita for eight countries across the years 2017–2021. It uses a sequential color scale with the `d3.interpolateTurbo` interpolator, mapping GDP values to colored cells within a banded grid. The chart is rendered as an SVG using D3 v7, with axes for location and year, a horizontal legend, and tooltips that display the exact GDP value on hover. Data is loaded from a remote CSV file via `d3.csv`.

Loading thumbnail…

A5_LineChart

This line chart visualizes monthly temperature data for San Francisco, displaying three trends: average temperature in blue, high in red, and low in green. The SVG uses d3.scaleBand for the month axis and d3.line with curveLinear to connect data points. Interactive tooltips appear on mouseover for each colored dot, and a legend is included.

Loading thumbnail…

A6 - Color Scales in D3

This example demonstrates four distinct D3.js visualizations, each employing a different color scale type: a bar chart using a sequential color scale, a diverging bar chart with a diverging scale, a scatterplot with a qualitative scale, and a line chart. The code uses D3’s `scaleSequential`, `scaleDiverging`, and `scaleOrdinal` APIs to map data values to colors. Each chart is rendered using SVG elements created via D3’s `select` and `append` methods. The visualizations are embedded as standalone pages, with the bar chart and diverging chart showing categorical comparisons, while the scatterplot and line chart reveal patterns across continuous variables.

Loading thumbnail…

A6_LineChart with 4 qualitative color scale

This line chart visualizes the GDP of four Southeast Asian countries—Vietnam, Thailand, Indonesia, and Malaysia—from 2012 to 2022, using a qualitative color scale with distinct hues for each nation. The chart employs D3.js v7 to create SVG paths for each country’s trend line, with an ordinal color scale mapping countries to specific colors. A legend generated via d3-legend and an ordinal color scale is displayed horizontally. The data is loaded from a CSV file and parsed, with axes rendered using d3.axisBottom and d3.axisLeft.

Loading thumbnail…

A6_ScatterPlot

This scatter plot visualizes the relationship between happiness scores and GDP per capita across multiple continents, with each circle colored according to its continent category. It shows how countries with higher GDP per capita tend to report higher happiness scores, while also revealing regional clusters and outliers. The visualization is built with D3 v7 and rendered as SVG, using a linear scale for both axes and an ordinal color scale for continental groupings. A d3-legend legend provides a color key for the continent categories, and the data is loaded from an external CSV file containing happiness and GDP metrics.

Loading thumbnail…

A6_BarChart with Sequential Scale

This example visualizes the happiness scores of various countries using a bar chart where each bar’s color encodes its score through a sequential blue scale. The chart is rendered as an SVG in a React application, leveraging D3 v7 for scaling and axis generation, while the color mapping is handled by `d3.scaleSequential` with the `interpolateBlues` interpolator. The data is loaded via `d3.csv` from a GitHub-hosted dataset, and a legend is added using the `d3-legend` library to clarify the score-to-color mapping. The visualization highlights the relative happiness rankings across countries while making score differences visually intuitive through color intensity.

Loading thumbnail…

A6_BarChart with Diverging color scale

This bar chart visualizes population growth rates across countries, with a diverging color scale that encodes both magnitude and direction of change. The chart sorts countries from lowest to highest growth rate, using a red-yellow-blue diverging palette from `d3.scaleDiverging` with `d3.interpolateRdYlBu`. Negative rates appear in blue tones, positive in red, with bars extending in opposite directions from a central zero line. The visualization uses D3 v7 with SVG rendering, employs `d3.scaleBand` for categorical x-axis placement and `d3.scaleLinear` for the y-axis, and includes a legend built with the d3-legend library.

Loading thumbnail…

A5_BubbleChart

This visualization shows life expectancy across various countries using a bar chart with a sequential color scale. The chart maps average life expectancy values to a light-to-dark green gradient, with color intensity and bar height both encoding the data. Built with D3 v7 and rendered as SVG, it uses d3.scaleSequential with d3.interpolateRgb for coloring, d3.scaleBand for the x-axis, and d3.legendColor from the d3-legend library for the legend. The data comes from a CSV file hosted on GitHub containing country-level expectancy metrics.

Loading thumbnail…

A6_Color Scales in D3

This scatter plot matrix visualizes the relationships between four numeric flower measurements—sepal length, sepal width, petal length, and petal width—with points colored by species. The grid layout shows pairwise comparisons, with each cell plotting one measurement against another. The code uses D3.js v7, including `scaleLinear`, `scaleOrdinal`, `schemeSet1`, and axes created with `axisLeft` and `axisBottom`. Data is loaded from a CSV file and parsed manually. On mouseover, a yellow highlight class is applied to the circles in each cell, emphasizing the points.

Loading thumbnail…

A5_ScatterplotMatrix

This example presents a scatterplot matrix for the Iris flower dataset, showing pairwise relationships between sepal and petal measurements, colored by species. It highlights how the visualization reveals clusters and correlations across dimensions. The code uses D3 v7 to create SVG circles, with `scaleLinear` for axes, `scaleOrdinal` for categorical colors, and `axisLeft`/`axisBottom` for ticks. Data is loaded from a CSV via `d3.text`, and mouseover events add a yellow highlight to all circles in a cell, emphasizing points under inspection.

Loading thumbnail…

A5 - Multidimensional Visualization

This example presents three interactive charts for multidimensional data exploration: a bubble chart, a line chart, and a scatterplot matrix. The bubble chart visualizes earthquake data with tooltips on hover and supports filtering by region via a color legend built with d3-legend. The line chart displays three series with hover tooltips on individual points. The scatterplot matrix uses d3 to show pairwise relationships across multiple dimensions. All visualizations leverage React and D3 for rendering and interactivity.

Loading thumbnail…

LineChart Test

This visualization presents earthquake data as a bubble chart plotting longitude and latitude, with bubble size encoding earthquake magnitude and color representing the continent. It includes interactive filtering by continent through the legend, which also shows size ranges. Built with D3 v7, the code uses `d3.select`, `d3.scaleOrdinal`, and `d3.scaleLinear` to render circles in an SVG, with a custom CSV parser for the earthquake dataset. Hovering over bubbles reveals tooltips showing magnitude and continent details.

Loading thumbnail…

A4_ScatterPlot

This example visualizes the relationship between study hours and exam scores using a scatter plot, where each circle represents a student. The data comes from a CSV file loaded with D3’s `d3.csv` method and filtered to exclude zero-value pairs. The SVG chart uses `d3.scaleLinear` for both axes, `d3.axisBottom`, and `d3.axisLeft` for tick marks, while circles are appended with `d3.selectAll` and `enter`. Interactive tooltips appear on mouseover, displaying the exact hours and scores for each point. All rendering is done with React-compatible vanilla JavaScript and D3 v6.

Loading thumbnail…

A4 - Introduction to D3

This example introduces D3.js through a collection of four interactive visualizations: a bar chart, a scatter plot, a boxplot, and a strip plot with a logarithmic scale. Each chart uses D3’s core modules—`d3.scaleLinear`, `d3.scaleLog`, `d3.axisBottom`, and `d3.axisLeft`—to map data to pixel coordinates and render SVG elements like `rect`, `circle`, and `line`. The visualizations draw from datasets embedded in the accompanying script files, with the boxplot summarizing distributions via quartile calculations. The code is structured as separate VizHub projects linked from a single HTML page, demonstrating basic chart construction without external data files.

Loading thumbnail…

A3 - Visualizing Distributions using P5

This example visualizes distributions using three interactive P5.js plots: a histogram, a box plot, and a strip plot, each embedded as separate VizHub links. The histogram displays the frequency of numeric values across bins, the box plot summarizes the data’s median, quartiles, and outliers, and the strip plot shows individual data points along a single axis. The visualizations use P5.js for canvas rendering and drawing shapes, with data organized into arrays and processed for statistical summaries. The page is built with plain HTML and CSS links, referencing external VizHub projects for each plot.

Loading thumbnail…

A4_Bar-chart_LogScale

This bar chart visualizes average salaries by job title using a logarithmic y-axis, which makes it easier to compare values across a wide range, from 1 to $1,000,000. The chart is built with D3.js v6, using `d3.scaleBand` for the x-axis and `d3.scaleLog` for the y-axis, with bars colored steelblue that turn orange on hover. Tooltips appear on mouseover, displaying the job title and salary, while the x-axis labels are rotated for readability. Data is loaded from a CSV file containing job titles and salaries, and the visualization is rendered as an SVG element.

Loading thumbnail…

A4_BoxplotPlot

This example visualizes the salary distribution across different job types using boxplots, highlighting the minimum, maximum, median, and quartile ranges for each category. The chart is rendered as an SVG using D3 v7, with interactive hover effects that display the exact max, min, and median values as text annotations. It loads the dataset from an external CSV file containing job titles and salaries, then computes quartiles and draws rectangles, lines, and axes. The code relies on D3 scales like `d3.scaleBand` and `d3.scaleLinear`, along with statistical methods such as `d3.quantile` and `d3.median`.

Loading thumbnail…

A4_Bar-chart

This bar chart visualizes average salaries for data science job titles, loaded from a CSV file via `d3.text`. The visualization uses `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis to render the SVG bars. Interactive tooltips appear on mouseover, changing the bar’s fill color to orange and displaying the job title and salary. Axis labels, a chart title, and rotated x-axis text are added using D3’s axis components.

Loading thumbnail…

A3_StripPlot

A strip plot displays the distribution of AI engineer salaries from a 2023 dataset, with each salary represented as a jittered dot along a horizontal axis. The chart maps salary values using p5.js functions like `map()`, `min()`, and `max()`, while random vertical offsets reduce overplotting. Salary range markers and axis labels are drawn with p5.js primitives, and the data is loaded via `loadTable()` from a CSV file hosted on GitHub.

Loading thumbnail…

A3_BoxPlot

This example shows a horizontal box plot of machine learning engineer salaries, displaying the minimum, first quartile, median, third quartile, and maximum salary values in USD. Built with p5.js, the visualization loads salary data from a remote CSV file, calculates statistical quantiles using a custom quantile function, and renders the box, whiskers, median line, and axis ticks directly onto an 800×600 canvas. The x-axis represents salary ranges with labeled tick marks every 25,000 USD, and the plot includes a title and axis labels.

Loading thumbnail…

Fork of HTML Starter

This example displays “Hello HTML!” in large, centered text using a CSS class to control font size and alignment. It serves as a minimal demonstration of how HTML, CSS, and JavaScript work together in a single file. The page uses no external libraries or data sources, relying solely on standard HTML markup and inline CSS styling within the `<style>` tag. It is intended as a starting point for building more complex visualizations.

Loading thumbnail…

Fork of Scales and Axes

This example demonstrates D3 scales and axes by rendering a blank chart with a gray inner rectangle and labeled x and y axes. It uses `d3.scaleLinear` to map input data from 0 to 100 into pixel coordinates, with margins defining the plot area. The axes are created using `d3.axisBottom` and `d3.axisLeft`, which are appended to SVG groups and positioned via margin-based transforms. The code imports from the D3 v7 library and dynamically sizes the SVG to its container.

Loading thumbnail…

DucPham_A2_Barchart

This horizontal bar chart displays the total salary in USD for each job category in a dataset of data-related roles. It uses p5.js, specifically the `loadTable` function to fetch and parse a CSV file, and the `setup` and `draw` methods to render the canvas. The chart calculates and sums salaries per category, then maps salary values to bar widths, while drawing axes, tick marks, and category labels. The scale ranges from zero to the maximum total salary with intervals of 50,000, and each bar is labeled with its corresponding sum.

Loading thumbnail…

Barchart

This bar chart displays the relationship between bill length and flipper length for penguins, using the Penguins Dataset. Each circle represents a penguin, with its position mapped by scaled linear axes for both measurements. The visualization renders circles on a gray inner rectangle, with labeled axes for clarity. Built with D3, the code uses `select` and `join` for SVG management, `scaleLinear` and `extent` for scaling, and axis components from `@curran/axis-labels` for labeling. Circle radius and opacity are fixed values, and the chart adapts to container dimensions.

Loading thumbnail…

ducpham HTML

This example displays the text “Hello HTML!” in a large, centered font on a blank page. It uses a single `<div>` element styled with the CSS `font-size` and `text-align` properties within a `<style>` tag. The page’s structure is defined directly in the HTML body, with no external JavaScript or data sources. It serves as a minimal demonstration of combining HTML and CSS for static visual output.