X

Xuân Vinh

@vinhnx0·20 public vizzes

Loading thumbnail…

DSDV Project

This example creates a plain HTML page that positions introductory text about job skills and qualifications directly onto the page using absolute positioning. The code defines a `createAndPositionTextNode` function, which uses the Document Object Model (DOM) methods `document.createTextNode` and `document.createElement` to generate and place two text containers—one labeled "Category" and another containing a longer job description—at fixed coordinates. The page styling is handled with basic CSS for heading colors and font weights, while no external data sources or visualization libraries are utilized.

Loading thumbnail…

Smoothed D3.js Radar Chart

This smoothed D3.js radar chart compares smartphone attributes—such as battery life, brand, and contract cost—across three phone models (iPhone, Samsung, Nokia). The visualization uses circular grid levels with percentage labels, radiating axes, and filled, semi-transparent polygons with rounded strokes to represent each product’s profile. Built with D3 v4, the code leverages `d3.scaleOrdinal` for color, `d3.scaleLinear` for the radial scale, and SVG elements like circles and paths to render the chart, complete with a glow filter and interactive hover tooltips.

Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3.js to generate a grid of intersecting horizontal and vertical lines across the full browser window. The rendering uses SVG rectangles, with each line composed of multiple thin rect elements spaced at regular intervals. Two SVG masks, created with D3’s `symbol` and `symbols[1]` (a circle), selectively reveal or hide parts of the grid: one mask is inverted to show lines only within the circle, while the other hides them inside it. The code relies on `d3.select`, `range`, and `join` to build the elements dynamically.

Loading thumbnail…

Lab 7

This visualization displays line charts of confirmed COVID-19 cases over time for multiple countries, with each country represented by a distinct colored line. The chart uses d3.csv to load data from a GitHub repository, d3.scaleTime and d3.scaleLinear for axis scaling, and d3.line to generate the paths. An ordinal color scale assigns unique colors to each country, while d3.axisBottom and d3.axisLeft render the time and case count axes in an SVG canvas.

Loading thumbnail…

Lab 5

This interactive data visualization plots global COVID-19 confirmed cases as of May 4, 2020, using a geographic scatterplot. Each circle represents a province or country, positioned by longitude and latitude, with size and color encoding case counts via `d3.scaleSqrt` and `d3.scaleLinear`. Hovering a circle reveals a tooltip with country, coordinates, and case details. Built with D3 v7, the SVG chart reads CSV data from the CSSEGISandData GitHub repository and uses `d3.axisBottom` and `d3.axisLeft` for axes.

Loading thumbnail…

D3 Selection Exploration (2nd Stage)

This example uses the D3.js library to animate a dynamic set of circles across the screen. The visualization demonstrates a selection and join operation, where circles are appended or updated based on an incoming data array. The data itself is procedurally generated, with each circle's position and radius varying over time according to sine functions. The animation runs at 60 frames per second, using `select` and `join` APIs to manage the SVG elements.

Loading thumbnail…

D3 Selection Exploration (1st Stage)

A row of circles oscillates vertically in a sine-wave pattern, with the number of circles shifting over time. The animation uses D3’s selection and data-join methods, calling `svg.selectAll('circle')` with `.data()` and `.join('circle')` to update, enter, and exit elements smoothly. Each frame, `setInterval` generates new data points from `range(n)` and calculates y-coordinates using trigonometric functions, while the SVG canvas fills the browser window.

Loading thumbnail…

Lab 4

This interactive bar chart displays the GRDP of Vietnamese provinces, with bars colored on a sequential orange scale and labeled by province name. Users can dynamically add or remove provinces via buttons, triggering transitions that highlight bars in green before restoring their color. Built with D3 v7, the visualization uses `scaleLinear`, `scaleBand`, `d3.axisBottom`, and `d3.axisLeft` to render SVG elements. Data is loaded as CSV from a remote URL, and each update clears and redraws the chart to reflect the current dataset.

Loading thumbnail…

Lab2-Task2

This example displays a histogram of 20 fixed numeric values using SVG rectangles, with each bar’s height and color encoding the data magnitude. A linear color scale maps the minimum value to dark blue and the maximum to light blue. D3.js v4 selects the SVG, binds the array via `data()`, and appends `rect` elements for bars plus `text` elements showing each value in white. The rendering uses static JavaScript data, not an external dataset.

Loading thumbnail…

D3 Selection Exploration

This example demonstrates D3 selections and data joins by generating a row of 15 static circles across an SVG canvas. The visualization shows how `selectAll` combined with `data` and `enter` creates elements from an array of numbers. Using `d3.select` and `range`, it appends circles with a fixed radius and x-coordinate to the full-window SVG. The code relies on the core D3 selection API and SVG rendering, with no interaction or dynamic updates.

Loading thumbnail…

