Fork of Fork of Fork of Digital mockup of a line chart

100%

Fork of Fork of Fork of Digital mockup of a line chart

✓ Published0🌍 Public

Last edited Jan 27, 2023

Created on Jan 27, 2023

Forked from Fork of Fork of Digital mockup of a line chart

This pseudo-visualization presents a stylized mockup of age distribution across major political parties, using horizontal bars to compare two groups. The chart encodes party affiliation through color, with red and blue rectangles representing different segments. Built with React and rendered as SVG, the visualization uses static positioned `<rect>` elements sized to suggest proportional differences between categories. The design incorporates the Share Tech font family from Google Fonts, creating a digital aesthetic that mimics a line chart while maintaining a fixed, non-interactive layout.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Fork of Digital mockup of a horizontal bar chart

This horizontal bar chart mockup displays five black bars of varying heights on a white background, labeled A through E below the x-axis. Using embedded SVG within an HTML page, the visualization renders dark rectangles with hardcoded coordinates and dimensions. The chart applies the Share Tech font from Google Fonts to both the title text and axis labels. The code uses plain SVG elements like rect and text, styled through CSS, demonstrating a static pseudo-viz rather than an interactive data-driven chart.

Ddsims2157

81% match

Loading thumbnail…

Fork of Fork of Digital mockup of a line chart

This example presents a line chart pseudo-visualization, displaying a jagged data trend across seven quarterly points (Q1–Q7) with axis lines and tick marks. The code uses plain SVG elements—`line`, `rect`, and `text`—to construct the static chart manually. The page is a bare HTML document with inline CSS and JavaScript, loading the Share Tech font from Google Fonts. It does not leverage external charting libraries; instead, it defines each coordinate and stroke directly within the SVG markup, rendering a fixed, non-interactive visual.

Ddsims2157

81% match

Loading thumbnail…

Fork of Fork of Pie chart

This example displays an interactive pie chart showing the distribution of survey participants across different age groups, with each slice labeled with its value and accompanied by a legend listing age groups and member counts. The visualization fetches CSV data from a remote GitHub gist using `d3.csv`, then renders SVG paths with `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` for color mapping. Text labels are positioned using `arc.centroid`, and the legend is built manually with SVG rectangles and text elements. The chart is styled with custom CSS, including hover-free static rendering and a centered title.

Aajaysonu

75% match

Loading thumbnail…

Fork of Fork of Pseudo Bar Chart Horizontal

This example demonstrates a horizontal bar chart using pure SVG shapes, with four black bars of varying lengths representing categories A through D. The chart is built directly in HTML with React, using SVG `<rect>` and `<text>` elements positioned via transform matrices to create the horizontal layout. The rendering relies on inline SVG with CSS styling for typography, featuring the Poppins font at a large size for labels. The data is hardcoded within the SVG markup, showing a straightforward approach to simple categorical visualization without external charting libraries.

Jjinjuta.s.au@gmail.com

75% match

Loading thumbnail…

Fork of React & D3 Vibecoding Starter

This chart visualizes polling results for the 2025 German federal election, showing the percentage of votes for each party. The bar chart displays values from a CSV file, with each bar colored by party and labeled with its percentage. A translucent, glowing interval rectangle behind each bar represents the standard error. Built with React and D3 v7, the visualization uses `scaleBand` and `scaleLinear` for axes, and clicking a bar dims the others for focused comparison.

CChristoph Kinkeldey

75% match

Loading thumbnail…

Fork of Fork of Fork of React Starter

This visualization shows a grid of horizontal and vertical bars rendered as SVG rectangles, with a circular region left visibly unobscured at the center of the viewport. The code uses D3’s `select` and `range` functions to generate 100 bars in each orientation across the full window dimensions. Two SVG masks, created via D3’s `append` and `attr` methods, control visibility: one mask contains a white circle over a black background, while the other inverts this pattern. The bars display fine black stripes outside the circular mask area, producing a clean intersecting line pattern.

EEnoch Ssentumbwe

75% match

Loading thumbnail…

Fork of Fork of Fork of Fork of Random world shapes with react July 4,2022 - 2

An array of small, colored rectangles is scattered across the screen, each positioned using a formulaic calculation based on its index. The visualization is rendered in SVG via React, with D3 v7 used to select the body and append the initial SVG element. The rectangles are generated from a simple loop that computes x and y coordinates from trigonometric and linear expressions, with stroke widths and RGB colors derived from the same calculation. The design appears algorithmic and abstract, without a clear geographic or data-driven mapping.

NNita

75% match

Loading thumbnail…

Fork of Pseudo Horizontal Bar Chart

This fork titled “Pseudo Horizontal Bar Chart” presents categorical data for labels A through D as horizontal bars of varying lengths on a yellow background. The visualization uses raw SVG elements, including `rect` for bars and `text` for category labels, rendered with the Share Tech font. The first bar is distinguished with a white fill and black stroke via a CSS class, while the remaining bars are solid black. No external charting libraries are employed; the graphic relies entirely on native SVG markup and inline CSS.

Llogan.yxsun@gmail.com

74% match