DanteStack

@DanteStack·9 public vizzes

Bar Chart

This bar chart displays population figures for the ten most populous countries, using horizontal bars ordered by country name. The visualization loads data from a CSV file and renders an SVG with D3 v5, employing `d3.scaleLinear` for the x-axis population values and `d3.scaleBand` for the y-axis country categories. Axes are generated with `d3.axisLeft` and `d3.axisBottom`, while the bars themselves are appended as SVG rectangles with a steelblue fill.

Sep 27, 2019

Loading thumbnail…

Image Test

This example draws a yellow face with eyes, eyebrows, and an arc-shaped mouth in an SVG canvas. The eyebrows animate by transitioning their vertical position in a repeating two-second cycle using D3 transitions. The code builds the face with D3 selections, arc generators, and SVG elements such as circles, rects, and paths, all positioned relative to the center of the 960x500 viewport.

Sep 27, 2019

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—styled with CSS and inline attributes. It shows how presentation properties like fill, stroke, stroke-width, and geometric transforms (`scale`, `translate`) can be applied at the element or group level, including inherited styles through `<g>` containers. The code uses native SVG markup inside a 960x500 canvas, with a separate stylesheet (styles.css) controlling the body layout and class-specific styling for the polyline group. The shapes are static with no data binding or interaction.

Sep 27, 2019

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how basic SVG shapes—circles, rectangles, lines, and paths—can be styled and transformed using both inline attributes and CSS classes. It shows circles and rectangles with default and explicit fills, a group with blue shapes and black strokes, and a polyline with rounded joins. The code uses raw SVG elements within an `<svg>` container, applying `scale` and `translate` transforms, while a CSS class controls stroke properties on the line and path.

Sep 26, 2019

Loading thumbnail…

Cars Report

This example, titled "Cars Report," displays the text "Hello World" in a preformatted HTML element. The page relies on a compiled JavaScript bundle generated by Rollup, which contains the core logic. The bundled code uses the Document Object Model (DOM) API to select the element by its ID, `message-element`, and set its `textContent` to the string. The visualization is created using the `getElementById` method on the document, illustrating a simple, code-driven output without any external data sources or complex rendering libraries.

Sep 26, 2019

Loading thumbnail…

Hello VizHub

This example demonstrates VizHub’s ability to combine HTML, CSS, ES6 modules, and D3.js into a single interactive document. It renders a large, styled welcome message on a dark background using the Ubuntu font. The code imports the D3 `select` function to target a div and set its text content from a separate module, `myMessage.js`, which exports a string. Styling is applied via an external stylesheet with a Google Fonts import, and D3 v5 is loaded from a CDN.

Sep 26, 2019

Loading thumbnail…

Cars Report

This example renders a static text message inside an HTML page using a preformatted element. It loads car data from a local JSON array containing five vehicles with attributes like year, make, model, and price, but the displayed output simply shows the string “Hello World” via `document.getElementById().textContent`. The code uses no visualization libraries or rendering APIs; instead, it relies on basic DOM manipulation. The data source is defined in a separate module that parses the JSON string with `JSON.parse`, though the visualization itself does not yet incorporate that data.

Sep 26, 2019

Loading thumbnail…

Cars Report

This example shows a simple text-based report of used cars, displaying each vehicle’s year, make, model, and price after a brief loading state. It uses JavaScript promises via `getCars()` to simulate a two-second data fetch, then filters the car list with `filter()` and formats each entry using a `formatCar` module. The final output is written to the DOM by setting `textContent` on an element, demonstrating modular code organization with ES6 `import` and `export`.

Sep 26, 2019

Loading thumbnail…

Hello VizHub

This example demonstrates the simplest possible VizHub visualization: a single static text message displayed on a blank page. It shows how to set up a minimal HTML document and connect it to a JavaScript file. The code uses the native Document Object Model (DOM) API, specifically `document.getElementById()` to locate the `<pre>` element and assign its `textcontent` property. No d3 methods or data sources are used; the rendering is purely text-based, with the message "Hello World" hardcoded in the script and the page styled via an external CSS file.

Sep 25, 2019