Skip to main content
SimilarExport ZIP
100%

BiliBili 干杯[]~(￣▽￣)~*

✓ Published0🌍 Public
TTowlGol
Last edited Jan 20, 2022
Created on Jan 20, 2022

This SVG chart approximates a scatter plot using colored rectangles and Bézier curves instead of traditional points. It uses the `<rect>` element with rotation matrices to create data marks, and `<path>` elements with cubic Bézier commands to suggest a trend line, all rendered in two shades of blue. The chart appears to be a playful, non-standard visualization for the BiliBili platform, with the code specifying raw SVG markup directly in an HTML file. The rendering approach is purely vector-based, with no JavaScript libraries involved.

AI-generated description

An approximation of a scatter plot.

MIT Licensed

Similar vizzes

Loading thumbnail…

SVG Bar Chart w/ Curved Line

This example presents a hybrid bar and line chart. Five labeled bars display categorical values, while two distinct line charts—one straight and one using Bezier curves—overlay the same categories to show different trend representations. The visualization uses raw SVG elements, including `rect`, `path`, and `circle`, to render the graphics. The code uses straight and curved paths, with axes, labels, and gridlines implemented via SVG line and text elements.

Vvmistry94@gmail.com
71% match
Loading thumbnail…

SVG Bar Chart

This example presents a combined bar and line chart rendered entirely as inline SVG. Five color-coded bars (A–E) represent values on a primary axis, while a connected orange line with circular markers traces a second series scaled against a parallel axis on the right. The chart uses manual SVG primitives like `<rect>`, `<path>`, and `<circle>` with explicit coordinate and height attributes, styled via the Poppins font and hover opacity transitions. Gridlines and dual-axis labels clarify the two independent value ranges.

Vvmistry94@gmail.com
69% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes—rectangles, text elements, and a polyline path—arranged to form a simple horizontal bar chart with category labels A through D. The SVG markup uses inline styling and CSS classes to control fill colors, stroke widths, and font properties, with a Google Fonts import for the Protest Riot typeface. The chart displays varying bar lengths on a 960×500 canvas, mixing red, black, and white fills with rounded stroke caps on a connected path line.

Jjwu534@gmail.com
68% match
Loading thumbnail…

2025 Lawn Viz

A pseudo-plotted chart displays six gray circles at irregular positions against a white background, evoking a hand-drawn scatterplot without explicit axes or data points. The visualization uses raw SVG elements, with each circle defined by explicit `cx`, `cy`, and `r` attributes, and rendered via the `index.html` file. All circles share the same fill color (`#D9D9D9`) and radius (30). The layout suggests a playful or abstract representation of plotted data, relying purely on static SVG positioning rather than any dynamic data binding or interaction. The example is generated from a simple HTML structure with inline SVG, containing no external libraries or JavaScript logic.

Ccreatedby.thaonguyen@gmail.com
68% match
Loading thumbnail…

Gist bb8fddc4a5fc3cc60c99

A line chart maps a small array of ten numbers to an SVG path, showing how the values fluctuate across a linear sequence. The visualization uses a red, unbroken polyline to emphasize the shape of the data, with the y-axis scaled from the data’s minimum to maximum and the x-axis evenly spaced by index. The code creates the chart using d3.scale.linear for both axes and d3.svg.line to generate the path, which is appended to an SVG container via d3.select and datum. The fixed width and height of 500 pixels define the plotting area, while the stroke and fill styles come from a CSS class.

CCaged
68% match
Loading thumbnail…

SVG Example

This example demonstrates the fundamental structure of SVG graphics with five colored rectangles arranged to form a pseudo-bar chart. The rectangles decrease in height from left to right, with each bar positioned at a different vertical offset. The visualization uses raw SVG elements—specifically `<svg>` and `<rect>` tags—embedded directly in an HTML document, with hard-coded width, height, and position attributes. No JavaScript libraries or data sources are involved, showcasing SVG's native capability for static vector rendering.

CCurran Kelleher
67% match
Loading thumbnail…

SVG scatter plot and bar chart

This example combines a pseudo scatter plot with a bar chart in a single SVG visualization. Seven vertical bars in green and yellow represent categorical data points labeled A through G, while a dark red line overlay approximates a scatter plot trend across the same categories. The visualization uses raw SVG elements including `rect`, `path`, and `text` within multiple layers, with the text styled using the Imbue font from Google Fonts. The rendering approach relies on inline SVG styling with custom stroke widths, opacities, and layer transformations to create the composite chart layout.

GGiacomo Rossoni
67% match
Loading thumbnail…

Fork of SVG Fundamentals

This fork of SVG Fundamentals presents a pseudo scatterplot using hand-coded SVG primitives. It renders a series of overlapping black circles of uniform radius across a white background on a fixed 950x500 viewBox. The circles are placed at various coordinates to simulate a minimalist data distribution, though no actual data is loaded. The visualization relies solely on inline SVG elements, with no JavaScript libraries involved, as index.js only logs a greeting. The rendering approach is purely static, using SVG’s `circle` and `rect` elements for the chart and background.

Iibaird6@gatech.edu
66% match