S

Stefan Apostol

@stefanachi·33 public vizzes

Loading thumbnail…

Fork of Digital Complexity-Full

This fork of Digital Complexity-Full uses the Eurostat Map framework to render a choropleth map of European NUTS2 regions, colored by a normalized "Complexity" indicator from a CSV file hosted on GitHub. It visualizes the data using threshold classification with breaks at 20, 40, 60, 80, and 100, and includes a legend, tooltips, and country insets for larger screens. The SVG output is generated via JavaScript, and the page includes a button that serializes the map to an SVG file for download, leveraging the `eurostat-map` API and the `XMLSerializer`.

Loading thumbnail…

complexity thesis

This interactive choropleth map displays digital complexity across Swiss NUTS2 regions using threshold-based classification. Built with the `eurostat-map` React library and rendered as SVG, it visualizes normalized complexity values from a CSV file, with a "DIGITAL COMPLEXITY" legend. The map includes insets for larger screens and a download button that serializes the SVG to a file via `XMLSerializer`, while responsive settings adjust legend and tooltip sizes for smaller devices.

Loading thumbnail…

Smoothed D3.js Radar Chart

A smoothed radar chart compares three smartphone brands across eight attributes such as battery life, brand, and price. The chart overlays semi-transparent, rounded polygons, with a low-opacity fill and stroke, over a circular grid with labeled percentage levels. Built with D3.js (v3.5.6), the visualization uses an ordinal color scale, linear radius scaling, and an SVG glow filter, with interactive hover tooltips. The data is embedded directly in the page, and the rendering is animated.

Loading thumbnail…

HQ

This chart visualizes changes in population and income inequality across U.S. metropolitan areas from 1980 to 2015. It uses a logarithmic x-axis for population and a reversed y-axis for inequality, with arrows indicating the direction of change for each metro, colored by the magnitude of inequality shift. Built with D3.js v5 and the Observable Plot API, the visualization encodes data from the `metros.csv` file, with labels for select metros and a color legend for inequality change.

Loading thumbnail…

plot

This example demonstrates interactive chart rendering with React and D3, adapting a force-directed network visualization where nodes are positioned and connected by links. Using `d3.forceSimulation` with collision detection and centering forces, the visualization updates node coordinates on each tick, with SVG circles and lines rendering the graph structure. The React component manages state for the simulation and uses hooks to synchronize the D3 force layout with React's rendering lifecycle. Node positions respond dynamically to simulated physics, allowing users to observe the network stabilizing from an initial random layout.

Loading thumbnail…

TRY COMPLEX

This map of Switzerland displays the normalized "Digital Complexity" across NUTS-2 regions, using a color gradient from the d3-scale-chromatic `d3.interpolatePlasma` scale. The eurostat-map library generates the SVG, with a threshold classification method and custom legend. The code also includes a button to download the rendered SVG, and the visualization adapts its layout and tooltip settings for smaller screens using responsive JavaScript conditions. The data is loaded from a CSV file stored on GitHub.

Loading thumbnail…

LISA Live-chat

This interactive choropleth map visualizes LISA clustering results across European NUTS regions, categorizing each area into four spatial association types (High-High, Low-High, High-Low, Low-Low) plus an “Island” designation. The eurostat-map JavaScript library renders the SVG map, loading CSVs of regional classifications from a GitHub gist and applying a custom color palette for each category. The page includes responsive legend adjustments for smaller screens and a Download SVG button that serializes the current map to a file for export.

Loading thumbnail…

Fork of Reldens

This example visualizes Relatedness Density across Swiss NUTS2 regions using a choropleth map. It employs the eurostat-map library to render the geographic boundaries as SVG, with a sequential color scale created via d3.scaleSequential and d3.interpolateYlGnBu to encode data values. The map uses threshold-based classification with specific cutoffs, and includes a legend and tooltips. The visualization also provides a button to download the rendered SVG, and adapts its layout and legend position based on viewport width.

Loading thumbnail…

LISA Results Visualization

This visualization displays LISA (Local Indicators of Spatial Association) results across European NUTS level 2 regions, categorizing each area into four quadrants (High-High, Low-High, High-Low, Low-Low) based on spatial clustering patterns, with islands marked as NA. The map uses eurostat-map to render SVG geometry, loading data from a CSV file containing NUTS IDs and LISA values, and applies custom fill colors and legend labels. It includes responsive insets for small screens, a legend for the digital complexity categories, and a JavaScript button that serializes the SVG for download.

Loading thumbnail…

Fork of Productivity-Complexity

This visualization displays a bivariate choropleth map of European NUTS2 regions, comparing digital complexity and productivity values. The map uses the eurostat-map library to render SVG regions, with each variable loaded from a CSV file via the `stat()` API. A custom `d3.scaleSequential` with the `interpolatePuBuGn` color scheme defines the bivariate color legend, while `d3.scale-chromatic` and `d3-interpolate` support palette generation. The map includes an interactive legend and a download button that serializes the SVG using `XMLSerializer`.

Loading thumbnail…

Fork of Fork of Productivity-Complexity thesis

