Log-Log Plot

100%

✓ Published0🌍 Public

Last edited Feb 9, 2016

Created on Nov 5, 2011

A log-log plot displays three curves for the functions f(x) = x, x², and x³ across a range from 0.1 to 100, using logarithmic scales on both axes. The code loads data from a TSV file and renders it as SVG paths through d3.svg.line, with logarithmic scales via d3.scale.log and axes via d3.svg.axis. A legend identifies each curve by its formula, and a clipPath confines the lines to the plotting area.

AI-generated description

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Natural Log Scale

A natural-logarithmic y-axis displays a polynomial curve from x=0 to 100, with tick labels formatted as "e⁰" through "e⁹" using Unicode superscripts. The example uses d3.v3 with `d3.scale.log` and `d3.svg.axis`, applying a custom `tickFormat` that converts log values to superscript exponents. The line is drawn with `d3.svg.line`, while the SVG output includes styled axis text and a steelblue path. The data series is generated procedurally as `[x, x²+x+1]` for 100 points.

Mmbostock

75% match

Loading thumbnail…

D3 Scale - ScaleLog

This example demonstrates how a logarithmic scale maps data values across an SVG canvas. It places six text labels at positions calculated by a `d3.scaleLog()` function, with a domain spanning from 10 to 100,000 and a range of 0 to 700 pixels. The visualization highlights how log scales compress large numerical ranges, showing labels for 0, 10, 100, 1,000, 10,000, and 100,000 at increasing intervals. The code uses D3 v7’s `scaleLog`, `scaleLinear`, and `scaleSqrt` definitions, rendering the output as SVG text elements.

SSubhendu Karmakar

72% match

Loading thumbnail…

Log Axis

This example demonstrates a log-scale axis using a hard-coded domain from 0.0124123 to 1230.4, rendering tick labels with the `",.1s"` format. The visualization uses d3.v3’s `d3.scale.log` to create the logarithmic scale and `d3.svg.axis` to draw the axis with 20 ticks. The SVG output is positioned within a larger canvas using margins, and styled with CSS for font and stroke. The code does not include a data source, as it focuses solely on the axis component.

Mmbostock

71% match

Loading thumbnail…

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.

RRSSBDAE

69% match

Loading thumbnail…

logscale

This scatter plot displays San Francisco temperature readings over a week, using a logarithmic y-axis (d3.scaleLog) to compress the range of temperature values. React components render the SVG, with d3.scaleTime mapping timestamps to the x-axis and d3.extent computing the domain. The visualization includes custom axes, radial gradient eyes, and a face-like background circle, while data loads from a CSV via d3.csv.

JJonas Carvalho

68% match

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.

RRSSBDAE

68% match

Loading thumbnail…

Fork of Log Scale Investigation

This visualization displays car production data on a four-quadrant radial chart with concentric rings and color-coded gradients. It uses D3 v5 to load CSV data, generate SVG elements, and apply a log scale analysis through arc generation for each ring. The chart renders via SVG with viewBox, transforms, and CSS styling, including linear gradients for quadrant coloring and axis scales that are rendered without tick marks.

Tt0miwa22

67% match

Loading thumbnail…

Contour Plot II

This example visualizes the Goldstein–Price function, a common test function for optimization, as a set of 20 logarithmic contour levels. The contours are drawn with SVG paths, each filled with a color from the YlGnBu interpolated color scale to indicate value. The underlying grid of 240×125 values is computed by sampling the function across its domain. The code uses `d3.contours` to generate the contour geometry, `d3.geoPath` with `d3.geoIdentity().scale()` to project the coordinates to the SVG canvas, and a `d3.scaleLog` for threshold mapping.

Mmbostock

67% match