Starting My Data Viz Journey

100%

Starting My Data Viz Journey

✓ Published0🌍 Public

Last edited Apr 21, 2021

Created on Apr 21, 2021

This example shows a simple smiley face rendered as two black circles for eyes and a yellow circle with a black outline, set against a blank canvas. The visualization demonstrates the basics of SVG markup and styling with CSS, while also incorporating React for a minimal "Hello JSS" heading. The code loads React 16.7.0 via CDN, uses `ReactDOM.render` to mount the app, and relies on raw SVG elements like `circle` with attributes for positioning and appearance, alongside inline CSS to remove page margins and hide overflow.

AI-generated description

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

Similar vizzes

Loading thumbnail…

DataVisCourse

A starter example shows a static smiley face built from three SVG circles on a yellow background, with two dark eye circles positioned inside a larger yellow face outlined in black. The visualization is constructed declaratively using React 18 and rendered directly through SVG elements in the DOM. The code demonstrates basic SVG circle positioning and styling attributes within a fixed 960 by 500 viewport, serving as an introductory template for further interactive or animated extensions. No data or dynamic behavior is present in the current implementation.

Ddzokesayi.s@gmail.com

88% match

Loading thumbnail…

Dataviz Tutorial

This example displays a static smiley face rendered as an SVG, using a yellow circle with black stroke and two smaller black circles for eyes. The code imports React and ReactDOM, and renders an App component into the root div, though the visible graphic is placed directly in the HTML. The project uses React 17.0.2 from the unpkg CDN, with the SVG elements defined inline in the index.html file, while a separate style.css and bundle.js handle presentation and logic. The visualization is a simple, non-interactive illustration of basic SVG shapes within a React setup.

JJosh-B-Creative

88% match

Loading thumbnail…

Data Visualization

A solitary yellow circle with a black outline sits centered on a blank SVG canvas, rendered at 960 by 500 pixels. The example demonstrates the minimal setup for a React-based visualization, using `ReactDOM.render` to mount a single SVG `<circle>` element. The code imports React and ReactDOM, defines a functional component returning the SVG markup, and loads the production builds of React 16.9.0 from a CDN. This static shape serves as a starting point, with a commented-out section hinting at a future smiley face with two additional eye circles.

LLittlegreen8

87% match

Loading thumbnail…

Data Vis

This example shows a static SVG representation of a smiley face, composed of three circles: a large yellow head with a black outline and two smaller black eyes. The visualization is rendered using raw SVG markup within an HTML page, though the page includes a script tag for React, the circles themselves are not generated or controlled by React code. The HTML and SVG are written directly, with the rendering approach being straightforward declarative SVG rather than data-driven visualization.

Oosh1rules

87% match

Loading thumbnail…

Data Visualization with D3, JS, React

This example presents a static SVG drawing of a smiley face as a data visualization, using basic geometric shapes rendered through inline SVG markup. The visualization shows a yellow circle with two smaller black circles for eyes and a partial yellow arc for the mouth, all positioned within a defined viewport. The code relies on React 18.2.0 loaded via a UMD script and logs the React object to the console, while the SVG elements are defined directly in the HTML file rather than generated programmatically. The rendering approach is purely SVG-based, with no D3 or JavaScript animation logic present.

GGanesh Aguru

86% match

Loading thumbnail…

Learning data viz

This example shows a simple smiley face built with React and D3, rendered as SVG shapes. The code uses React to define the component structure and `arc` from `d3` to generate the mouth path, while static circles form the face, eyes, and outline. The face is centered using SVG transforms, with dimensions and offsets defined as constants. The visualization demonstrates how to combine React’s declarative UI with D3’s geometry utilities without any interactive features or external data.

Lleshla000

86% match

Loading thumbnail…

Part 1

This example shows a simple static visualization of a smiley face constructed from three SVG circles: a large yellow circle for the head and two smaller black circles for the eyes. The HTML file directly defines the SVG with hard-coded positions and styling, while the React application renders an empty `VizContainer` that demonstrates the margin convention with visible gray background rectangles. The code uses React and ReactDOM for component rendering, along with D3’s margin-based layout pattern. The `VizContainer` component abstracts the SVG and group elements, allowing easy removal of margin display via a prop.

Jjam9501

86% match

Loading thumbnail…

DataViz D3 - Smiley Face Part II (React.js)

This example uses React.js to render a static smiley face visualization in SVG, building on the “Smiley Face” series. It shows a yellow circle with a thick black stroke for the face, accompanied by two dark eye circles positioned symmetrically around the center. The code explicitly uses React 16.9 production builds via unpkg, and renders the shapes through JSX-style SVG elements (`<circle>`). The rendering approach is purely declarative, with no data source or interactivity, relying on hardcoded coordinates for the face and eyes to demonstrate React’s component-based DOM updates.

Jjinjuta.s.au@gmail.com

86% match