Skip to main content
Log in
M

ManoukK

@ManoukK·15 public vizzes

Loading thumbnail…

functioneel programmeren (een test)

This example maps the geographic distribution of a collection of objects by querying a SPARQL endpoint and plotting the results as colored circles on a world map. It uses d3-geo-projection for the map projection, d3.geoPath to render country outlines, and a fetch to the Network Digital Heritage API. The circles are colored by country with a tooltip on hover.

Jan 30, 2020
Loading thumbnail…

functioneel programmeren (herkansing)

A world map visualizes the geographic distribution of museum collection items, with each item represented as a small circle colored by its country of origin. The visualization uses a Werner or Gilbert projection via `d3-geo-projection`, and renders country boundaries using `d3.geoPath` with TopoJSON data from `world-atlas`. Circle positions are calculated by projecting latitude and longitude coordinates fetched from a SPARQL endpoint querying the Network of Digital Heritage (NMVW) dataset. Hovering over a circle shows a tooltip displaying the country name. The code relies on D3 v5, TopoJSON, and SVG rendering.

Jan 30, 2020
Loading thumbnail…

Basis wereldkaart

This visualization displays a basic world map using the Natural Earth projection, with countries rendered as light green polygons and the surrounding sphere filled with light blue. Countries are drawn from the World Atlas TopoJSON dataset, which is loaded via `json`, converted to GeoJSON features with `feature`, and projected using `geoNaturalEarth1`. The map is generated with `geoPath` and rendered as SVG paths, demonstrating a straightforward D3.js mapping workflow.

Jan 27, 2020
Loading thumbnail…

Een collectie zonder Indonesië

This bar chart displays the number of objects in a museum collection per category, excluding items from Indonesia, with bars colored by continent and selectable via radio buttons. It uses D3 v5 to query a SPARQL endpoint from Netwerk Digitaal Erfgoed, fetching data about world cultures, and renders the results as an SVG with custom axes. The chart rotates category labels and applies a color palette based on continent values.

Jan 27, 2020
Loading thumbnail…

nibud

This visualization presents the monthly budget categories from Nibud, showing whether each category results in a positive or negative value. The bars extend left or right from a central zero axis, with positive values in orange and negative values in blue. Using D3 v5 with SVG rendering, the code implements `scaleLinear`, `scaleBand`, `axisLeft`, and custom tick positioning to place negative category labels on the opposite side. Data is loaded from a CSV file and sorted by value using `ascending`.

Jan 22, 2020
Loading thumbnail…

Making a Bar Chart

This bar chart visualizes monthly household expenses across categories like gas, electricity, and education, using data from a 2018 United Nations population report. It compares spending against NIBUD advisory thresholds, with a vertical line marking the recommended limit. Built with D3 v5, the chart uses `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render an SVG. Custom background rectangles highlight the advisory zone, while colors distinguish expense types. The x-axis is formatted with percentage ticks, and data loads from a CSV via `d3.csv`.

Jan 16, 2020
Loading thumbnail…

Document

This visualization uses a treemap layout to display monthly household expenses, organized by spending category (vaste lasten, reserves, and huishoudelijke uitgaven) with numeric values from a CSV file. The code employs d3.stratify to build a hierarchy from the flat data, then d3.treemap to compute rectangle positions and sizes. Each leaf is rendered as a green SVG rectangle with a white text label showing the category name, using D3 v5 within a React framework. The chart uses a fixed 960×500 SVG canvas.

Jan 6, 2020
Loading thumbnail…

Treemap from bl.ocks.org

This treemap visualizes hierarchical data, such as the flare.json dataset, using nested rectangles to represent size values, with an option to re-sort by count. It shows an interactive animation that smoothly transitions between these two aggregation modes. Built with D3.js v4, the code uses `d3.treemap`, `d3.treemapResquarify`, and `d3.hierarchy` to process data, while SVG rendering and `d3.transition()` handle the animated updates. The example also includes a color scale from `d3.schemeCategory20` for visual distinction.

Jan 2, 2020
Loading thumbnail…

Bowl of Fruit - General Update Pattern Special Cases

This example demonstrates the "general update pattern" with special cases, showing how a bowl of fruit (initially all apples) transitions to a mix of apples and lemons. The SVG visualization uses D3 v5 to render circles and text labels for each fruit, with a static bowl rectangle in the background. The code employs `scaleOrdinal` for color and radius mapping, and uses selection methods like `groupsEnter.merge(groups)` and `groups.exit()` to handle updates efficiently. Initial apples are placed using `range` and `append`, while the fruit bowl logic manages the dynamic transition.

Nov 25, 2019
Loading thumbnail…

test Een collectie zonder Indonesië

This bar chart displays the population of the top 10 most populous countries, omitting Indonesia from the dataset despite its inclusion in the source data. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear` and `scaleBand` for the y and x axes respectively. Data is loaded from a local CSV file using `csv`, and the chart customizes axes with rotated labels and red tick marks. The bars are drawn as `rect` elements, with the y-axis inverted using a range of `[innerHeight, 0]`.

Nov 22, 2019
Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the top 10 most populous countries using horizontal bars, with population values on the x-axis and country names on the y-axis. The bars are rendered as SVG rectangles using React components, with axes built from `d3.scaleBand` and `d3.scaleLinear`. Population data comes from the United Nations World Population Prospects 2019, loaded via `d3.csv`. The chart includes native tooltips and styled ticks, with labels formatted using `d3.format`.

Nov 22, 2019
Loading thumbnail…

D3 map

This example visualizes a world map using Natural Earth data, with goldenrod countries and a black sphere, onto which white circles representing locations from a SPARQL query are animated. The map uses d3.geoPath with a geoNaturalEarth1 projection. Data is fetched from a live SPARQL endpoint, and circles are rendered as SVG elements with a transition delay for sequential appearance. The code relies on d3.json, d3.select, and topojson.feature for processing, with d3.easeBounce controlling the animation.

Nov 20, 2019
Loading thumbnail…

Tutorial Sunburst Datavisualisation

This sunburst chart visualizes a categorical dataset of weapon types, showing hierarchical proportions through concentric arcs. The D3.js v4 code uses `d3.partition` and `d3.arc` with a `d3.hierarchy` structure, rendered as SVG paths from a sample dataset defining topics and sub-items. A dark background provides contrast for the color-coded segments. The example primarily demonstrates how to construct a sunburst layout programmatically rather than displaying the full provided data.

Nov 18, 2019
Loading thumbnail…

Choropleth Map

This choropleth map colors countries by their economy type using a categorical ordinal scale with the d3.schemeSpectral palette. It renders world geography with d3.geoNaturalEarth1 and d3.geoPath, allowing zoom and pan via d3.zoom. A custom color legend displays the scale with circles and labels, while hovering highlights a country in red. Data comes from the world-atlas TopoJSON and TSV files, and the visualization is drawn with SVG.

Nov 13, 2019
Loading thumbnail…

Choropleth Map

This choropleth map colors countries by economic classification using an ordinal color scale with a spectral palette. The visualization includes a custom SVG color legend showing category colors and labels. Built with D3 v5, it uses `d3.geoNaturalEarth1` for projection, `d3.geoPath` for rendering, and applies zoom interactions. The map loads TopoJSON data from world-atlas and joins it with TSV metadata to assign country properties. Hovering highlights individual countries in red.

Nov 13, 2019