Bartłomiej Remlein

@bartlomiejremlein·4 public vizzes

Face

This bar chart visualizes population data for ten countries, using horizontal bars to show each nation’s total population in thousands. It employs D3 v7’s `scaleLinear` and `scaleBand` to map values, with `axisLeft` and `axisBottom` for labeling. The visualization reads from a CSV file and renders as SVG, with steelblue rectangles representing each country’s population.

Aug 1, 2021

Loading thumbnail…

Cars

This example shows a collection of basic SVG shapes—circles and rectangles—arranged in rows, with the lowest row grouped inside a `<g>` element that applies shared fill and stroke styling. The shapes demonstrate fundamental SVG rendering with React, using static coordinates and explicit colors like orange and navy. The page relies on standard HTML, CSS, and SVG elements within a React starter template, with no data binding or interaction beyond the fixed markup. The code highlights how raw SVG primitives can be composed directly in JSX without additional visualization libraries.

Aug 1, 2021

Loading thumbnail…

Cars Report

This example presents a text-based report of car listings, filtering and formatting a small dataset of three vehicles. It demonstrates modular ES6 JavaScript code organization, with separate files for data, formatting, and report generation. The visualization uses D3 v5 loaded via UNPKG, though the core logic relies on native array methods like `filter` and `map` rather than D3-specific APIs. The `generateReport` function filters cars by price and joins formatted strings into a single message displayed in a `<pre>` element, showcasing how to combine local modules with a CDN-loaded library.

Aug 1, 2021

Loading thumbnail…

Cars Report

This example renders a single message, "Cars Report," centered on the page in large text. It demonstrates VizHub’s ability to import D3.js from UNPKG and use local ES6 modules. The code uses `d3.select` to target the `#message` div and set its text content, while a local `myMessage` module supplies the string. The visual output is purely typographic, styled via an external CSS file with centered alignment and a font size of 12em.

Aug 1, 2021