Skip to main content
Log in
T

Thomaszahradnik

@Thomaszahradnik·10 public vizzes

Loading thumbnail…

Lets make a face

A single hollow circle is drawn at the center of an SVG canvas. The visualization uses D3 v5's selection and `append` methods to create the circle, setting its radius to 200 pixels via `attr`. The circle is rendered in an SVG element sized 960 by 500, with the page body reset to eliminate margins and hide overflow. The effect is a minimal, standalone geometric shape without any data binding or interaction.

Aug 18, 2019
Loading thumbnail…

Shapes with SVG and CSS

This example displays a set of basic geometric shapes—circles, rectangles, and a line—arranged within a static SVG viewport. It shows how SVG elements behave with different fill colors, strokes, and a group transform that applies shared styling. The code uses the SVG DOM API directly, with properties like `fill`, `stroke`, and `transform` specified inline or via a CSS class. Rendering is purely client-side through the browser’s SVG engine, with no external data source or JavaScript library involved.

Aug 18, 2019
Loading thumbnail…

HTML Cars Report

This example presents a static HTML cars report listing three vehicles with model names, years, and prices. It shows how plain HTML and CSS can structure a simple data display without any JavaScript libraries. The page uses an unordered list with class-based styling, where the first item—the 2012 Nissan Leaf—is highlighted in red via the `.highlighted` CSS class. The stylesheet defines a monospace font and larger font size for the entire body, making the report readable and visually distinct. No data fetching or visualization APIs are involved; the content is hardcoded directly in the markup.

Aug 17, 2019
Loading thumbnail…

Hello VizHub

This example demonstrates the minimal setup for a VizHub visualization, rendering a simple text message as the entire output. It shows how to combine D3.js v5, ES6 modules, and external styling in a single-page application. The code imports the `select` function from D3 and uses it to set the text content of a `<div>` element, while the message itself comes from a separate local module. The page’s appearance is defined in a linked CSS file, which imports the Ubuntu font and applies a dark background with large, centered text.

Aug 17, 2019
Loading thumbnail…

Hello VizHub

This example demonstrates the minimal setup for a VizHub visualization, rendering a simple text message as the entire output. It shows how to combine D3.js v5, ES6 modules, and external styling in a single-page application. The code imports the `select` function from D3 and uses it to set the text content of a `<div>` element, while the message itself comes from a separate local module. The page’s appearance is defined in a linked CSS file, which imports the Ubuntu font and applies a dark background with large, centered text.

Aug 17, 2019
Loading thumbnail…

Hello VizHub

This example demonstrates the minimal setup for a VizHub visualization, rendering a simple text message as the entire output. It shows how to combine D3.js v5, ES6 modules, and external styling in a single-page application. The code imports the `select` function from D3 and uses it to set the text content of a `<div>` element, while the message itself comes from a separate local module. The page’s appearance is defined in a linked CSS file, which imports the Ubuntu font and applies a dark background with large, centered text.

Aug 17, 2019
Loading thumbnail…

Hello VizHub

This example demonstrates the minimal setup for a VizHub visualization, rendering a simple text message as the entire output. It shows how to combine D3.js v5, ES6 modules, and external styling in a single-page application. The code imports the `select` function from D3 and uses it to set the text content of a `<div>` element, while the message itself comes from a separate local module. The page’s appearance is defined in a linked CSS file, which imports the Ubuntu font and applies a dark background with large, centered text.

Aug 17, 2019
Loading thumbnail…

Cars Report

This example shows a plain-text report of used cars with prices filtered below a maximum threshold of $2000. It reads car data from a static JSON array containing year, make, model, and price fields, then formats each entry into a readable string. The code uses the `Array.filter`, `Array.map`, and `Array.join` methods to process the data and generate a report that is displayed in a `<pre>` element using the DOM `textContent` API. The visualization demonstrates a simple, non-graphical approach to presenting tabular data through text output.

Aug 17, 2019
Loading thumbnail…

Cars Report

This example displays the text “HEHEHE” on a blank page, demonstrating a minimal setup for a VizHub visualization. It loads static JSON data from `cars.js` containing car records with year, make, model, and price, but the data is not used in the rendering. The page’s `index.html` provides a `<pre>` element, and `index.js` sets its text content directly via the DOM API. No additional libraries or rendering techniques are employed, making it a basic template for testing data import and message output.

Aug 17, 2019
Loading thumbnail…

Cars Report

This example displays a static text message in a large, styled format on a dark blue background. It parses an inline JSON array of car data and assigns the string “Hello World” to a DOM element’s text content. The page uses plain JavaScript with `document.getElementById` and `textContent`, plus CSS from Google Fonts for typography and layout, demonstrating basic DOM manipulation and data parsing in a VizHub environment.

Aug 11, 2019