knut_ivar_osvoll@hotmail.com

@kiosvoll·6 public vizzes

Choropleth Map_test2

This choropleth map visualizes countries by economic classification, using an ordinal color scale where each economy type receives a distinct color. A clickable legend allows users to filter the map, dimming non-selected countries while highlighting those matching the chosen category. Built with D3 v5, the visualization employs `geoPath` with the Natural Earth projection for geographic rendering, while legend interactions trigger a unidirectional data flow that updates both the map and legend opacity. The map uses SVG for crisp rendering, with country data sourced from the World Atlas TopoJSON and TSV files, and the color scale is generated from `d3.scaleOrdinal` with the Spectral scheme.

Sep 13, 2024

Loading thumbnail…

TemaKart_kio

A world map shows the geographic distribution of missing migrants, with each event represented by a circle sized according to the reported total dead and missing. The visualization uses d3.geoNaturalEarth1 and d3.geoPath to render land, graticules, and country interiors, while d3.scaleSqrt maps data values to circle radii. Circles are positioned using the same projection in an SVG rendered through React, pulling from a CSV dataset and a GeoJSON topology from the kiosvoll GitHub repository.

Aug 9, 2021

Loading thumbnail…

Radar chart

This radar chart compares weekly usage percentages of 21 smartphone and tablet services, such as email, social networks, and online gaming, across two data series. It renders a multi-level circular grid with axis labels and value markers, using D3 v3’s selection and data join APIs to draw SVG polygons for each series. The chart supports click and double-click interactions that adjust fill opacity to highlight or reset series. A separate legend identifies the two devices by color, sourced from an ordinal color scale.

Nov 19, 2020

Loading thumbnail…

Sized Points on a Map

This visualization displays world cities with populations exceeding 50,000 as sized points on a natural Earth projection. Circle radii encode population using a square root scale, with data sourced from the Simplemaps World Cities Database. The map renders via React and SVG, using d3.geoNaturalEarth1, d3.geoPath, and d3.geoGraticule to draw country boundaries and graticules, while TopoJSON provides land and interior mesh geometry.

Nov 18, 2020

Loading thumbnail…

HTML Starter

This example shows a bare-minimum HTML page that displays the text “Hello HTML” in large, centered type, demonstrating the basic structure of a web document. The page uses a `<style>` block with CSS to set the font size and text alignment, and a `<script>` block to log a JavaScript message to the browser’s developer console. No external libraries or data sources are involved. The example serves as a minimal starting point for understanding how HTML, CSS, and JavaScript interact in a single file, and it references a separate React-based starter for comparison.

Nov 16, 2020

Loading thumbnail…

Sized kkk Points on a Map

A world map displays cities with populations over 50,000 as semi-transparent circles, sized by population using a square-root scale. The map is rendered in SVG with React, using d3.geoNaturalEarth1 and d3.geoPath for the projection and geographic paths, plus d3.geoGraticule for graticules. City data comes from the Simplemaps World Cities Database, while country boundaries are drawn from World Atlas TopoJSON. Circle radii are capped at 15 pixels via d3.scaleSqrt.

Nov 16, 2020