RSSBDAE

@RSSBDAE·12 public vizzes

Log scale

This example demonstrates a logarithmic scale by positioning text labels at exponentially increasing values (10, 100, 1000, 10000, 100000) along a horizontal axis. The labels are evenly spaced due to the log transformation, contrasting with linear spacing. The code uses D3.js’s `d3.scaleLog()` to map the domain to pixel coordinates, then appends SVG `<text>` elements via `d3.select` and `.append()`. The data is hardcoded in an array, and the rendering uses an SVG canvas within an HTML page.

Feb 23, 2023

Loading thumbnail…

Untitled

Two overlapping rectangles outline the same group of text elements inside an SVG. The green rectangle shows the result of calling `getBBox()`, while the red rectangle shows `getBoundingClientRect()`, highlighting how these two DOM APIs differ in their coordinate systems. The background image is loaded via CSS from Unsplash. The visualization uses vanilla JavaScript to set rectangle attributes based on these API returns, with no external libraries.

Jan 19, 2023

Loading thumbnail…

Main Viz | Protype Dev

This visualization displays risk areas with their FWI values on a logarithmic scale, using colored circles for each data point. The code employs d3.scaleBand and d3.scaleLog to construct the axes, appended as SVG groups in a prototype interface. The data is rendered as circles via d3.select, with styling defined in a separate CSS file. The layout includes placeholder divs for additional chart elements, suggesting an interactive dashboard under development.

Jan 18, 2023

Loading thumbnail…

Animating a line with an arrow in d3

A line animates from source to target as a blue stroke draws itself, while a red arrowhead travels along the same path. The arrow rotates to match the line's direction using `transition.attrTween` and `translateAlong`, which queries the path's geometry with `getPointAtLength`. The line's progress is shown via a `stroke-dasharray` offset transition. The example uses d3.v4's SVG and animation APIs, with the arrow marker defined as a custom `svg:marker` as well as a separate path.

Jan 16, 2023

Loading thumbnail…

Untitled

A black cubic Bézier path is drawn on an SVG canvas using D3 v4, with its total length queried via `getTotalLength()`. The example marks two points sampled along the path at 50% and 78% of its length, using `getPointAtLength()` to position small red and blue circles. A green line is then constructed between the two points and extended backwards to the canvas edge, demonstrating how to compute a secant line from arbitrary positions along a vector path. The visualization uses inline SVG elements created through D3's selection API, with styling applied via a linked CSS file.

Jan 16, 2023

Loading thumbnail…

Log Scale Investigation

This example presents a radial quadrant chart investigating log-scale relationships. The visualization combines car production data loaded via `d3.csv` with multiple concentric ring segments, colored to distinguish four quadrants. Each quadrant uses SVG gradients applied through `defs` and `linearGradient` elements. The chart constructs circular arcs using `d3.arc` with dynamically sized inner and outer radii, while custom x and y `d3.scaleLinear` scales define the underlying axis framework. The interface organizes three separate div containers—a slider, the SVG radar chart, and a bubble area—within a bordered wrapper, with the central chart rendering 900x900 pixel scaled via a viewBox.

Jan 16, 2023

Loading thumbnail…

JS Bin

A force-directed network diagram visualizes product category sales and the flow of value between categories, with node size representing total sales and link width indicating switch importance. A slider filters links by value threshold, dynamically updating the visualization. The code uses d3.layout.force for node positioning, d3.scale.linear for size mapping, and SVG for rendering, with data embedded as JavaScript objects representing store departments and their interconnections.

Jan 16, 2023

Loading thumbnail…

Simple Gradient Fill using D3

Two rectangles demonstrate a reusable D3 linearGradient definition, created in an SVG `defs` element. The first rectangle fills its interior with a diagonal red-to-blue gradient, while the second applies the same gradient to a four-pixel stroke, leaving its fill empty. Using d3-selection and d3 v5, the code sets `x1`, `x2`, `y1`, and `y2` attributes on the gradient and appends offset `stop` elements to control color transitions. The example shows how one gradient can style both fill and stroke in the same SVG scene.

Jan 13, 2023

Loading thumbnail…

Sunrise gradients

A radial gradient composition depicts a stylized sunrise, rendered as a series of five concentric arcs. The code uses D3 v5 to generate paths via `d3.arc()`, with each arc filled by a `radialGradient` defined in SVG `defs`. Each gradient inherits from a base white-to-blue gradient using the `href` attribute, while varying focal and outer radii create layered slices. The arcs span from -90 to 90 degrees, forming a half-circle with light grey strokes, illustrating procedural gradient reuse.

Jan 12, 2023

Loading thumbnail…

Fork of Template [Backup]

This pie chart shows the top 10 car-producing countries in 2019, with each slice sized by total production value and a legend listing country names alongside formatted values. The visualization uses d3.csv to load data from a GitHub gist, then applies d3.pie and d3.arc to generate SVG path segments. A d3.scaleOrdinal maps distinct colors to each country, while custom legend groups combine circles and text elements. All output renders as static SVG within a centered layout, styled with external CSS.

Jan 12, 2023

Loading thumbnail…

RSSB | Initial [Backup]

This example presents an interactive solar system visualization where clicking a planet reveals its atmospheric composition as a pie chart and a line chart plotting average temperature against distance from the Sun. The main SVG scene uses animated circles along predefined orbital paths to represent planetary motion, with the `showDiagram` function toggling the visibility of the corresponding D3-generated charts and updating the page title. Pie charts are built using `d3.pie` and `d3.arc`, while line charts employ `d3.line` and `d3.scaleLinear` with axis labels, all rendered as SVGs with d3.v6.

Jan 11, 2023

Loading thumbnail…

Fork of Mathematical Graphic Patterns

The visualization displays an animated, generative pattern of colorful circles arranged in a grid. It simulates a modern-day screensaver with dynamic motion, where each circle's position, size, and color shift over time. The piece uses Canvas API calls for drawing, including `beginPath`, `arc`, and `fill`, and relies on `requestAnimationFrame` to drive the continuous animation. The effect is created through mathematical functions, such as sine and cosine, that calculate coordinates and radii based on grid indices and a time variable.

Jan 11, 2023