distortedlights

@distortedlights·9 public vizzes

React Starter

This example demonstrates a minimal React application that renders a static "Hello React!" message centered on the page. The code imports React and ReactDOM, defines a simple functional component returning a div with the message, and mounts it to the root element via `ReactDOM.render`. It uses the production builds of React 16.10.0 and ReactDOM, with styling handled by a CSS class in the HTML file. No data or external libraries are involved beyond the core React APIs.

Apr 8, 2020

Loading thumbnail…

React Starter

A React starter example renders a large, static "Hello React!" message centered in the browser window. The app uses React 16.10 and ReactDOM to mount a single functional component into a root div, with styling applied via a CSS class. The rendering approach is purely DOM-based, with no data source or visualization library involved. Instead, it demonstrates a minimal setup for integrating React with an HTML page and a bundled JavaScript file.

Apr 8, 2020

Loading thumbnail…

percentage of individials with digital skills

This visualization shows the percentage of individuals with various digital skills across different European Union country groupings in 2015, with each skill category represented as a horizontal bar. The data is loaded from a CSV file and rendered as an SVG bar chart using D3 v5. The code uses `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisLeft` and `axisBottom` to display the axes. Each bar’s width is mapped to the percentage value, and the color is a fixed steelblue.

Apr 7, 2020

Loading thumbnail…

making a bar chart

This visualization displays a bar chart of digital skill levels across European Union country groupings for 2015, with each bar representing a different country category and its length corresponding to the percentage of individuals with specific skills. The chart uses D3 v5’s `scaleLinear` for the x-axis and `scaleBand` for the y-axis, rendering SVG rectangles. Data is loaded from a CSV file with `d3.csv`, and values are parsed as numbers before being mapped to bar widths. The code relies on `d3.select`, `max`, and `scaleBand` to structure the visualization.

Apr 6, 2020

Loading thumbnail…

React Starter

A cheerful cartoon face rendered in SVG shows a large yellow circle, two black eyes, and a dark arc-shaped mouth. The rectangular eyebrows animate upward and then back down over two seconds using chained D3 transitions. Built with React as the framework, the visualization uses D3 v5 selection methods, the `arc` generator for the mouth path, and `transition.attr` to update the eyebrow group’s transform.

Apr 4, 2020

Loading thumbnail…

React Starter

This React Starter example renders a smiling face using D3 v5 within a React application. The visualization shows a yellow circle with black stroke as the face, two black eyes, a curved mouth path, and an eyebrow rectangle, all positioned using SVG attributes. The code imports `select` and `arc` from D3 to append SVG elements and generate the mouth’s curved path with specified inner and outer radii and angles. Static dimensions and offsets, such as eye radius and position, are hardcoded, and the rendering relies on SVG elements created programmatically via D3 selections.

Apr 3, 2020

Loading thumbnail…

Persons of Concern StreamGraph by Origin

A streamgraph shows the total number of persons of concern, such as refugees and internally displaced people, grouped by country of origin over time, excluding countries with relatively low counts. The visualization uses a wiggle offset and inside-out ordering to stack the areas, with labels positioned by d3-area-label. Data comes from UNHCR Population Statistics, interpolated across years and rendered as SVG using d3.v4's stack and area APIs.

Apr 2, 2020

Loading thumbnail…

cars report

This example displays a hardcoded message, “hello world”, inside a `<pre>` element on an HTML page. It imports a static array of car objects from `cars.js`, which contains fields for year, manufacturer, type, and price, though this data is not currently visualized. The code uses native JavaScript `document.getElementById` to update the text content, with no external charting or rendering libraries involved. The page structure is a minimal single HTML file that loads a bundled script.

Mar 30, 2020

Loading thumbnail…

HTML Starter

This example displays the text “Hello HTML” centered on a white page. The code uses plain HTML and CSS, with no external JavaScript libraries. The body text is scaled to an extremely large font size of 13em, making the greeting dominate the viewport. The page is a minimal starting point for building interactive visualizations with a bare HTML structure, providing a foundation for adding scripts and markup.

Mar 30, 2020