scotti15

@scotti15·5 public vizzes

Making a Bar Chart!

This example displays a horizontal bar chart ranking the ten most populous countries based on 2018 estimates from the UN’s World Population Prospects. Each bar’s length encodes population in thousands, with country names on the y-axis. Built with D3 v5, the visualization uses `scaleLinear` and `scaleBand` to map data to SVG rectangles, alongside `axisLeft` and `axisBottom` for chart axes. Population values from `data.csv` are multiplied by 1000 during loading. The chart is rendered entirely as SVG elements styled with CSS.

Mar 26, 2020

Loading thumbnail…

Let's make a face with D3.js!

A yellow circle with a black outline forms a face, complete with two eyes, animated eyebrows, and a curved mouth drawn using D3's `arc` generator. Eyebrow rectangles transition vertically via chained `transition().duration()` calls, moving down and back up over two seconds each way. The SVG is centered using a `g` element translated to the middle of a 960×500 viewport, with all shapes positioned relative to that origin. The example uses D3 v5, importing `select` and `arc` from the library.

Mar 24, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example showcases basic geometric shapes drawn with SVG and styled using CSS, including circles, rectangles, lines, and a path. The shapes demonstrate grouping and transformation via SVG `<g>` elements, with one group applying translation and fill overrides, while another uses CSS classes for stroke styling. The code uses raw SVG markup within JSX, scaled by a transform, and relies on CSS for stroke properties and line joins. No external libraries are used; it is a pure React rendering of SVG primitives.

Mar 19, 2020

Loading thumbnail…

HTML Cars Report

This example displays a simple list of used cars with their model years and prices, highlighting the first entry in the list. The page is built as a static HTML document styled with a separate CSS file, which sets a large monospace font and applies a color to the highlighted list item. The visualization uses no JavaScript libraries or frameworks, relying solely on native HTML unordered list elements and CSS class-based styling to present the data. The content is hardcoded in the markup, with the highlighted class applied to the Nissan Leaf entry.

Mar 19, 2020

Loading thumbnail…

HTML Starter

This example displays a generated report listing car data, formatted as plain text. It uses a React component to fetch car information, filter it based on a maximum price, and format each entry with the car’s year, name, horsepower, and displacement. The rendered output appears inside a preformatted HTML element, initially showing “loading…” before the data loads. The visualization demonstrates a simple text-based data pipeline using JavaScript and HTML.

Mar 19, 2020