Skip to main content
SimilarExport ZIP
100%

Point scale

✓ Published0🌍 Public
AAlark Joshi
Last edited Oct 11, 2022
Created on Oct 11, 2022
Forked from HTML Starter

A small set of orange circles demonstrates D3's `d3.scalePoint()`, which maps categorical weekday names to x-coordinates. Each circle is placed along a horizontal line based on its associated day, with a fixed radius of 4 pixels, while the y-position is constant. The data, a simple array of weekday/value pairs, is bound to circles using `selectAll().data().enter().append()`. The visualization uses static SVG rendering within an HTML page, with all styling defined in CSS and the scale’s range set to 200 pixels.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

scalePoint() in action

Five orange dots mark Monday through Friday along a horizontal line using a point scale, with each dot positioned by its day value. The `d3.scalePoint()` API maps the categorical domain to a continuous pixel range, and the console logs the scale's `step()` method to reveal the uniform spacing between points. The example renders in SVG within a 700-by-240 pixel canvas, using D3 v7 and data from a hardcoded array of weekday objects.

SSubhendu Karmakar
88% match
Loading thumbnail…

D3 Scale

This example demonstrates how D3 scales map input data to visual output, using a linear scale to position circles along the x-axis and a multi-domain color scale to assign fill colors. The circles represent values from -10 to 10, with colors transitioning from red through gray to blue. It renders as an SVG using d3.scaleLinear for both positioning and color interpolation, with data bound through d3.select and .join(). The code references D3 v7 scale types in utils.js, including scaleTime, scaleBand, and scaleOrdinal, though only linear scales are actively applied.

SSubhendu Karmakar
74% match
Loading thumbnail…

D3: Drawing Scale

This example demonstrates how D3’s linear and square-root scales translate raw data coordinates into pixel positions and circle radii. It plots an array of 11 `[x, y]` pairs as circles and red text labels on an SVG canvas. The code uses `d3.scaleLinear()` for both the x and y axes, and `d3.scaleSqrt()` for sizing the circles proportionally. The scales are configured with custom domains and output ranges, with padding applied to keep marks inside the 500×300 viewport. Data is rendered statically, with labels showing the original coordinate values.

MMarisa Tania
73% match
Loading thumbnail…

D3 Scale Functions

This example demonstrates how D3 scale functions map input data values to visual output positions. It plots a set of numeric data points as circles along a horizontal axis, with each value labeled above its corresponding circle. The code uses `d3.scaleLinear()` to map the domain (0–10) to a pixel range, and renders the result as SVG elements. An axis is added using `d3.axisBottom()`, and the utility function `getScale` supports multiple scale types, including `scaleSqrt`, `scaleLog`, and `scaleBand`, though only linear is actively applied here.

SSubhendu Karmakar
72% match
Loading thumbnail…

dv.27 - stylin' line chart

This stylin' line chart visualizes one week of temperature data from the Data Canvas Sense Your City Dataset. React manages the component tree, while D3 v6 scales and axes map timestamps to temperatures, with a smooth natural curve connecting the points. The SVG rendering includes circular markers with native `<title>` tooltips and a custom Poppins font, styled with bold orange strokes and minimal gray ticks.

Zzach b.
72% match
Loading thumbnail…

Apriori

This visualization displays sentiment scores for each day of the week as individual points in an SVG scatterplot. The code loads tab-separated data from a GitHub repository and maps days to ordinal x-axis positions while sentiment scores are scaled linearly on the y-axis. Hovering over a circle reveals a tooltip showing the associated itemset and score, highlighting the point in orange. The implementation uses d3.scale.ordinal and d3.scale.linear with d3.svg.axis for the chart’s axes and event handlers for the interactive tooltip.

苏苏巨亮
72% match
Loading thumbnail…

fresh block

This example shows a simple scatterplot-style visualization of five circles, with each circle's position and color determined by its data value. The circles are placed horizontally and vertically based on the array `[25, 50, 125, 75, 100]`, and they turn purple when the value exceeds 100, otherwise yellow. The visualization uses D3 v4, selecting the body element, appending an SVG, and binding data with `selectAll` and `enter()`. Circle radii are fixed at 10, while `cx` and `cy` attributes derive directly from the data points, creating a one-dimensional distribution of distinct colored dots.

BBrieLewis
71% match
Loading thumbnail…

Timeseries Plot

This example visualizes a week of San Francisco temperature data as a scatterplot, with time on the x-axis and temperature on the y-axis. Each data point is rendered as a circle, and hovering over a circle displays a tooltip with the corresponding day of the week. The code uses `scaleTime` and `scaleLinear` from D3 v5 to map data to pixel coordinates, while React handles the SVG rendering. The data is loaded as CSV via `d3.csv` and transformed with date parsing and numeric conversion. Axis components are custom-built using React, and the overall layout leverages D3’s `extent` and `nice` functions for domain adjustments.

Ffjvoris
71% match