Fork of Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired geometric composition using D3.js, rendering a grid of horizontal and vertical rectangles that intersect through SVG masks. The code creates 100 evenly spaced lines in each direction, then applies two complementary masks—one normal and one inverted—to reveal or hide the grid patterns. Using D3 selections, `range`, and symbol generators, the masks incorporate circular, triangular, and other symbolic shapes. The artwork is dynamically sized to the viewport and rendered as an SVG, demonstrating how D3’s data-join and mask primitives can build layered generative art.

Loading thumbnail…

Lab3

This scatter plot visualizes Vietnamese provinces by population on the x-axis and GRDP per capita on the y-axis, with circle size encoding land area and color representing population density. The D3.js code loads CSV data via `d3.csv`, uses `scaleLinear` for axes, `scaleSqrt` for area-proportional circles, and `scaleOrdinal` with `schemeCategory10` for discrete density colors. Axes are generated with `axisBottom` and `axisLeft`, while `opacity` reduces overplotting. The SVG rendering is fixed at 600×300 pixels with margins, and the data originates from a GitHub-hosted CSV file.

Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-style geometric composition using D3. It displays a grid of horizontal and vertical bars overlaid with two circular masks, creating a crosshatched pattern that alternates visibility within and outside the circles. The code uses D3 selections, `range()`, and SVG masks (`mask` elements) to generate the repeating rectangles. It employs `d3.select`, `append`, and `attr` with data-driven joins, rendering entirely as SVG in the browser. The art piece is recreated computationally, with the layout determined by the window dimensions.

Loading thumbnail…

Lab2-Task3

This visualization displays the distribution of letters in the name "NguyenXuanVinh" across ten alphabetical bins, from A-B to S-Z, using a bar chart rendered as SVG rectangles. The code manually converts the name to lowercase ASCII codes and counts how many letters fall into each bin, then draws blue bars with black strokes, labeling each bin below. It uses D3.js v4 for selection and SVG manipulation, though the bars themselves are created directly via DOM methods like `createElementNS`, while D3 handles the page’s script loading and data binding for the React-based project.

Loading thumbnail…

Lab2-Task1

This example displays a static histogram in an SVG element, showing the distribution of letters from the input string "NguyenXuanVinh" across six alphabetical bins. It uses raw JavaScript and the D3.js v4 library to render blue SVG rectangles of varying heights, each labeled with a bin name such as "A-D" or "V-Z". The code manually computes character ASCII values through a custom function and assigns each letter to a bin, then appends the rectangles to the SVG using standard DOM manipulation, with the chart title and axis labels omitted.

Loading thumbnail…

Sol LeWitt Reproduction Final

This reproduction of a Sol LeWitt drawing presents two sets of grid lines intersecting in a central circle. Horizontal black lines are visible within a circular mask, while vertical black lines appear in the area outside a second, smaller central circle. Built with pure JavaScript and the SVG API, it dynamically creates `<rect>` elements at regular intervals to form the grids. Two SVG masks, defined with `mask` and `circle` elements, control the visibility of each line set, revealing a crosshatched pattern at the center. The piece is generated code, directly implementing the artist's geometric instructions.

Loading thumbnail…

Sol LeWitt Reproduction-Vertical

This example reproduces a Sol LeWitt vertical-striped artwork as an interactive SVG visualization. It shows a grid of thin, alternating horizontal and vertical white lines confined within a circular mask at the center of the screen. The code uses the SVG API to create 100 horizontal and 100 vertical rectangles, with a mask element and circle defining the circular crop. No external libraries are used; the rendering relies entirely on native Document Object Model (DOM) methods like `createElementNS` and `setAttribute`.

Loading thumbnail…

Sol LeWitt Reproduction-VerticalLine

This example reproduces a Sol LeWitt art piece using an SVG canvas that fills the browser window. It shows a grid of one hundred thin vertical black lines, evenly spaced across the full height of the viewport. The code creates each line as an SVG `rect` element, setting its `x` position by multiplying an index by 19 pixels. The rendering relies solely on the native DOM API `document.createElementNS` for SVG, with no external visualization libraries.

Loading thumbnail…

Fork of JavaScript Basics

A blank SVG canvas renders a series of JavaScript lessons as commented code. The script defines a 960×500 SVG element and contains commented-out examples covering variables, objects, loops, and arrow functions. No libraries or data sources are used; the rendering relies solely on inline JavaScript and SVG. The sketch serves as a template for learning programming basics, showing the syntax and logic for future, uncommented visualizations.

Loading thumbnail…

Lab1

This example shows a simple SVG graphic composed of four blue paths, including two mirrored curved shapes and a vertical line, drawn on a 900-by-250 canvas. The page also displays the author’s name, student ID, course title, and a statement of originality. The visualization is built with plain HTML, CSS, and JavaScript, using SVG path elements with `d` attributes to define curves and straight strokes. No external libraries are used; rendering relies on inline styles and SVG’s native stroke and fill properties.