print_template

100%

print_template - colour scale

✓ Published0🌍 Public

Last edited Jul 24, 2016

Created on Jun 28, 2016

This example demonstrates the non-linear nature of d3’s linear color scale by mapping a custom domain [0, 0.25, 0.5, 0.75, 1] to a range of five distinct colors, from white through green, yellow, and red to black. The code prints the color values for a set of input numbers, then normalizes logarithmic values from 0.001 to 1 and prints those colors as well, revealing how the scale compresses and expands color transitions unevenly. Using d3.scale.linear, d3.format, and d3.range, the visualization appends text labels to an SVG canvas via d3.select and svg.selectAll, with the author’s custom print() function collecting outputs for display.

AI-generated description

Similar vizzes

Loading thumbnail…

This example demonstrates how to use d3.scale.linear to map numeric values to both a numeric range and a color range, then prints the resulting intermediate value and color to the SVG canvas. The code implements a simple debugging tool: each call to the print function adds a text label to the display, positioning them vertically down the canvas. Using the d3.select API to target the SVG element, it renders the scale output for the midpoint of the domain (0.5), showing the mapped numeric result and hexadecimal color.

RRobinL

89% match

Loading thumbnail…

logarithmic colour scale

This example shows how a logarithmic color scale maps changing data values to colors, compared to a linear mapping. It renders a horizontal strip of rectangles, each colored according to its position on a log scale, with an axis below using `d3.axisBottom` for reference. Using D3 v4 with SVG, the code defines a log scale with `d3.scaleLog()`, inverts data values to create color stops, and assigns fills to the rectangles via the custom `logColour_scale`.

RRobinL

75% match

Loading thumbnail…

using of scale, scaleLinear(), scaleOrdinal()

This example demonstrates how D3 scaling functions map input domains to output ranges for both numeric and categorical values. A `scaleLinear()` maps values 0–3 to a pixel range of 0–300, logging transformed results to the console. A `scaleOrdinal()` assigns colors from an array to categorical domain values, and the code appends four div elements to the DOM, coloring each with a different color via D3 selections. The page is a minimal HTML document using d3.v5 and relies on CSS styling through inline `.style` calls.

Ssgzzhinde

74% match

Loading thumbnail…

D3 Example

A D3 example demonstrates a linear scale mapping a data domain of 1 to 5 into a pixel range of 0 to 200, driving the x-position of text elements in an SVG. Using `d3.select` and `scale.attr`, the code binds arrays of numbers to text nodes, updating their position and fill color on a five-second timer. The `enter`, `update`, and `exit` selections manage the text lifecycle, showing red, blue, green, cyan, and magenta labels as the dataset changes. This illustrates data joins with `d3.scale.linear` and `svg.append`.

RRasinj

74% match

Loading thumbnail…

print_template

This example demonstrates a simple text-based data visualization using D3.js to print strings to an SVG canvas. The code defines a `print` function that pushes each input value into an array, then uses D3's `selectAll` and `append` methods to create text elements on the SVG, positioning each new entry vertically down the canvas. While the default call prints "hello", the pattern shows how repeated calls would stack text lines, illustrating basic dynamic text rendering with D3's SVG manipulation.

RRobinL

73% 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

73% match

Loading thumbnail…

Gist 51fecbcad3c5a744b1a96ad079f2c210

This example demonstrates the behavior of D3’s `scaleLinear` function, showing how a numeric input domain of [0, 1] maps to an output range of [0, 100]. It prints the scaled results for values 0.5, 0.75, 0, 1, and 2, revealing that the mapping is continuous and extends beyond the specified domain. The code imports the scale from `d3-scale` (via the `d3` namespace) and logs each conversion to the console, making the linear transformation’s direct proportionality clear.

RRonolibert

72% match

Loading thumbnail…

d3js Exercice 2 - Scales

This example demonstrates how d3.scaleLinear maps input values from a domain to a range, showing the output for inputs of 0, 10, and 20, then extending beyond the interval to reveal unbounded behavior. It then applies the clamp(true) method to the scale, which restricts outputs for out-of-range values like -10 and 200. Built with D3 v4, the code writes results directly to the document via document.writeln, and comments suggest experimenting with invert, power, log scales, or a color range.

JJeromeMouly

71% match