Skip to main content
SimilarExport ZIP
100%

Pseudo-Viz of Spacewalks

✓ Published0🌍 Public
Mmfoslan14@gmail.com
Last edited Sep 26, 2024
Created on Sep 26, 2024
Forked from Marks and Channels

This pseudo-visualization uses horizontal bars to show the duration of spacewalks, with their lengths proportional to the data values. Overlaid circles use categorical colors to distinguish different spacewalkers, each positioned at a corresponding vertical index. The visualization employs the d3 selection API to build the SVG scene, combining a `length` module that renders rectangles with a `hue` module that draws colored circles. The data is a simple array of five values, and the design imitates a rough sketch of spacewalk tracks.

AI-generated description

Here I attempted to use length and hue to create a rough form of my Spacewalks illustration. In that illustration I wanted to extend lines that imitated a "spacewalk".

The length of the spacewalks will represent the duration of said spacewalk. The circles from hue are meant to distinguish different spacewalkers associated with each spacewalk.

MIT Licensed

Similar vizzes

Loading thumbnail…

Spacewalks

This visualization displays 433 spacewalks chronologically, grouped by spacewalker, with each walk shown as a bar whose length represents duration. The data comes from NASA and is loaded from a CSV file. The view also ranks spacewalkers by total number of walks and by cumulative duration. The code uses D3 to parse the data and render the SVG elements.

Mmfoslan14@gmail.com
86% match
Loading thumbnail…

Exercise2: Pseudo Visualization

Four horizontal bars, colored orange, red, green, and blue, with varying widths, sit on a white background, each outlined in black. The visualization uses basic Scalable Vector Graphics (SVG) primitives—`rect` elements defined directly in the HTML—to create a static, pseudo-chart that mimics a stacked bar layout. No JavaScript libraries or data-binding frameworks are present; the rendering is purely declarative, with positions and dimensions hard-coded in the markup and styling provided by a simple external stylesheet.

Nnubhatia
71% match
Loading thumbnail…

Pseudo scatter plot

This pseudo scatter plot approximates a traditional scatter plot using horizontal bar rectangles as visual substitutes for data points, with labels A through E marking categorical rows. The SVG visualization emphasizes hover interaction, turning bars red when the mouse passes over them. The code relies on raw SVG elements—rect, text, and hover states via CSS—rather than JavaScript libraries or data-binding frameworks. Purple horizontal bars of varying widths suggest proportional values, while commented-out circles and vertical bars hint at alternative design explorations. The page sets a bold, tech-inspired font and hides the body margin for an immersive full-viewport rendering.

Bbjfmbeck
71% match
Loading thumbnail…

Pseudo Barchart d3

A dense field of semi-transparent green bars spans the full viewport, mapping each item in an array of 80 random numeric values to its vertical position and height via D3’s `selectAll().data().join()` pattern. The bars use SVG `rect` elements generated with a fixed width and horizontal spacing, while hover interactions alter opacity, fill color, and stroke width through CSS transitions. The visualization is built with D3 v7, using random data generated in JavaScript to fill the window dimensions.

Sserebryanaya.n@gmail.com
70% match
Loading thumbnail…

Exercise 1: Pseudo Hanging Bar Chart

A pseudo hanging bar chart presents categorical values as gray bars suspended from a curved baseline, with a red-outlined purple first bar for emphasis. The SVG rendering uses raw HTML elements—`<rect>`, `<line>`, `<path>`, and `<circle>`—without JavaScript libraries. Axis ticks and labels are manually positioned, while a black polyline connects circle markers over each bar to suggest a trend line. The chart approximates a hanging bar layout by anchoring bars at varying heights along the curve, with the y-axis inverted so lower values appear higher.

Aandu006@gmail.com
69% match
Loading thumbnail…

Psuedo Visualisations Code Along (Episode 2)

An approximate bar plot shows five labeled categories with varied rectangular bar lengths on a blank canvas. Each bar uses raw SVG `rect` elements, with the first bar styled via a CSS class and the remaining bars filled with a solid red color. Text labels are positioned manually using SVG `text` elements, and the entire visualization is rendered within a fixed 501×389 viewBox.

GGautam Doshi
69% match
Loading thumbnail…

Pseudo

This example shows four gray bars labeled A, B, C, and D, each with different heights representing categorical values. The bars are rendered as SVG rectangles on a white background, with text elements using black fill for labels. The visualization uses a static HTML page with CSS for styling and inline SVG markup, demonstrating a minimal bar chart without any JavaScript libraries or data processing. The bars are positioned at fixed coordinates within a 361×372 viewBox, with heights varying from 120 to 328 pixels to convey relative magnitudes.

Vvalsorayksterob
69% match
Loading thumbnail…

Pseudo Horizontal Bar Chart

The visualization displays four horizontal bars of varying lengths, labeled A through D, on a white background, using a pseudo bar chart format where bars are represented as black rectangles. It is rendered as an SVG with hardcoded coordinates, with each bar’s width decreasing from top to bottom, mimicking a categorical comparison. The text labels are placed to the left of each bar using the Share Tech font, and the chart uses basic SVG elements like `rect` and `text` without any external libraries or data-driven logic.

Mmaciekawsq@gmail.com
69% match