MoritzStefaner

@MoritzStefaner·12 public vizzes

Gist db8c3f8fda7a4d6857a10214268a0047

This example demonstrates a JSON schema that defines the structure of a calendar event, specifying properties such as start and end dates, summary, location, and description. It shows the required fields and data formats needed to represent an event, likely for use in a scheduling or event-management interface. The schema itself is the core artifact, using standard JSON Schema draft 2020-12 conventions. No external visualization libraries are employed; the example focuses purely on the data contract. The rendering approach is not depicted, as the code provides only the schema definition.

Jun 12, 2025

Loading thumbnail…

Links from CCVI talk at re:publica 2025

This network visualization maps the interconnections between resources cited in a talk on the Climate Change and Violent Conflict Index (CCVI), using a force-directed layout. The graph clusters nodes by domain, showing how references from a gist, an Observable Notebook, and a GitHub repository relate to each other. The rendering relies on the D3.js library, specifically `d3.forceSimulation` for physics-based node placement and `d3.geoPath` for any geographic projections. Node and link styling are handled via SVG paths, with color encoding to distinguish the three primary data sources.

May 26, 2025

Loading thumbnail…

Gist 5f836e3f0f062e4b027d4a8aaa088fe5

This example shows a simple configuration snippet for integrating a Python virtual environment with Visual Studio Code, specifically to set the Python interpreter path. The code defines two settings: `python.venvPath` and `python.pythonPath`, both pointing to the `.venv` folder within the workspace. The gist is a minimal text file, not a data visualization, but it demonstrates how to use the `"python"` configuration keys in VS Code’s settings to ensure the editor uses the correct virtual environment for development.

Mar 23, 2020

Loading thumbnail…

Force based label placement

Two force-directed layouts run simultaneously: one positions graph nodes and edges from randomly generated links, while a second governs label anchors that orbit each node at a fixed distance and repel one another to prevent overlap. Labels on the right align left, labels on the left align right, with interpolation in between. The code uses d3.layout.force for both simulations, d3.select, SVG text bounding boxes via getBBox, and manual transform updates on each tick.

Jan 20, 2020

Loading thumbnail…

Text answers from the dataviz survey 2017 by Elijah Meeks et al.

This interactive visualization presents the qualitative text responses from the 2017 Dataviz survey, processing free-form answers into a navigable landscape. It shows the distribution and thematic connections across survey questions about job frustrations, desired support, and workplace improvements. The code uses a React framework with a WebGL rendering engine to display the text data, likely employing a force-directed layout to cluster related responses visually. The underlying data originates from a public gist repository containing the raw survey response files.

Mar 17, 2017

Loading thumbnail…

(Roughly) gender guessing ars submissions. This is based on the first names of ars electronica submissions up to 2008. Gender guess through https://pypi.python.org/pypi/gender-detector/0.0.4. Results: ({'male': 14847, 'unknown': 10772, 'female': 5281}) estimated 26.2% women

This visualization estimates the gender distribution of Ars Electronica submissions up to 2008, showing roughly 26.2% female contributors. It reads first names from a text file and uses the `gender_detector` Python library with the US dataset to guess each name’s gender, tallying results with `Counter` and `defaultdict`. The code prints cumulative counts, the percentage of women, and the most common female and male names after every 100 entries, revealing the skewed gender ratio and recurring contributor names.

Sep 10, 2015

Loading thumbnail…

Gist c279dccce26cb2098de6

This example is a React application that sets up an empty container component with an initial state of an empty items array. The code uses React’s createFactory and createClass APIs, along with React.DOM shorthand tags (such as div, ul, li, and form) to define the component structure. The render method is a stub, with subcomponents noted but not yet implemented, and the app is mounted to the DOM via React.render in a jQuery document-ready handler. The data source and any visualization logic are not yet present in the provided code.

May 26, 2015

Loading thumbnail…

Path information from Illustrator

Loading an external SVG hexagon via `d3.xml` from Dropbox, this example extracts a hardcoded `d` path string from Illustrator and appends it as an SVG path element. The code explicitly sets the path’s coordinates for a six-sided polygon, then renders it inside the primary `svg` container using D3’s `append` and `attr` methods. It demonstrates how to reuse vector path data from design tools directly in a D3 visualization, bridging graphic design and data-driven document creation. The resulting shape remains static, with no interaction or animation.

May 17, 2014

Loading thumbnail…

Gist 9793619

This visualization explores the linguistic variations in a corpus of spam comments, displaying a network of interconnected phrases. It uses d3.forceSimulation to lay out the nodes, which represent unique text snippets, and d3.geoPath to render geographic-like boundaries, mapping the structural relationships between different phrasings. The data comes from a gist file containing the spam text, with the rendering approach highlighting how common template-based spam is constructed. The visualization reveals the underlying patterns and repetitions within the comment data.

Mar 26, 2014

Loading thumbnail…

Search where people are moving in Germany

This visualization maps migration flows between Germany’s 30 largest cities by querying Bing for each pair of city names in the pattern “von [source] nach [target] gezogen.” The code, written in Python, uses the `pattern.web` library’s Bing search engine and records the result counts as a CSV of source-target-weight triples. The resulting directed graph likely plots city nodes with edge thickness proportional to the number of search hits, showing where people move most frequently.

Dec 6, 2012

Loading thumbnail…

Sample class for rendering a gephi layout with Java/processing

This example renders a directed network layout computed with Gephi’s ForceAtlas2 algorithm directly inside a Processing sketch. The code imports a GEXF file, applies the layout, and draws nodes as ellipses scaled by weighted in-degree, with labels positioned near each node. It dynamically recomputes the bounding box each frame to map graph coordinates to screen space, then updates node masses based on degree before stepping the layout. The sketch uses the Gephi toolkit’s GraphController, ImportController, and layout API, alongside Processing’s PApplet, PFont, and PVector classes.

Aug 22, 2012

Loading thumbnail…

Gist 1434108

This example shows an animated optimization of city points on a map, where nodes move toward their geographic positions while avoiding overlap and scaling by weight. The visualization uses a custom `MapOptimizer` class extending Flare’s `Visualization` with a `ProximityManager` for spatial queries. Each animation step runs a force-like relaxation: nodes ease toward stored screen coordinates, while pairwise repulsion separates overlapping circles, with cross-country pairs pushed apart more strongly. The `Transitioner` and `update` loop drive the iterative process, gradually shrinking node scale over 200 iterations until convergence.

Dec 5, 2011