PRASANTH

@prasanthmp500·4 public vizzes

My first d3js tutorial

This example renders a simple cartoon face using D3.js version 5 in a React application. It draws a yellow circle as the head, two colored eyes with black strokes, and an arc-based mouth. The code uses `d3.select` to access the SVG element, `d3.arc` to generate the mouth path, and SVG attributes like `cx`, `cy`, and `r` for positioning shapes. All coordinates and sizes derive from fixed constants rather than data.

Feb 19, 2020

Loading thumbnail…

React Starter

The React Starter example displays hand-coded SVG shapes—circles and rectangles—in a single 600×600 viewport, with transformations scaling, translating, and recoloring groups of elements. It demonstrates React rendering a simple "Hello React" message via `ReactDOM.render`, while the SVG markup in `index.html` uses standard SVG attributes like `fill`, `stroke`, `transform`, and elements such as `line` and `path`. A `<g class="lines">` element applies red stroke styling from the `styles.css` file, showcasing static, pre-defined vector graphics without interaction or data binding.

Feb 19, 2020

Loading thumbnail…

HTML Starter

This example displays the text “Hello HTML” centered on a page with a font size of 13em. It uses a plain HTML file with inline CSS to set the text alignment and typography. The page is a minimal starter template that requires no JavaScript or external libraries, demonstrating the basic structure of an HTML document with a `<head>` and `<body>`. The rendering approach relies entirely on the browser’s default HTML and CSS engine.

Feb 19, 2020

Loading thumbnail…

HTML Starter

This example shows a bare minimum HTML page that displays the text “Hello HTML” centered in the browser, with a font size of 13em applied via CSS. The page uses no JavaScript or external libraries, relying solely on standard HTML elements and inline `<style>` rules for rendering. It serves as a minimal starting point for exploring visualization galleries, demonstrating how a simple static document can be structured and styled.

Feb 19, 2020