This example displays a bivariate choropleth map of European NUTS2 regions, visualizing the relationship between digital complexity and productivity. The map uses a custom color scale with eight classes, blending `d3.interpolatePuBuGn` for one variable and `d3.interpolateRdYlBu` for the other, with thresholds applied to categorize data. It is rendered as an SVG using the `eurostat-map` library, which loads CSV data from a GitHub gist. The visualization includes an interactive legend and a download button that serializes the SVG to a file via `XMLSerializer`.

Loading thumbnail…

Temperature: from ObservableHQ

The visualization displays monthly global temperature anomalies from 1880 onward as a dot plot, with a horizontal reference line at zero and a moving average line. The dots are colored using a blue-red scheme to encode anomaly values. Built with Observable Plot and D3, the code loads data from `gistemp.csv`, converts dates and values, and uses `Plot.plot`, `Plot.dot`, `Plot.lineY`, and `Plot.ruleY` to render the chart with labeled axes and grid lines.

Loading thumbnail…

CMS Tech Share

This visualization maps the share of dependent live-chat traffic across Swiss NUTS-2 regions, using a sequential color scale built with `d3.scaleSequential` and `d3.interpolateRdPu`. The choropleth is rendered as SVG via the `eurostat-map` library, which loads CSV data from a GitHub gist and applies threshold-based classification. A custom arrow annotation and text label are appended to the SVG using `d3.select` and `svg.append`, drawing attention to a specific region. Users can download the resulting map as an SVG file through a button-triggered `XMLSerializer` export.

Loading thumbnail…

Age pyramid

This visualization shows the age distribution of a population, separated by sex and marital status. The pyramid displays males on the left and females on the right, with the y-axis showing age from 0 to 90 and the x-axis representing population counts in thousands. Each age group is broken down by marital status (single, married, divorced, widowed), with different colors representing each category. The chart uses the Observable Plot library, with `Plot.plot`, `Plot.areaX`, and `Plot.ruleX`/`Plot.ruleY` to construct the pyramid, while D3's `d3.csv` loads the population data.

Loading thumbnail…

Plot

This example displays a population pyramid using horizontally stacked areas, showing age distribution by sex and marital status across German population data from the Federal Institute for Population Research. Men are plotted to the left of the central axis, women to the right, with translated category labels for single, married, divorced, and widowed individuals. The primary plot uses Observable Plot’s `Plot.areaX` with negative and positive x-values to mirror the sexes, while a second version applies separate marks with shifted axes. Both render as SVG with an animated legend.

Loading thumbnail…

Reldens

This example displays a choropleth map of Switzerland, visualizing “Relatedness Density” data for NUTS2 regions using a threshold classification. The map uses a sequential RdYlBu color scale from `d3.scaleSequential` and `d3.interpolateRdYlBu` to encode the values. It leverages the `eurostat-map` library to render the map with SVG, and includes a legend, tooltips, and an inset for small screens. The underlying CSV data is loaded from a GitHub gist, and a button allows downloading the resulting SVG.

Loading thumbnail…

CMS Tech Share

This example shows the share of dependent individuals using live-chat technology across Swiss NUTS-2 regions, with a sequential RdPu color scale and threshold-based classification. It uses the `eurostat-map` library, D3 modules (`d3-scale`, `d3-scale-chromatic`, `d3-interpolate`), and a custom download button that serializes the rendered SVG via `XMLSerializer`. The map includes a legend, tooltips, and responsive adjustments for smaller screens.

Loading thumbnail…

Fork of Smoothed D3.js Radar Chart

This radar chart compares smartphone attributes across three brands—iPhone, Samsung, and Nokia—using survey data on criteria like battery life, design, and price. Each axis represents an attribute, with five concentric grid levels indicating value percentages. The D3.js (v3) visualization uses ordinal color scales, SVG rendering, and a glow filter to highlight each brand’s polygon. Interactive tooltips and legend styling enhance readability, while the chart’s animation and rounded strokes are configured through the `RadarChart` function.

Loading thumbnail…

Untitled

This example shows a hand-coded categorical legend made of colored circles and text labels arranged in columns. It lists product categories like Widgets, Hosting, and Analytics, alongside technology categories and generic variable names. The visualization is built with D3.js v4, using basic SVG selection and append methods to manually position each legend item. A second version includes a JavaScript button that serializes the SVG to XML and triggers a download of the rendered chart as an SVG file.

Loading thumbnail…

Untitled

This example demonstrates how to build a legend for bubble charts using SVG circles, dashed connector lines, and text labels. It shows three reference sizes (10, 50, and 100) positioned on a static canvas, with each label displaying placeholder text. The code uses d3.scaleSqrt() to map data values to pixel radii, then appends the legend elements via d3.selectAll().enter().append() in d3.v4. All rendering is done in a React-compatible HTML page, with the SVG object placed directly in the DOM.

Loading thumbnail…

Untitled

This visualization shows a directed force-directed graph where nodes representing digital advertising and analytics technologies connect to related services, with links flowing between categories like ad exchanges, ad analytics, and testing platforms. The code builds the visualization using d3.forceSimulation to position nodes and animate the layout, with SVG circles and lines for rendering. The graph uses d3.v3, as indicated by the script import, and applies a dark theme with semi-transparent nodes and links, where text labels identify each technology node.

