Azhar Harisandi

@azharharisandi14·4 public vizzes

Fork of Axis Labels

This example demonstrates how to add labels to both axes of a scatterplot-style visualization using D3. The code constructs a simple chart with a gray inner rectangle, linear scales, and bottom and left axes, then appends rotated and centered text labels for the X and Y axes. It uses modular functions like `xAxisLabel` and `yAxisLabel` to position the labels with configurable offsets. The implementation relies on D3’s `scaleLinear`, `axisBottom`, and `axisLeft` APIs, with a ResizeObserver to handle responsive sizing.

Dec 26, 2024

Loading thumbnail…

Fork of Margins2

This example demonstrates the fundamental visualization layout pattern of defining margins to create an inner rectangle for chart content. A gray rectangle is drawn within the container, positioned according to specified top, right, bottom, and left margins, with its dimensions calculated by subtracting those margins from the container’s total width and height. The code uses a ResizeObserver to track container size changes and updates the state accordingly, then renders the rectangle with D3’s `select` and `join` methods. The visualization adapts responsively as the container resizes, showing how margins reserve space for axes and other chart elements.

Dec 26, 2024

Loading thumbnail…

Fork of Circles with D3

This example shows an interactive SVG canvas with a single circle that moves and changes color in response to mouse movement and clicks. The circle follows the cursor position using `d3.pointer` and a `setState` callback, while clicking the canvas generates a random hexadecimal color via `Math.random`. The code uses D3’s General Update Pattern with `selectAll`, `data`, and `join` to manage the SVG and circle elements, and binds state-driven data objects to set `cx`, `cy`, `r`, and `fill` attributes dynamically.

Dec 26, 2024

Loading thumbnail…

Fork of Margins

This example demonstrates the role of margins in defining the plotting area. A blue rectangle is drawn as the inner region, with axes positioned along its bottom and left edges. The code uses D3’s `scaleLinear` to map data values to pixel coordinates, and `axisBottom` and `axisLeft` to render the tick marks and labels. The visualization is created with an SVG container, where the rectangle’s dimensions and axis placements are computed from the margin values.

Dec 25, 2024