Skip to main content
Log in
R

Randika87

@Randika87·15 public vizzes

Loading thumbnail…

Lets make a face with D3.js

A face built from basic SVG shapes demonstrates how D3.js can construct and animate a character from primitive elements. The code creates a yellow circle for the head and two black circles for eyes, positioned relative to the SVG's width and height. Using D3's `select` and `append` methods, the example shows manual coordinate calculations for centering and spacing facial features. The visualization relies on SVG rendering with hardcoded dimensions, offering a playful introduction to shape composition and the D3 selection API.

Apr 15, 2020
Loading thumbnail…

Lets make a face with D3.js

This example creates a simple face using D3.js (v5.15.1) with SVG elements. It draws a yellow circle as the face, then adds two black circles for eyes, all positioned using the `select` function to target the SVG container and setting attributes like `attr('r')`, `attr('cx')`, and `attr('cy')`. The dimensions are derived from the SVG's width and height attributes. The face is static, but the code sets a green background for the SVG. It uses `width` and `height` constants to center the facial features, demonstrating basic D3.js graphics and attribute manipulation.

Apr 15, 2020
Loading thumbnail…

Lets make a face with D3.js

This example creates a simple face using D3.js (v5.15.1) with SVG elements. It draws a yellow circle as the face, then adds two black circles for eyes, all positioned using the `select` function to target the SVG container and setting attributes like `attr('r')`, `attr('cx')`, and `attr('cy')`. The dimensions are derived from the SVG's width and height attributes. The face is static, but the code sets a green background for the SVG. It uses `width` and `height` constants to center the facial features, demonstrating basic D3.js graphics and attribute manipulation.

Apr 15, 2020
Loading thumbnail…

Lets make a face with D3.js

A yellow circle forms a smiling face on a green background, with two black eyes positioned symmetrically. The visualization uses D3.js v5 to select the SVG element and append circles with specific attributes for radius, center coordinates, fill, and stroke. The code defines eye spacing and offset constants, then draws the face using three separate circle elements: one large yellow head and two smaller black eyes, all rendered statically without animation.

Apr 14, 2020
Loading thumbnail…

Lets make a face with D3.js

This example uses D3.js v5 and SVG to build a simple face from basic geometric shapes, including circles and rectangles. The code demonstrates how D3’s selection and data-binding capabilities can be applied to SVG elements, although the markup itself is static. The page relies on a stylesheet to color the background and define the appearance of shapes, with additional paths and lines showing stroke styling and coordinate transforms. The initial index file logs the D3 object to the console, confirming the library’s availability, while other included pages show unrelated work with cars and shape exercises.

Apr 14, 2020
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes and styling applied through CSS. Several circles and rectangles are arranged in a grid, with some shapes using inline fill colors while others inherit styling from CSS rules and attribute selectors. Lines and paths are grouped together and transformed using SVG translate and scale operations. The visualization relies on standard SVG elements and CSS properties, rendering directly in the browser.

Apr 14, 2020
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes, including circles and rectangles, styled with CSS and inline attributes. It shows how to position, size, and color these primitives, and uses a `<g>` element with a `transform` to group and offset shapes with a cyan fill and black stroke. The SVG is rendered directly in the browser via the `index.html` file, and the page also includes a separate `index2.html` showing a simple HTML list report with classes for highlighting. The code does not include any JavaScript libraries or data sources.

Apr 13, 2020
Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes rendered as SVG elements, with two circles and two rectangles positioned on a powder-blue background. The CSS stylesheet controls global typography and layout, while inline SVG attributes set shape positions, sizes, and fills. The visualization uses no JavaScript libraries, relying purely on native SVG markup for rendering and CSS for page styling. A secondary HTML file shows a simple car inventory list, with the highlighted entry styled red via the `.highlited` class, illustrating how SVG and CSS work together in static web content.

Apr 13, 2020
Loading thumbnail…

HTML Cars Report

This example displays a simple HTML-based report of three used cars, each listed with its model year, name, and price. The page renders a static bulleted list within a plain HTML document, styled with a global CSS rule that doubles the font size. No external JavaScript libraries or data files are used; the data is hardcoded directly into the index.html markup. The visualization relies entirely on native HTML elements and CSS for presentation.

Apr 13, 2020
Loading thumbnail…

HTML Cars Report

This example displays a simple HTML-based report of three used cars, each listed with its model year, name, and price. The page renders a static bulleted list within a plain HTML document, styled with a global CSS rule that doubles the font size. No external JavaScript libraries or data files are used; the data is hardcoded directly into the index.html markup. The visualization relies entirely on native HTML elements and CSS for presentation.

Apr 13, 2020
Loading thumbnail…

HTML Cars Report

This example displays a simple car inventory report as a static HTML list, showing each vehicle’s model year, make, and price. The page relies on raw HTML elements, including a heading and an unordered list, styled by an external CSS stylesheet. The styles.css file sets the body’s font-size to 2em, increasing text readability. No JavaScript libraries or dynamic data APIs are used; the content is hardcoded directly in the index.html markup, representing a minimal, non-interactive data visualization. The data source is embedded within the HTML structure itself.

Apr 13, 2020
Loading thumbnail…

HTML Cars Report

This gallery item presents a minimal HTML Cars Report page, displaying only the static text “Hello world” within the browser. The implementation uses raw HTML without any external libraries or JavaScript APIs, as evidenced by the single `index.html` file containing a basic document structure with a title and body. No data source or visualization rendering is included in the provided code, making it a starting point rather than a functional report.

Apr 13, 2020
Loading thumbnail…

HTML Cars Report

This example presents an interactive HTML report for exploring car-related data. It constructs a page with a heading, "HTML Cars Report," and provides a blank canvas area, likely intended for dynamic content. The visualization logic is minimal, with the interface built directly from standard HTML elements, including the `<!DOCTYPE html>` declaration, `<html>`, `<head>`, and `<title>` tags. The code does not utilize any external JavaScript libraries or APIs, nor does it load or display a specific dataset; instead, it sets up a foundational structure for a potential report. The current page shows no charts, graphs, or data-driven visuals, serving primarily as a static template.

Apr 13, 2020
Loading thumbnail…

HTML Starter

This example renders the text “Hello HTML” centered on a blank page using plain HTML and CSS, with no external libraries or JavaScript. The body’s `font-size` is set to 13em, creating a large, dominant display. The styling applies text alignment and font size directly within a `<style>` block in the document head. It serves as a minimal template for starting an HTML-based visualization, demonstrating the basic structure of a standalone web page without frameworks or data sources.

Apr 13, 2020
Loading thumbnail…

HTML Starter

A minimal HTML page demonstrates the foundational structure of a web document, displaying the text "Hello HTML" centered in a large font. The example uses plain HTML with embedded CSS to control the layout and styling, requiring no external libraries or JavaScript. It serves as a starting point for understanding the basic anatomy of an HTML file, including the `<!DOCTYPE html>`, `html`, `head`, `style`, and `body` elements. This bare-bones approach highlights the essential building blocks for more complex visualizations.

Apr 13, 2020