Skip to main content
Log in
S

Swavna

@Swavna·12 public vizzes

Loading thumbnail…

Fork of Shapes with SVG and CSS

This example demonstrates basic geometric shapes—circles and rectangles—arranged in a grid and colored individually, with a group element translating a set of shapes down the canvas. It shows how SVG primitives can be styled and transformed using inline attributes. The visualization uses raw SVG markup within an HTML document, with CSS rules in `styles.css` controlling page margins and a highlight class. A single line element with a stroke is also included, though its closing tag is malformed. The code relies solely on native SVG and CSS, with no JavaScript libraries involved.

Jan 5, 2022
Loading thumbnail…

Shapes with SVG and CSS

This example presents a three-item car sales report as a simple HTML list, using the `<ul>` and `<li>` elements to display model, year, and price. It demonstrates how SVG, cascading style sheets (CSS), and JavaScript can be combined to create visualizations. The first item, “2012 Nissan Leaf: $1800,” is highlighted in red through a CSS class named `.highlighted`, while the other two vehicles appear in the default monospace font. The visualization relies on the browser’s native Document Object Model (DOM) and CSS selectors, without any external libraries like D3.

Jan 5, 2022
Loading thumbnail…

Fork of Hello VizHub

This example demonstrates the basic structure of a VizHub project, showing how to load D3 via UNPKG and use ES6 modules to manage code. The visualization renders a single text message, "Hello VizHub!", centered on the page using the `select` function from D3 to set the text content of a div. It also imports a local module, `myMessage.js`, to supply the message string, and applies styling through an external CSS file. The code highlights D3’s integration with modern JavaScript module syntax and simple DOM manipulation.

Jan 4, 2022
Loading thumbnail…

Untitled

This example displays the text “Hello VizHub!” in a large, centered format using D3.js. It imports the `select` function from D3 to target the `#message` div and sets its text content from an exported ES6 module variable. The styling is handled by CSS, which applies a 12em font size and center alignment to the message. The code demonstrates a minimal integration of D3 with modular JavaScript and external stylesheets.

Jan 4, 2022
Loading thumbnail…

Car Report

This example displays a minimal car report, showing the make of the first car in a hardcoded JSON array. It presents the text "Honda" in a large, centered format on an HTML page. The visualization relies on a custom JavaScript module, `cars.js`, which defines and parses the data, and an `index.js` file that uses vanilla DOM manipulation to inject the result. It loads the D3 version 7 library, though the core functionality depends solely on standard JavaScript, not on specific D3 APIs.

Jan 4, 2022
Loading thumbnail…

CarsReport

This example presents a minimal HTML page titled CarsReport, displaying a static "Hello HTML!" message centered at a large font size. It demonstrates the basic structure of a web page using CSS for styling and includes a link to a React Starter resource. The code uses plain HTML and CSS, with no JavaScript or data visualization libraries, serving as a barebones starting point rather than a functional report.

Jan 4, 2022
Loading thumbnail…

Fork of Fork of D3 Starter

This example demonstrates the minimal setup required to display text using D3 version 7. It renders the phrase “Hello D3 version 7” directly in the browser window, using the `d3.select` API to target the document body. The code loads the D3 library from a CDN and calls `select('body').text(...)` to set the text content. The page styling sets an unusually large font size, making the output a dramatic visual statement, though no data or complex visualization is involved.

Jan 4, 2022
Loading thumbnail…

Fork of D3 Starter

This example greets the viewer with a bold, full-screen “Hello D3 version 7” message in large type. The page uses a minimal setup with an HTML file that loads the D3 v7 library and a JavaScript file that calls `select` from D3 to target the body element. The text is set via the `.text()` method, with styling applied directly in the page’s CSS. No external data is involved; the focus is solely on demonstrating a basic D3 selection and DOM manipulation.

Jan 4, 2022
Loading thumbnail…

Fork of Fork of HTML Starter

This example displays the message “Hello HTML!” in large, centered text on a plain web page. It demonstrates a minimal setup using only HTML, CSS, and vanilla JavaScript, with no external libraries. The styling is applied through a CSS rule targeting a div with the class `message`, and no interactive behavior or data processing occurs. The page serves as a basic template for static content, emphasizing simplicity over dynamic visualization.

Jan 4, 2022
Loading thumbnail…

Fork of HTML Starter

This example displays a large, centered message reading “Hello HTML!” in the browser. The text is styled with a cascading style sheet (CSS) rule that sets a 13-em font size and center alignment. The page is a minimal demonstration of a plain HyperText Markup Language (HTML) document combined with JavaScript and CSS, serving as a starting point for building interactive visualizations. It renders static text content without data processing or charting libraries.

Jan 4, 2022
Loading thumbnail…

Fork of Fork of D3 Starter

This example demonstrates the minimal setup required to display text using D3 version 7. It renders the phrase “Hello D3 version 7” directly in the browser window, using the `d3.select` API to target the document body. The code loads the D3 library from a CDN and calls `select('body').text(...)` to set the text content. The page styling sets an unusually large font size, making the output a dramatic visual statement, though no data or complex visualization is involved.

Jan 4, 2022
Loading thumbnail…

Fork of D3 Starter

This example greets the viewer with a bold, full-screen “Hello D3 version 7” message in large type. The page uses a minimal setup with an HTML file that loads the D3 v7 library and a JavaScript file that calls `select` from D3 to target the body element. The text is set via the `.text()` method, with styling applied directly in the page’s CSS. No external data is involved; the focus is solely on demonstrating a basic D3 selection and DOM manipulation.

Jan 4, 2022