Loading thumbnail…

Untitled

This example shows a small force-directed network of six nodes divided into two groups, connected by six links, rendered as an SVG in a React app. The code uses `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to compute node positions dynamically. Node colors are assigned via `d3.scaleOrdinal` based on the `group` field, and the simulation runs until the layout stabilizes, then stops.

Loading thumbnail…

clean map no points

This example displays a clean, uncluttered world map with country boundaries and graticules. The visualization renders landmasses in teal, country borders in a lighter shade, and a subtle graticule grid, all projected using the Natural Earth projection via `d3.geoNaturalEarth1`. Data comes from the World Atlas TopoJSON, processed with `topojson.feature` and `topojson.mesh` to extract land polygons and country borders. The SVG elements are styled through CSS classes, with the React component using `d3.geoPath` to convert GeoJSON features into SVG paths.

Loading thumbnail…

Points on the map original

This visualization displays a world map with circles representing cities having populations greater than 50,000, with circle size scaled by population using a square root scale. The map includes landmasses, graticules, and sphere outlines rendered as SVG paths projected via `d3.geoNaturalEarth1` and `d3.geoPath`. Country boundaries come from the World Atlas TopoJSON, while city data originates from Simplemaps. Circles are semi-transparent teal, with opacity allowing overlap visualization. The code uses React with `d3.csv` for city data loading and `topojson.feature` and `topojson.mesh` for geographical features.

Loading thumbnail…

Population Change in Europe in 2019 by Region

This example visualizes population change across European regions in 2019, using a choropleth map with a color scale ranging from brown to teal to represent growth rates per 1,000 persons. It employs the `eurostat-map` library, which fetches Eurostat data via the `demo_r_gind3` dataset, and renders the map as an SVG using React and D3. The map includes customizable borders, legend, and title, with thresholds dividing the data into discrete color classes.

Loading thumbnail…

maps

A pie chart renders the CSS named colors by loading their hex values from a CSV file with `d3.csv`. Each color occupies a slice, drawn as an SVG `path` using the `d3.arc` generator with a zero inner radius and the full chart width as outer radius. The `d3.pie` layout calculates slice angles, while React manages state and updates the visualization on data load.

Loading thumbnail…

Rendering Data with React & D3

This example renders a pie chart of CSS color names using React and D3. It loads color data from a CSV file via D3’s `csv` function and maps each row to a pie slice using D3’s `pie` and `arc` utilities. The SVG output uses React’s `useState` and `useEffect` hooks to asynchronously fetch and store the data, then renders each slice as a colored path. The visualization displays the distribution of named colors with their hex values directly as fill colors.

Loading thumbnail…

Loading data with React D3

This example demonstrates how to load and display data in a React application using D3. The app fetches a CSV file containing CSS color names and shows summarized statistics about the dataset, including file size in kilobytes, row count, and column count. The data loads asynchronously with `d3.csv`, while React manages the component state through the `useState` and `useEffect` hooks. The result is rendered as plain text in a `<pre>` element, with the message formatted by a separate utility function that uses `d3.csvFormat`.

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates loading and parsing CSV data, displaying the file size in kilobytes, row count, and column count of the dataset. It uses D3 v5’s `d3.csv` method to fetch and parse a remote CSS colors CSV file from a GitHub gist. The page also includes commented-out alternatives using `fetch`, `async`/`await`, and `d3.csvParse`, along with a “pyramid of doom” example, showcasing different approaches to asynchronous data loading. The results appear in large text within a `<pre>` element.

Loading thumbnail…

Fork of mouse move

A single black dot follows the mouse as it moves across a full-screen SVG canvas. The dot’s position is updated in real time using React state, with the `onMouseMove` event capturing client coordinates. Rendered entirely with SVG `circle` elements, the example uses React 16.9 and ReactDOM to manage re-renders, while the dot’s radius remains fixed at 40 pixels.

Loading thumbnail…

React data

A React-based SVG visualization displays a single circle that follows the mouse cursor across the screen. The code uses React’s `useState` hook to track mouse coordinates and the `onMouseMove` event handler to update the circle’s position. Rendered with ReactDOM and SVG elements, the example demonstrates real-time user interaction without external data sources.

Loading thumbnail…

Upload data

This example demonstrates fetching a remote CSV file containing CSS color data from a GitHub gist URL, using the browser's built-in `fetch` API to retrieve the text content asynchronously. The script defines a `fetchText` function that calls `response.text()` and logs the raw CSV data to the console, providing a bare-bones starting point for loading external tabular data into a web page. Only the retrieval and logging of the data is implemented—there is no visual rendering or chart drawing, making it a minimal skeleton for a future data visualization project. The code relies purely on standard JavaScript, with no external libraries or frameworks included.

Loading thumbnail…

Smilepage saved

A grid of sixteen identical smiling yellow faces, rendered as circles with black outlines, eyes, and an arc-shaped mouth, repeats across the screen. Built with React components and D3’s `d3.arc` for the mouth path, the faces are generated using `range` and mapped into SVG elements via `FaceContainer`.