Skip to main content
SimilarExport ZIP
100%

Radial Line Chart

✓ Published0🌍 Public
GGerardoFurtado
Last edited Jul 9, 2019
Created on Jul 9, 2019

A radial line chart displays Twitter's stock price from July 2016 to July 2017, with dates positioned around a full circle and closing prices mapped to radial distance from the center. The line renders in SVG using `d3.lineRadial`, `d3.scaleTime`, and the custom `d3.scaleRadial` plug-in, which applies a square-root transformation to the linear scale. Monthly labels and concentric grid circles are generated from `y.ticks`, while `transition.attrTween` animates the stroke-dashoffset to draw the line clockwise. Data comes from a CSV file.

AI-generated description

A radial line chart showing how Twitter's stock has changed over the last year - from July 2016 to July 2017. Not particularly useful - both axes need work to improve legibility (and I'm not sure using d3.extent is a good idea here).

forked from <a href='http://bl.ocks.org/tlfrd/'>tlfrd</a>'s block: <a href='http://bl.ocks.org/tlfrd/fd6991b2d1947a3cb9e0bd20053899d6'>Radial Line Chart</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Untitled

A radial line chart displays Twitter's closing stock price over a year, with time mapped to angle and price to distance from the center. Monthly tick labels and concentric price rings aid reading, while a blue path animates around the circular layout on load. The visualization uses d3.scaleTime, d3.scaleRadial from a custom d3-scale-radial.js file, and d3.lineRadial, with SVG transitions for drawing the trajectory.

Mmauricio-acosta-reyes
88% match
Loading thumbnail…

Twitter - Line Chart ICE-7

This line chart displays Twitter stock prices over the last week, plotting timestamps on the x-axis and share values on the y-axis. The visualization uses D3 v5 with React, rendering to an SVG via the `line` generator with `curveBasis` smoothing. Axes are constructed using `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft`, with grid lines and labels styled via CSS. Data is loaded from a CSV file hosted on GitHub, parsed with `csv`, and converted to numeric and date formats before rendering.

Mmanojgne
76% match
Loading thumbnail…

Multiple line graph in v4

This example displays two time-series lines, showing "close" and "open" stock prices over a month, with circular markers at each data point. Built with D3 v4, it maps dates on a time scale and values on a linear scale, then appends SVG paths for each line and circles for the observances. The chart uses `d3.timeParse`, `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, `d3.axisBottom`, and `d3.axisLeft`, and loads its comma-separated data from a local CSV file.

GGerardoFurtado
75% match
Loading thumbnail…

Simple Line Graph v7

This chart displays the closing price of a stock over time from late March to early May 2012, using a single blue line. It renders data from a CSV file as an SVG path, with the x-axis showing dates and the y-axis showing price values. The code loads the data via `d3.csv`, parses dates with `d3.timeParse`, scales the axes with `d3.scaleTime` and `d3.scaleLinear`, and draws the line using `d3.line`. It appends axes with `d3.axisBottom` and `d3.axisLeft` to complete the visualization.

Dd3noob
75% match
Loading thumbnail…

Fork of Svelte + D3: Radial

A radial line chart visualizes daily surface temperatures from 1940 to 2024, with each year represented as a single closed ring. The visualization highlights 2023 and 2024 in distinct pink and blue strokes while older years appear as faint white loops, emphasizing recent climate trends. Using d3’s `lineRadial` generator with a Catmull-Rom curve, the code maps day-of-year to angles and temperature values to radii via `scaleLinear`. Yearly groups are separated with d3.groups, and opacity is scaled by year to show historical density. The SVG renders responsively, with data sourced from climatereanalyzer.org.

SSafrin La Batu
74% match
Loading thumbnail…

Svelte + D3: Radial

This radial chart displays daily global surface temperatures from 1940 to 2024, with each year drawn as a single circular path. The visualization highlights 2023 and 2024 in distinct colors, while older years appear as faint white rings. Using d3.lineRadial with a curveCatmullRom, the code maps day-of-year to angle and temperature values to radius via d3.scaleLinear. Data is loaded from a CSV using d3.csv with autoType, grouped by year with d3.groups, and rendered as SVG paths. The background uses a dark radial gradient, with an opacity scale differentiating historical from recent years.

MMatthias Stahl
73% match
Loading thumbnail…

Line chart

This line chart visualizes yearly sales data using a time-series line graph. The SVG rendering uses D3.js v7 with `d3.csv` for data loading, `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` for axes, and `d3.line` to generate the path. Data comes from a remote CSV file accessed via a gist URL.

Rr79162810@gmail.com
73% match
Loading thumbnail…

Svelte + D3: Radial (II)

This radial line chart shows daily Atlantic sea surface temperatures from 1982 to 2024, with each year represented as a single spiral line. One line traces the temperatures through the 366 days of a year, with recent years (2023 and 2024) highlighted in pink and blue, while older years appear as translucent white strokes. The visualization uses d3.csv with autoType for data loading, d3.scaleLinear for the angle and radius scales, and d3.lineRadial with a Catmull-Rom curve to generate the spiral paths. The data comes from Climate Reanalyzer, and the SVG is rendered responsively using Svelte’s bind:clientWidth and bind:clientHeight.

MMatthias Stahl
73% match