Ramon96

@Ramon96·12 public vizzes

Bar chart experiment

This example visualizes the number of cultural objects per function type within a museum collection, displayed as a horizontal bar chart. It queries a SPARQL endpoint from the Network Digital Heritage dataset using a custom `runQuery` function, then maps the results with D3 v5 scales. The bars are colored using `d3.scaleOrdinal` with `schemeCategory10`, and axes are generated via `axisLeft` and `axisBottom`. Tooltips are added through SVG `title` elements. The chart is rendered entirely as SVG in a static HTML page.

Jan 21, 2020

Loading thumbnail…

Untitled

This chart displays the population distribution across six U.S. states, broken down by seven age brackets. Each state’s data is shown as a group of colored bars, with a legend that allows users to click on age categories to filter which bars remain visible. The visualization uses D3 v5 with a band scale for grouping, a linear scale for the y-axis, and an ordinal scale for colors. It is rendered as an SVG, and clicking a legend item triggers a transition that updates the visible bars and rescales the axes.

Jan 20, 2020

Loading thumbnail…

Sample data

This visualization maps the global distribution of cultural heritage objects by function, using colored circles over an interactive world map. It queries the Network Digital Heritage API via SPARQL to retrieve object types, titles, and geographic coordinates. The map is rendered with `d3.geoNaturalEarth1` and `d3.geoPath` from the world-atlas TopoJSON, with zoom enabled. Circles are animated using `d3.easeBounce` and a color scale based on `d3.schemeCategory10`.

Nov 27, 2019

Loading thumbnail…

Exploring survey data interactively - both axes

This interactive scatterplot from a survey dataset lets users explore relationships between variables by selecting both the x- and y-axis fields via dropdown menus. Using D3.js v5 with SVG rendering, the visualization updates dynamically through the general update pattern, re-nesting data with `d3.nest().rollup()` and re-drawing bars and axes when either selection changes. The code employs d3.scaleBand and d3.scaleLinear for the axes.

Nov 26, 2019

Loading thumbnail…

Exploring survey data interactively - new join() version

This interactive bar chart uses the D3.js v5 join() method to dynamically explore relationships between variables in a survey dataset. Users select variables from two dropdown menus, which updates the x-axis categories and y-axis values (including averages for stress, height, and expenses). D3’s scaleBand and scaleLinear redraw the bars and axes on each selection, while the data is transformed via nest(), rollup(), and mean() before rendering as SVG. The underlying JSON data is loaded asynchronously using d3.json().

Nov 26, 2019

Loading thumbnail…

Interaction

This visualization maps the global distribution of cultural objects by function, with each point representing a museum artifact and its category shown through color. Users can pan and zoom the map using d3.zoom, while points animate onto the map with a bounce ease via d3.transition. The map uses d3.geoNaturalEarth1 and d3.geoPath to render country boundaries from TopoJSON, with data fetched live from a SPARQL endpoint via a custom fetch wrapper.

Nov 25, 2019

Loading thumbnail…

Nu het inladen van de nieuwe data

This example shows the worldwide geographic distribution of masks by function, with each object plotted as a colored circle on a Mercator projection. It uses d3.geoPath and d3.geoMercator to render country boundaries from TopoJSON, while d3.scaleOrdinal maps each mask type to a color. Circles appear after a 1000ms delay with a bounce transition, and d3.zoom enables panning. The data comes from a SPARQL query to the Netwerk Digitaal Erfgoed API, filtered by a specific term hierarchy.

Nov 15, 2019

Loading thumbnail…

Nog een poging..

This visualization shows a zoomable Mercator map of the world with a set of Indian military regiment locations marked by geographic coordinates. Each location is linked to its Wikipedia page, though the links are defined but not visibly rendered. The map displays country boundaries in lime green over a light blue background. Using d3.geoPath and d3.geoMercator with TopoJSON world atlas data, the code renders SVG paths and implements pan and zoom through d3.zoom, applying transforms to the map group.

Nov 15, 2019

Loading thumbnail…

Making a map with Curran's help

A map of the world is drawn on an SVG canvas, with countries filled in lime and the sphere of the Earth rendered in light blue. The visualization uses D3.js (v5) and the topojson library to load GeoJSON data from the world-atlas package. The `geoPath` and `geoMercator` projections from D3 generate the map geometry, while the `select`, `json`, and `feature` functions style and arrange the country paths.

Nov 15, 2019

Loading thumbnail…

Making a face with Curran's help

A yellow SVG face with animated eyebrows demonstrates basic D3 v5 shape and transition APIs. The code uses `d3.select`, `d3.arc`, and chained `transition().duration()` calls to move the brow rectangles up and down over two seconds. Eyes and brows are positioned with explicit `attr` values for spacing and offsets, while the mouth is drawn as a half-arc path. The face is centered by translating a group element to the middle of the 960×500 SVG canvas.

Nov 15, 2019

Loading thumbnail…

Data point's op de kaart met enquete data

A world map displays survey responses as individual data points, each marking a GPS coordinate where a respondent found a place beautiful. The map uses a Mercator projection with `d3.geoPath` to render country boundaries from TopoJSON, while coordinate cleaning and DMS conversion happen in a separate module. Points are drawn as SVG circles using `d3.geoMercator`. The visualization supports pan and zoom through d3’s `zoom` behavior, applied to the map group.

Nov 14, 2019

Loading thumbnail…

Cheap tricks with interaction

This example displays a world map rendered in SVG using D3 v5 and a Mercator projection, with country boundaries drawn from TopoJSON data. It demonstrates simple interactive techniques: users can pan and zoom the map via d3.zoom, while hovering over individual countries triggers a CSS-based color change and a native tooltip showing the country name, sourced from a TSV file. The code uses d3.geoPath, d3.geoMercator, and topojson.feature.

Nov 14, 2019