Polar plot

100%

✓ Published0🌍 Public

Last edited Sep 19, 2018

Created on Sep 19, 2018

This polar plot visualizes the parametric function sin(2t)cos(2t) as a red line on a circular grid. The plot uses a custom angular orientation, proceeding counterclockwise from 3 o'clock, which differs from D3's default clockwise radial direction starting at 12 o'clock. The code leverages `d3.svg.line.radial` to draw the line, with a linear scale mapping data values to radii. It also constructs radial and angular axes using SVG groups, circles, and lines, with a dashed style for the grid.

AI-generated description

This example demonstrates the construction of a polar plot of a parametric function, sin(2t)cos(2t). A d3.svg.line.radial is used to draw the red line. Note the definition of the line’s angle: D3’s radial lines and areas proceed clockwise starting at 12 o’clock, while this plot proceeds counterclockwise starting at 3 o’clock!

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/4583749'>Polar Plot</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Polar Plot

A polar plot traces the parametric function sin(2t)cos(2t) as a red line on a circular coordinate grid, with radial circles and 30° angular ticks labeled from 0° to 330°. The visualization uses D3 v3’s `d3.svg.line.radial` for the curve, mapping the function’s time parameter to angle and its value to radius; angular positions are negated and offset by π/2 to align counterclockwise from 3 o’clock, differing from D3’s default clockwise-from-12 orientation. The SVG output includes axes, dashed grid lines, and a solid outermost circle, all styled via CSS classes.

Mmbostock

95% match

Loading thumbnail…

Polar Clock II

The Polar Clock II visualization displays the current time as a set of six concentric rings, each representing a time unit from seconds to year, with colored arcs and labels showing the progression within each period. The code uses D3 v4, SVG, and a timer to repeatedly update the visualization, with `d3.arc` generating the curved bodies and text paths for each field. It relies on `d3.timeFormat` and date intervals like `d3.timeDay` to calculate angles and label values, while the `d3.scaleRainbow` color scale maps each angle to a hue.

Mmbostock

69% match

Loading thumbnail…

Polar Clock

This polar clock visualizes time as six nested, colored arcs, each representing seconds, minutes, hours, days, dates, and months, with the arc length proportional to the current value. The SVG updates every second with an elastic transition, using `d3.svg.arc` for curved shapes, `attrTween` to interpolate arc angles, and a linear color scale to map each value to a hue. The code, built with D3 v3, tracks the current date via a `fields()` function and respects the `document.hidden` property to pause animation when the tab is inactive.

Mmbostock

68% match

Loading thumbnail…

Line / Area Chart

This example shows a Cartesian line and area chart plotting two trigonometric functions, sine and cosine, against a shared linear x-axis. A purple line represents sine, while a semi-transparent green area represents cosine, with gridlines spanning the plot area. The visualization uses d3fc’s `chartSvgCartesian` to build the chart, while `seriesSvgLine`, `seriesSvgArea`, and `annotationSvgGridline` are combined via `seriesSvgMulti` for rendering. Data is generated inline with `d3.range`, and the x- and y-domains are calculated using `fc.extentLinear` with padding applied to the y-scale.

CColinEberhardt

67% match

Loading thumbnail…

Radial Scatter Plot

This radial scatter plot displays wind speed and direction data as colored points arranged in a circular layout around a central axis. Each dot represents an observation, with its angular position indicating wind direction and radial distance encoding value magnitude. Using d3.svg.line.radial for coordinate transformation, the visualization places circles via SVG transforms while d3.scale.linear maps values to radius. The code imports d3-scale-radial.js and d3.scale.category20 for point coloring, rendering a polar coordinate system with concentric grid circles and directional tick marks against a clean white background.

BBadisheng

67% match

Loading thumbnail…

Polar Clock III

A polar clock visualizes time through a series of six concentric rings, each representing a progressively shorter time unit from years to seconds. The outermost rings track years and months, while inner rings display weeks, days, hours, and minutes. Each ring contains colored tick marks for sub-units and a rotating arm that sweeps through them, with the active tick highlighted. Built with d3.v4, the animation uses `d3.timeInterval` for time arithmetic, `d3.arc` for arm geometry, and `d3.scaleRainbow` for color mapping, updating every second via CSS transitions.

Mmbostock

66% match

Loading thumbnail…

Line / Area Chart

This example shows a Cartesian chart with a sine wave rendered as a purple line and a cosine wave as a semi-transparent light green area, sharing a common x-axis over 50 data points. It uses d3 and d3fc, combining a d3fc line series, area series, and gridlines into a single multi-series component within a d3fc Cartesian chart. Linear scales define both axes, with the y-domain padded using d3fc’s extent utility. The data is generated inline with d3.range and Math functions.

CColinEberhardt

64% match

Loading thumbnail…

D3 Lines - Radial Lines

This example shows how D3’s radial line generator maps polar coordinates to Cartesian paths, tracing a series of points around a circle. An SVG group is translated to the center, and a path is drawn with a stroke, connecting points with varying radii—most at 80 units and one at 30—to create a spiked, star-like shape. The code uses `d3.radialLine()` to generate the path data from an array of angle–radius pairs, then appends it to the SVG via `d3.select`. The rendering is static, relying on D3 v7 and SVG output.

SSubhendu Karmakar

64% match