Skip to main content
SimilarExport ZIP
100%

Data Visualization

✓ Published0🌍 Public
Hharika-1929
Last edited Jun 22, 2022
Created on Jun 22, 2022

This visualization presents a custom SVG drawing of two stylized human figures, composed of black outlined paths, white lines, and colorful ellipses representing facial features and body shapes. The figures are set against a light gray background, with a design that uses a darken blend mode and background blur filters on the paths. The SVG is generated within an HTML page that uses D3.js to load a Netflix dataset from a GitHub gist, displaying the data's size in kilobytes, row count, and column count. The page also includes a separate decorative SVG with colorful shapes and lines.

AI-generated description

A basic html code [HTML] Resources: https://en.wikipedia.org/wiki/HTML) page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Data Visualization

A stylized SVG diagram of a branching organic structure is rendered with dark, blurred strokes and colored ellipses, overlaying a white background. The visualization uses D3.js v7 to load and summarize a CSV dataset, displaying the file size in kilobytes, row count, and column count in a text element. The SVG paths and shapes are static, while the data summary is generated dynamically via the `d3.csv` and `d3.csvFormat` APIs, showing how D3 can combine declarative SVG graphics with data-driven text output.

Hharika-1929
82% match
Loading thumbnail…

Data Visualization

This example displays a static SVG composition featuring a black ellipse overlaid by a triangular form, paired with a text summary of a dataset. The page loads CSV data from a GitHub gist using `d3.csv` and reports its size in kilobytes, row count, and column count. The visualization uses D3 v7 for data parsing, while React is not actively employed despite being listed in the framework metadata, and the SVG rendering is hardcoded in the markup.

Hharika-1929
81% match
Loading thumbnail…

Data Visualization

This example renders a smiling face in SVG using React and D3.js, with geometric shapes for the head, eyes, irises, nose, and mouth. The code constructs the mouth and nose as arcs via `d3.arc`, while the remaining features are simple circles. All elements are positioned relative to the center of a 960×500 viewport using SVG’s `transform` attribute, and React drives the component structure. The result is a static, stylized character built entirely from vector primitives and filled with solid colors.

FFutileGameDev
79% match
Loading thumbnail…

Data Viz with D3

A minimal SVG scene demonstrates basic geometric shapes and styling within a static HTML page. The visualization displays two filled circles, one outlined circle with a blue stroke, and a green rectangular border, all rendered directly through inline SVG markup. The code uses no external JavaScript libraries; instead, it relies on native SVG elements and CSS properties such as `fill`, `stroke`, and `r` for circle radii, while the React Starter link references an alternative approach for interactive builds.

SS1lus
79% match
Loading thumbnail…

datandata

An SVG line drawing of a human body uses colored strokes to outline organs: a red brain and heart, blue lungs, a green stomach, and purple intestines. The static vector shapes are rendered directly in the HTML, with CSS animation rules (`stroke-dasharray`, `stroke-dashoffset`, and `@keyframes`) defined but not applied to any elements in the markup. The example demonstrates basic SVG path and shape composition without JavaScript or external libraries.

Ccolbygogan
78% match
Loading thumbnail…

Data viz

A grid of 18 randomly generated cartoon faces fills the SVG canvas, each face composed of a yellow circle, two eyes, and a d3 arc-based mouth. The React components `Face`, `BackgroundCircle`, `EyeCircles`, `Mouth`, and `FaceContainer` render each face with randomized stroke widths, eye offsets, eye radii, and mouth dimensions. The visualization uses d3.v7’s `arc` generator to draw the mouth path and the `range` function to create the face array. Each render produces a unique arrangement of facial features.

NNenad Jovanovic
78% match
Loading thumbnail…

Data Visualization

This example visualizes the structure of a Netflix credits dataset, displaying a summary of its size in kilobytes, row count, and column count using D3.js. The visualization shows two simple humanoid stick figures, one on the left and one on the right, alongside text describing the dataset’s attributes, such as person ID, character names, and roles. The code loads data from a CSV file using `d3.csv`, formats the data with `d3.csvFormat`, and renders the result in an HTML `<pre>` element. The figures are drawn using raw SVG shapes within a React-based D3 v7 environment.

SSravyaAnnadi
78% match
Loading thumbnail…

Data viz 5

This example displays a collection of simple SVG flower and polygon shapes, each filled with a named color like Atomic Tangerine or Kelly Green. The visuals are defined directly in HTML, with each shape’s size, position, and fill color set through SVG attributes. The page uses the D3.js library to load a CSV file from a GitHub gist, though the processing of that data is not shown. React is used as the framework, with the entire visualization rendered as static SVG elements.

Sshreyasribearelly@gmail.com
78% match