Skip to main content
SimilarExport ZIP
100%

Pseudo Line Chart

✓ Published1🌍 Public
Ssjpeno@wpi.edu
Last edited Sep 25, 2024
Created on Sep 25, 2024

This pseudo line chart displays two data series—pink and blue—as unconnected, path-based line approximations within an SVG canvas. Rather than using scales or axes, it plots raw coordinates directly. The example demonstrates SVG Path elements and styling attributes like `fill`, `stroke`, and `stroke-width`. The code employs D3.js version 7.8.5, specifically the `d3.line` generator, to create the path data, along with `select` for DOM manipulation. Axis labels for "Unemployment Rate" and "Year" are manually positioned.

AI-generated description

An approximation of a line chart using D3.js!

Watch the video and study the code to learn about:

  • SVG Path Elements
  • fill, stroke, stroke-width
  • stroke-linecap, stroke-linejoin
  • Vanilla HTML SVG Paths
  • D3.line
  • AI Assist

See also:

Full Playlist: Constructing Visualizations

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Pseudo Line Chart

This example shows two line charts comparing unemployment rate over time, with a pink line and a blue line plotted from hardcoded data arrays. The rendering relies on D3’s `line` generator to convert data points into SVG path strings, which are then drawn as `path` elements with `fill`, `stroke`, and `stroke-width` attributes. Axis labels for "Unemployment Rate" and "Year" are added as SVG text elements, rotated for the vertical axis. The code deliberately omits scales, using raw coordinates and fixed margins instead of an axis scale or ticks.

Nnitinramagiri1@gmail.com
85% match
Loading thumbnail…

Pseudo line chart

A pseudo line chart renders a jagged polyline as a decorative approximation of a data series, using a single SVG `<path>` element with rounded stroke caps and joins. The path connects seven points across a 960-by-500 canvas, alternating between descending and ascending segments to suggest fluctuating values. The visualization is hand-coded in raw SVG, with no JavaScript libraries, and relies on explicit coordinate data in the `d` attribute to define the line’s shape. A white background rectangle provides contrast for the thick black stroke.

LLouis Astorg
84% match
Loading thumbnail…

Pseudo Line Chart

A pseudo line chart approximates a line graph with a single, thick black path. The path connects six data points across a 960 by 500 SVG canvas, using rounded line caps and joins to create a smooth, continuous appearance despite the absence of axes or data labels. The visualization is rendered using raw SVG markup in an HTML document, with the path’s `d` attribute containing explicit coordinates and styling controlled via `stroke`, `stroke-width`, and related presentation attributes.

Wwspwll@gmail.com
83% match
Loading thumbnail…

Pseudo Line Chart with D3

This example uses D3 to draw a pseudo line chart, where thick, rounded strokes connect a series of six data points with distinct x and y coordinates on an SVG canvas. The line is rendered using the `d3.line` generator, with a stroke width of 41 pixels and round line caps and joins, transforming a simple path into a bold, graphic element. The chart emphasizes geometric form over traditional axis labels or scales, showcasing how D3's line API can create stylized visualizations from raw coordinate data.

Pperez.h89@gmail.com
83% match
Loading thumbnail…

Pseudo Line Chart

A pseudo line chart approximates a line plot with a single thick black stroke that connects six data points across a white SVG canvas. The path uses manually defined coordinates rather than a data-driven scale, creating a stylized, hand-drawn appearance. The example employs SVG path elements with a 15-pixel stroke width, set within an HTML document styled with the Share Tech font from Google Fonts. The rendering is purely static, with no axes, labels, or interactive behavior, emphasizing the abstract visual form over quantitative accuracy.

KKerotyzzzmo
83% match
Loading thumbnail…

Pseudo Line Chart with HTML

This example shows a pseudo line chart built entirely without a charting library, using a single SVG `<path>` element to approximate a data series with thick, rounded strokes. The chart presents six connected points across a fixed 960 by 500 canvas, using a black line with `stroke-width="40"` and `stroke-linecap="round"` to create a bold, abstract visual. The path’s coordinates are hardcoded in the `d` attribute, and the rendering relies on SVG’s native `stroke-linejoin` for smooth corners. No data is loaded externally; the visualization is a static, hand-authored approximation of a line chart.

CCurran Kelleher
82% match
Loading thumbnail…

Pseudo line chart with D3

A pseudo line chart uses a thick, rounded SVG path to connect fourteen colored circles scattered across the canvas, creating a playful visual of a data trend. The chart is rendered statically in SVG, with the path stroked in black and the circles colored via a static JavaScript array. The D3 library’s selection API, specifically `d3.select` and the `.join` method, programmatically maps the circle data to SVG elements, setting their `cx`, `cy`, `r`, and `fill` attributes to display the decorative points.

BBismark Kofi Owusu Sarfo
82% match
Loading thumbnail…

Pseudo line chart

A pseudo line chart approximates a scatter plot by drawing a single thick black polyline through five points across an SVG canvas. The path uses stroke-linecap and stroke-linejoin for rounded corners, with no underlying data points or axes. Rendered via raw SVG markup, the code defines a path element with explicit coordinate pairs (e.g., M4.5 131.5L237.5 269) and relies on styles.css for purple bars and red circles that are not present in the HTML. The chart employs Google Fonts' Share Tech typeface, though no text or additional elements appear.

Bbjfmbeck
82% match