Skip to main content
Log in
O

ownerofthesoul0000@gmail.com

@RelaxingSoul·13 public vizzes

Loading thumbnail…

Fork of Axes with Hover

This visualization demonstrates hover interaction on a chart with labeled axes. Moving the cursor inside the gray plot area draws black crosshair lines from the pointer to the x and y axes, using the D3 `pointer` event and state management. The plot uses `d3.scaleLinear` for both axes, with `axisBottom` and `axisLeft` rendering ticks. The code relies on D3’s select/join pattern to update the SVG elements dynamically as the mouse position changes.

Feb 16, 2024
Loading thumbnail…

Fork of Simple Scatter Plot

This example visualizes the Penguins Dataset by plotting bill length against flipper length. Each circle represents a penguin, with its position determined by these two measurements, and the semi-transparent teal fill reveals overlapping data points. The visualization is built with D3, using `scaleLinear`, `extent`, and axis label helpers to render the scatter plot. It also incorporates `observeResize` from `@RelaxingSoul/res-axis` to handle responsive dimensions, and the SVG elements are managed through D3's `select` and `join` methods.

Feb 16, 2024
Loading thumbnail…

d3-line-chart

This example visualizes monthly average atmospheric CO₂ concentrations from the Mauna Loa dataset, shown as a scatter plot with a connecting line over time. The chart loads a CSV file using `d3.csvParse`, parses dates with `d3.timeParse`, and renders points and a line using `d3.line`, `d3.scaleTime`, and `d3.scaleLinear`. Custom axes are drawn with `d3.axisLeft` and `d3.axisBottom`, styled with a dark background and colored points.

Feb 15, 2024
Loading thumbnail…

Fork of Scales and Axes

This example demonstrates how to construct a basic Cartesian coordinate system using D3 scales and axes. A dark grey inner rectangle is drawn within the SVG canvas to define the plotting area, while a linear scale maps the domain 0–100 to the horizontal and vertical pixel ranges. The bottom and left axes are rendered using `d3.axisBottom` and `d3.axisLeft` respectively. The `d3.scaleLinear` API handles the coordinate transformations, and the visualization responds to container resizing through a `ResizeObserver`.

Feb 15, 2024
Loading thumbnail…

Fork of Interactive Color Legend

This example visualizes the Iris Dataset as a scatter plot using D3 v7, displaying sepal length versus petal length with points colored by species via `scaleOrdinal` and `schemeCategory10`. A color legend renders each species as a labeled circle using `colorLegend`, and hovering over a legend tick dynamically adjusts the opacity of matching scatterplot marks through `setHoveredValue` and `hoveredValue` state. The visualization uses D3’s `selection.join`, `scaleLinear` for axes, and `csvParse` for data loading.

Feb 15, 2024
Loading thumbnail…

scatter-plot-color-legend

This scatter plot visualizes the Iris Dataset, showing the relationship between petal length and petal width. Circles represent individual flowers, colored by species using a categorical color scale (d3.scaleOrdinal with schemeCategory10). A legend highlights a species on hover by dimming other categories, with axis labels and tick marks rendered via d3.axisLeft and d3.axisBottom. The visualization loads data from a CSV file using d3.csvParse and updates reactively through a state management pattern with setState.

Feb 15, 2024
Loading thumbnail…

Fork of Solar System

This animated visualization displays the relative sizes of the Sun and planets in the solar system, using circles positioned along a horizontal line, with distances not to scale. Each celestial body appears sequentially, expanding from a radius of zero to its proportional size, with labels fading in beneath. The code uses D3.js transitions with `transition.attr` to animate the circle radii and text opacity, driven by data from Wikipedia’s list of gravitationally rounded objects. SVG circles and text elements are bound to the dataset, with a black background and distinct fills for each planet.

Feb 13, 2024
Loading thumbnail…

World Map Simplified

This example shows a simplified world map with country outlines, a graticule grid, and a bold outline border, all rendered as vector paths. It loads GeoJSON data from the visionscarto-world-atlas package, converts it with `topojson-client`, and projects it using the `d3.geoNaturalEarth1` projection and `d3.geoPath` for drawing. The map updates asynchronously, fetching data once and re-rendering the SVG with each state change. The code leverages D3’s `select` and `join` methods for declarative SVG updates.

Feb 11, 2024
Loading thumbnail…

scatter-plot

This example visualizes the classic Iris Dataset, plotting petal width against petal length for 150 individual flowers. The scatter plot uses `d3.scaleLinear` to map data extents to screen coordinates, with circles colored by a random HSL hue at partial opacity. The code loads the CSV file via `fetch` and parses it with `csvParse`, then renders the visualization using D3 v7 selection joins. Custom axes are created with `d3.axisLeft` and `d3.axisBottom`, with white labels for petal-length and petal-width.

Feb 9, 2024
Loading thumbnail…

Fork of D3 Transitions with animation

This example showcases D3 transitions animating a set of circles that drift randomly across a dark blue background. Six colored circles enter, move, and shrink away using staggered slow and fast transition speeds with an easeLinear timing function. The visualization uses d3.select and d3.transition APIs from the D3 v7 library to manage enter, update, and exit selections, moving circles to new random coordinates while adjusting their radii for a dynamic, fluid effect.

Feb 7, 2024
Loading thumbnail…

Fork of Circles with D3

A Svelte application renders four fixed-position circles onto an SVG canvas with a black background, using the D3 `select` API to bind data to SVG elements. Each circle's horizontal and vertical coordinates, radius, and fill color come from a hardcoded array. This example serves as a base template for creative modifications, such as applying Halloween or Christmas themes, by altering the data or attributes. The code relies on D3's `.join()` method to manage SVG circle creation and updates.

Feb 4, 2024
Loading thumbnail…

creating-circles

This example demonstrates the fundamental structure of a VizHub V3 visualization, starting from a blank canvas. It shows how the `main` function receives a DIV container and uses it as the mounting point for all visual output. The code implements a simple circular shape using basic SVG elements within the container, serving as a minimal "Hello World" for the runtime environment. The example highlights the V3 Runtime's continuous hot-reloading capability, where changes to the code instantly update the rendered visualization. It uses plain JavaScript and SVG APIs, with no external libraries, to establish the baseline for subsequent tutorials.

Feb 4, 2024
Loading thumbnail…

Fork of Pathetic Bar Chart

This example presents the top 10 most populous countries as a bar chart stripped of axes and labels. Using React with hooks, it loads United Nations population data via `d3.csv` and maps it to SVG rectangles scaled by `d3.scaleLinear` for width and `d3.scaleBand` for vertical positioning. The code renders a sparse, bare visualization where bars appear directly in a canvas-like SVG container.

Feb 3, 2024