HieuVu179

@HieuVu179·8 public vizzes

Untitled

This example shows a basic bar chart comparing categorical names against numeric amounts. The chart uses SVG rendering with steel-blue bars and displays both x and y axes. The code loads data from a CSV file called "amounts.csv", converts the amount values to numbers, and uses D3 v6 scales including `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the y-axis. The bars are appended as SVG `rect` elements, with axes generated using `d3.axisBottom` and `d3.axisLeft`. The visualization is built within a React framework context, though the rendering logic itself is plain D3.

Jan 6, 2023

Loading thumbnail…

Fork of HTML Starter

This example presents an animated solar system within an SVG canvas, featuring planets as colored circles that orbit along predefined elliptical paths. The visualization uses HTML, CSS, and JavaScript, with SVG’s `animateMotion` and `mpath` elements to drive the orbital motion, referencing named paths for each planet. An image of a solar flare is displayed above the diagram, and the animation loops indefinitely, with varying durations for different celestial bodies.

Jan 3, 2023

Loading thumbnail…

Fork of A scatter plot comparing EU fertility rate with urban population %

This scatter plot visualizes the relationship between EU countries' fertility rates and their urban population percentages, with each data point labeled by country name. The visualization uses D3 v7’s `scaleLinear`, `axisLeft`, and `axisBottom` to map the CSV data—sourced from a GitHub gist—to SVG circles and text elements. The plot fills the entire browser window, with axes positioned at the chart’s margins and salmon-colored country labels offset for readability. Data parsing converts string values to numbers for accurate scaling and positioning.

Jan 3, 2023

Loading thumbnail…

Fork of Fork of India Map

This example displays a choropleth map of Indian states, with each state filled by a categorical color and labeled with its name at its centroid. The visualization uses a Mercator projection and renders the geometry as SVG paths via `d3.geoPath`. State boundaries and names come from a TopoJSON file loaded with `d3.json` and processed through `topojson.feature`. Color encoding is handled by `d3.scaleOrdinal` with `schemeCategory10`, while `d3.selectAll` appends both paths and text labels to the SVG canvas.

Jan 3, 2023

Loading thumbnail…

Fork of SVG Fundamentals

This example demonstrates fundamental SVG shapes and positioning within a fixed 960×500 viewport. It shows a house-like structure composed of rectangles—a cyan-tinted door, two windows, and a larger body—all outlined in navy, beneath a red triangular roof formed by three connected line segments. The code uses plain SVG elements such as `rect` and `line` with explicit `x`, `y`, and `stroke-width` attributes, rendered directly in the HTML without any JavaScript or external libraries.

Jan 2, 2023

Loading thumbnail…

Fork of Fork of HTML Starter

This example uses an SVG mask to reveal a series of horizontal lines through a circular hole. It creates a white mask rectangle covering the entire viewport, with a black circle in the center. One hundred semi-transparent vertical strips are then drawn over the full SVG width, each clipped by the mask. The code manually builds the SVG elements using the DOM API and the `d3` library’s `selection` object, setting the mask’s dimensions to match the window size.

Dec 30, 2022

Loading thumbnail…

Fork of HTML Starter

This example creates an SVG visualization that displays a series of horizontal stripes, with a circular mask revealing the central portion of the pattern. The visualization uses the HTML5 Canvas API indirectly through SVG elements, specifically manipulating SVG `rect` elements and a `mask` definition. The code generates 100 rectangles, each 10 pixels tall and spaced 20 pixels apart, all constrained by a `circle-mask` that creates a circular viewport. The mask itself contains a white background `rect` and a black `circle` positioned at the center of the viewport, effectively cropping the striped pattern into a circular shape.

Dec 30, 2022

Loading thumbnail…

SVG Fundamentals

This example demonstrates the fundamental building blocks of SVG graphics by constructing a simple house illustration from basic geometric shapes. The visualization uses inline SVG within an HTML page, drawing rectangles and lines as raw SVG elements to form the house structure and roof. The code applies CSS properties directly to SVG tags, specifying fill colors, stroke colors, and stroke widths for each shape. This serves as a bare-minimum introduction to how SVG can be used for data visualization, working with the standard SVG API for shapes and lines without any additional JavaScript or visualization libraries.

Dec 29, 2022