Skip to main content
SimilarExport ZIP
100%

Make Something

✓ Published0🌍 Public
QQingyang Wang Profolio
Last edited Feb 6, 2023
Created on Jan 14, 2023
Forked from Hello VizHub

A minimal SVG visualization displays an empty 1000-pixel-wide canvas with a single horizontal axis drawn using d3.axisBottom. The axis maps a linear scale from 0 to 100 across a range of 100 to 800 pixels, rendered as a static tick-marked line. The code uses d3.scaleLinear and d3.axisBottom within a d3-selected SVG container. No data points, marks, or interactive elements appear; the example focuses solely on demonstrating axis construction and positioning.

AI-generated description

Make Something Assignment

MIT Licensed

Similar vizzes

Loading thumbnail…

Test D3.js

A minimal, blank SVG canvas of 960 by 500 pixels serves as the sole visual output, framed by a hidden-overflow layout. The example demonstrates a foundational D3.js setup, embedding an empty SVG element and linking a separate stylesheet that zeroes the page margin. No marks, axes, or data are rendered; the page simply establishes the structural and stylistic baseline for future D3.js visualizations. The code relies on the raw SVG API within an HTML document, with D3.js not yet invoked.

Llukasbro
77% match
Loading thumbnail…

SVG Demo

This demo displays a minimal SVG visualization: a single D3 axis rendered inside an SVG element. The axis is created from a two-value data array, with a linear scale using the extent of the data and a bottom-oriented axis. The code uses d3.scaleLinear, d3.extent, and d3.axisBottom, and calls the axis with a D3 selection. The scale’s domain is normalized with .nice(), and the axis is placed in a group with a transform offset. The bundle.js file contains the compiled index.js, which imports these D3 v5 functions directly.

GGabrz
76% match
Loading thumbnail…

Scales and Axes

This example demonstrates D3’s scale and axis functions by rendering an empty plotting area with a gray inner rectangle and labeled axes. It uses `d3.scaleLinear` to map data values from 0 to 100 to pixel coordinates, and `d3.axisBottom` and `d3.axisLeft` to generate tick marks and labels along the bottom and left edges. The visualization is drawn into an SVG container, with margins defined for the plot frame. No dataset is shown; the focus is purely on constructing a coordinate system with D3’s low-level utilities.

Mmelissastrong89@gmail.com
76% match
Loading thumbnail…

Untitled

A single linear axis displays values from 0 to 50, with tick marks placed every 10 units. The axis is rendered as an SVG group translated to a fixed position within a 700-by-100 pixel canvas. The example uses D3.js version 3.5.12, specifically `d3.svg.axis()` and `d3.scale.linear()`, to map the domain to a range of 0 to 400 pixels. Explicit `tickValues` are generated via `d3.range()`, and the axis is appended to an SVG container and called on the group.

AAhmeTyAtakan
75% match
Loading thumbnail…

Make Something - Gauri Jare

A teal rectangle follows the mouse cursor across a full-window SVG canvas. The code uses d3.select to create the SVG and append the rectangle, setting its width and height based on the window dimensions. A mousemove event handler updates the rectangle’s x and y attributes with the cursor’s event coordinates. The plain black-stroked shape moves freely, demonstrating basic D3 interaction with the DOM.

GGauri Jare
75% match
Loading thumbnail…

Make something

This example demonstrates a simple interactive visualization where a circle follows the mouse cursor across the screen, using a unidirectional data flow pattern. The code uses d3-selection’s `select` and `selectAll` with data joins to create and update an SVG element. Mouse movement events trigger a `setState` function that updates an immutable state object with the cursor’s `x` and `y` coordinates, which then re-renders the circle’s `cx` and `cy` attributes. The rendered circle has a fixed radius of 50 pixels, and the SVG fills the entire viewport.

QQingyang Wang Profolio
75% match
Loading thumbnail…

Untitled

This example shows a simple scatter plot of 100 randomly generated points, each positioned on a 500-by-500 pixel SVG canvas. The visualization uses D3.js v4 scales and axes to map linear domains to screen coordinates, with red circles drawn for each point. The code appends an SVG group to the page, translates it by a 40-pixel margin, and uses `d3.scaleLinear` for both the x- and y-axes, which are rendered via `d3.axisBottom` and `d3.axisLeft`. Data is created in a loop using `Math.random()`.

Ffay Alomar
74% match
Loading thumbnail…

Zero Ticks

This example demonstrates a minimal SVG axis from D3 v3 that displays only the domain path, with tick marks and labels completely suppressed by setting `ticks(0)`. The axis is rendered using `d3.svg.axis`, oriented to the bottom of a chart area defined by fixed margins, and styled with a black stroke and crisp edges. The underlying scale is a `d3.scale.identity`, mapping a width-based domain to pixel coordinates. The visible output is a single horizontal line, highlighting how axis components can be selectively hidden while retaining the baseline.

Mmbostock
74% match