Tomas S

@TomasS666·6 public vizzes

Wapens per categorie wereldwijd!

This visualization maps the worldwide distribution of weapon types using a geographical projection. Dots representing individual objects are plotted on a Mercator-projected world map, with each dot’s color corresponding to its weapon category. A zoomable interface and a legend animate into view on the left side. The visualization uses `d3.geoMercator` and `d3.geoPath` for the map, `d3.scaleOrdinal` with a category color scheme, and `d3.zoom` for interaction. Data is fetched via a SPARQL query from the Dutch Digital Heritage Network’s API, with country outlines loaded from the World Atlas TopoJSON dataset.

Nov 21, 2019

Loading thumbnail…

Wapens per categorie wereldwijd!

The visualization displays weapons and their categories on a world map, with points colored by category and a legend showing the color scale. D3 v5 and topojson load geographic data from the World Atlas, while a SPARQL query fetches weapon metadata from the Netwerk Digitaal Erfgoed API, including coordinates. The map uses a geoMercator projection with d3.geoPath for country shapes and circle elements for data points, featuring zoom and pan via d3.zoom. The legend animates in using a transition on the style transform.

Nov 21, 2019

Loading thumbnail…

Let's make a face with D3.js

A yellow SVG face with eyes, eyebrows, and an arc-based smile is built entirely with D3.js primitives. Circles form the eyes and face, rectangles create the eyebrows, and a path from `d3.arc()` draws the mouth. The eyebrows animate vertically through chained `transition().duration(500)`, shifting down then returning. The code reads the SVG's height and width attributes to center a root group, then positions facial features relative to that center.

Nov 19, 2019

Loading thumbnail…

Let's make a map with D3.js!!

This example demonstrates a basic thematic map of world countries using D3.js and the geoMercator projection. The code loads a TopoJSON dataset from the World Atlas package and converts it into GeoJSON features with the `topojson.feature` API, then renders each country as an SVG path via `d3.geoPath`. It also includes a simple text label manipulated through D3 selections. The map is rendered to an SVG canvas with a fixed width and height, and the styling removes page margins for a full-bleed display.

Nov 15, 2019

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes and CSS styling in a static visualization. It shows circles and rectangles with varying fill colors, stroke properties, and a line with a polyline path, all grouped and transformed within an SVG canvas. The code uses raw SVG elements like `circle`, `rect`, `line`, and `path`, along with CSS classes to control stroke appearance and line joins. A `<g>` element applies a translation transform, and inline attributes set fill and stroke values directly. The rendering is entirely client-side via SVG, with no external JavaScript libraries or data sources.

Nov 13, 2019

Loading thumbnail…

Shapes with SVG and CSS

This example displays geometric shapes—circles, rectangles, a line, and a path—arranged in a grid, with colors and strokes varied through nested SVG groups. The visualization uses raw SVG elements (circle, rect, line, path) with CSS for page styling and transform attributes for scaling and translation. Fill and stroke properties are set directly on elements or inherited from parent `<g>` groups, demonstrating how SVG’s group hierarchy controls visual inheritance and positioning without additional libraries.

Nov 13, 2019