Skip to main content
Log in
N

nlp-user

@nlp-user·10 public vizzes

Loading thumbnail…

Let's make a face with D3.js!

This example creates a pink SVG canvas using D3.js v5, accessed via `d3.select('svg')` and styled with a background color. The visualization demonstrates D3's core selection and styling capabilities with the `svg` element, setting up a blank 960x500 pixel drawing area. The code prepares the stage for building a face by manipulating SVG attributes through the D3 API, while the external stylesheet uses CSS to reset page margins and handle overflow. It shows how D3 integrates with HTML, CSS, and SVG to construct a web-based graphics environment.

Mar 18, 2020
Loading thumbnail…

Bar Chart

This bar chart visualizes confirmed COVID-19 cases by country and region from the Novel Corona Virus 2019 dataset on Kaggle. It shows the total confirmed count for each location using horizontal bars, with country names on the y-axis and case numbers on the x-axis. The visualization is rendered as an SVG using D3 v5, leveraging `d3.csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to map the data. The chart displays only the first two dates from the dataset, as the code parses observation dates without filtering.

Mar 18, 2020
Loading thumbnail…

Let's make a Face with D3!

A cheerful cartoon face is drawn and animated using SVG elements, with a yellow circle head, dark stroke outlines, eyes, and an arc-based mouth. The example demonstrates D3 v5’s `select`, `arc`, and chained `transition` APIs to animate expressive eyebrows that move up and down over timed intervals. The code constructs the face by appending circles, lines, and a path to a centered group, using explicit pixel coordinates and stroke widths. The visualization showcases basic SVG rendering and procedural animation in a simple, playful composition.

Mar 18, 2020
Loading thumbnail…

Let's make a face with D3.js!

This example creates a pink SVG canvas using D3.js v5, accessed via `d3.select('svg')` and styled with a background color. The visualization demonstrates D3's core selection and styling capabilities with the `svg` element, setting up a blank 960x500 pixel drawing area. The code prepares the stage for building a face by manipulating SVG attributes through the D3 API, while the external stylesheet uses CSS to reset page margins and handle overflow. It shows how D3 integrates with HTML, CSS, and SVG to construct a web-based graphics environment.

Mar 17, 2020
Loading thumbnail…

Shapes with SVG and CSS

A static SVG scene demonstrates how to compose basic shapes—circles, rectangles, lines, and paths—into a coherent graphic. The code uses raw SVG elements, CSS classes for styling strokes and line joins, and inline attributes for fills and transforms. A translated group applies a fill and stroke to its child shapes, while a scaled group positions the overall composition. This example highlights VizHub’s capacity for hand-coded vector graphics without additional JavaScript libraries.

Mar 17, 2020
Loading thumbnail…

HTML Car Report

This example displays a static HTML-based car report showing a title and a short list of three text items, with the first item highlighted in red. It demonstrates basic document structure and styling without any JavaScript logic or data loading. The page is built with plain HTML and styled through an external CSS file, using a monospace font at a large size for readability. The implementation relies solely on standard browser rendering of HTML elements and CSS selectors, such as the class attribute applied to the highlighted list item. No external libraries or data sources are used.

Mar 17, 2020
Loading thumbnail…

Untitled

This example demonstrates a force-directed network visualization using the `d3.forceSimulation` API, with nodes and links rendered as SVG elements. The graph is generated from inline sample data and positions nodes through simulated physical forces like charge and centering. The visualization updates in real time as the simulation runs, showing the interplay between node repulsion and link attraction. The code also uses `d3.drag` to allow interactive repositioning of individual nodes, which restarts the simulation tick for continuous layout adjustment.

Mar 17, 2020
Loading thumbnail…

Cars Report

This example demonstrates a simple data-reporting application that loads car data asynchronously and displays a text-based report filtered by price. It shows how a promise-based `getCars` function simulates fetching a JSON dataset containing car year, make, model, and price, then uses `generateReport` to filter vehicles under a specified price and format each line with `formatCar`. The `index.js` file binds this logic to the DOM, setting an initial "loading..." message and updating a `<pre>` element once the data resolves. The code relies on native ES6 modules, `Promise` and `setTimeout` for simulated latency, and string template literals for output formatting.

Mar 17, 2020
Loading thumbnail…

HTML Starter

This example displays the text “Hello HTML” centered on a blank page, using a massive 13em font size to demonstrate the fundamental structure of an HTML document. The page is built with a minimal `index.html` file containing a `<style>` block that sets the body’s text alignment and font size, and a `<body>` element with the literal text. It relies entirely on native HTML and CSS, with no external libraries or data sources. The example serves as a bare-bones starting point for rendering content in a web browser.

Mar 17, 2020
Loading thumbnail…

Cars Report

This prototype renders the phrase "Hello HTML" at an unusually large font size (13em) centered on a blank page. The single HTML file uses plain CSS for styling and displays static text without any interactive or data-driven elements. No JavaScript libraries, data sources, or visualization techniques are present, making it a minimal starting point rather than a functional chart. The page serves as a bare-bones React starter template scaffold.

Mar 17, 2020