L

LuisSevillano

@LuisSevillano·61 public vizzes

Loading thumbnail…

Gell all polygons from a rendered Leaflet map

This example extracts all polygon geometries from an already-rendered Leaflet map and packages them into a GeoJSON FeatureCollection. It iterates through every layer on the map using `map.eachLayer`, collects markers and polygons, and converts eligible layers to GeoJSON via `layer.toGeoJSON()`. The resulting features are filtered to include only Polygon types and then copied to the clipboard with `copy(output)`. The code relies on Leaflet’s layer inspection and GeoJSON conversion methods, showing how to harvest vector data directly from a live map instance.

Loading thumbnail…

Invert d3 scaleBand

This example demonstrates how to invert a `d3.scaleBand` scale, allowing a pixel position to be mapped back to the corresponding categorical domain value. The code defines a custom `invert` method that calculates the band index by accounting for outer and inner padding, the step size, and the range’s direction. It uses the `d3-scale` API, specifically the scale’s `domain()`, `range()`, `paddingOuter()`, `paddingInner()`, and `step()` methods, to compute the result. The implementation handles both ascending and descending ranges, returning the appropriate category for any point in the range.

Loading thumbnail…

Regex to replace commas to points in gedit

This example demonstrates how to use regular expressions in the gedit text editor to replace decimal commas with decimal points in a CSV file. The data, containing numeric values with commas as decimal separators, is shown first, followed by the two-part regex workflow. The find pattern `(\d{1,2}),(\d{1,2})` captures digit groups around a comma, while the replacement string `\1.\2` reconstructs the number with a period. The process relies on gedit’s built-in find-and-replace functionality, which supports regex syntax for pattern matching.

Loading thumbnail…

Extract data from ggplot plot

The example demonstrates how to extract the underlying point positions from a ggplot2 scatter plot after applying jittering, then re-plot those extracted coordinates with higher transparency to reveal overplotting patterns. Built with R’s ggplot2, the initial plot uses `geom_point` with `position_jitter(h = 0)` and an alpha of 1/100, producing a dense darkred cloud of age versus dependent variable. The code then calls `layer_data(plot, 1)` to retrieve the jittered x and y values from the first layer, feeding them into a new ggplot with `geom_point(alpha = 1/20)`, increasing visibility of individual points that were previously obscured by the heavy overdraw.

Loading thumbnail…

New composite border in es-atlas

This example shows a map of Spanish municipal boundaries rendered with D3.js. It uses a composite border for the Canary Islands, a cartographic convention, alongside the standard municipal outlines. The code loads a TopoJSON file and applies a geographic identity projection with `d3.geoPath` to draw the shapes. It uses `topojson.feature` to extract the border and composite border objects, and the `d3-composite-projections` library to support the projection, resulting in an SVG visualization.

Loading thumbnail…

Preprojected TopoJSON

This example shows the autonomous regions of Spain displayed as a preprojected TopoJSON topology. The map is rendered using the `d3.geoPath` function to draw the polygon and MultiPolygon geometries, with shared arcs efficiently referenced between regions to form the composite border. The code loads the TopoJSON file with a `transform` and `scale` property, indicating the data is preprojected into planar coordinates. The visualization uses the D3.js library to parse and render the topology, demonstrating how complex boundary data can be compactly encoded and reproduced without a full geographic projection system.

Loading thumbnail…

d3-composite-projections test

This example demonstrates an interactive map of Spain’s autonomous regions using the d3-composite-projections library to combine separate projections into a single visualization. It loads preprojected TopoJSON data from the es-atlas package and renders boundaries with `d3.geoPath`, while a dashed brown overlay marks the composite projection’s internal borders. As the user moves the mouse, the code uses `projection.invert` to display geographic coordinates and appends fading circles at each cursor position, using SVG transitions to shrink them. Points outside the valid projection area trigger an error message instead of drawing.

Loading thumbnail…

A R function to deal with datasets with a double header

This visualization displays unemployment rates by age group and gender across Spanish autonomous communities over time, using small multiples. The R script reads an Excel file with a double header, then cleans it using the `tidyverse`, `janitor` for removing empty rows and columns, and `readxl` for data loading. The `combineHeaders()` custom function merges the two header rows by filling empty cells and pasting values together. The final plot uses `ggplot2` with `geom_line` for time series, faceted by community, and applies a custom color scale and minimal theme.

Loading thumbnail…

Rivers of Spain

A choropleth of Spain's river network, drawn from Ministerio para la Transición Ecológica data, uses a custom power-law width scale to encode river order (from 1 to 14) as tapered line strokes. The code renders vector features via `topojson-client` and `d3-geo`’s `geoIdentity` and `geoPath` onto a Canvas surface, then exports the result to a static PNG. The border is stroked separately in a contrasting dark teal, while river lines use a near-black stroke.

Loading thumbnail…

Add new column in PostgreSQL with a subquery and set a NOT NULL constraint

This example shows how to add a new column to an existing PostgreSQL table and populate it with values from another table using a subquery in an UPDATE statement. The SQL script begins by adding the `exp_id` column as type `text`, then updates it by joining `table1` with `table2` on the `gid` field to copy matching `exp_id` values. Finally, it alters the column to set a `NOT NULL` constraint and wraps all operations in a single transaction with `BEGIN` and `COMMIT` to ensure atomicity. The code relies on standard PostgreSQL DDL and DML commands without external APIs.

Loading thumbnail…

Bash script to process frames and convert then to a video format with ffmpeg

This example demonstrates how to assemble a sequence of numbered JPEG frames into a single video file. It relies on the Bash script to orchestrate the conversion, calling ffmpeg with a specified framerate of 30 frames per second. The command uses the libx264 codec with high profile settings, a constant rate factor of 18, and the yuv420p pixel format to ensure broad compatibility. The input pattern `path_to_file_%04d.jpeg` indicates that frames are named with four-digit zero-padded numbers, which ffmpeg then reads sequentially to produce the final `output.mp4`.

Loading thumbnail…

Close all connections from a Postgres database

This example shows how to forcibly terminate every active connection to a named Postgres database except the current session. The SQL query selects all rows from `pg_stat_activity` and calls `pg_terminate_backend(pid)` for each matching process ID, filtering by `datname = 'database'` and excluding the backend’s own PID. The query returns the full activity listing alongside the termination result for each row. The visualization relies solely on the Postgres system catalog function, with no external charting libraries or rendering pipeline.

Loading thumbnail…

Cadastre Data from http://www.sedecatastro.gob.es/. It contains the year of construction of each building in the ciry of A Coruña, Spain

A visualization displays construction years of buildings in A Coruña, Spain, from the Catastro cadastre dataset. It shows the distribution of building ages across the city, highlighting clusters of older and newer structures. The visualization uses a force-directed graph layout, likely with d3.forceSimulation, to arrange data points. The rendering employs Canvas getImageData for pixel-level analysis and d3.geoPath to map spatial information. The visualization explores the temporal pattern of urban development through the dataset's year_int values.

Loading thumbnail…

Funcionalidades básicas de QGIS (III)

This example demonstrates how to create a point layer from earthquake data and work with raster files in QGIS. It shows the process of downloading earthquake records from the USGS catalog as a CSV file, importing this delimited text layer into QGIS, and specifying the coordinate reference system (WGS84, EPSG:4326) for geographic coordinates. The tutorial then applies a size assistant to scale point symbols based on earthquake magnitude, filters the data using expressions like "mag" > 5, and adds supplementary layers such as Natural Earth administrative boundaries and tectonic plate shapefiles with categorized styling and labels. The workflow covers loading the CSV via QGIS’s delimited-text layer dialog, configuring X/Y coordinate fields, and managing layer properties for visual customization.

Loading thumbnail…

Funcionalidades básicas de QGIS (II)

This example shows how QGIS vector geoprocessing tools create new spatial datasets, such as intersecting layers, dissolving shared boundaries, and generating fixed-distance buffers around features. The code demonstrates a Vue workflow that filters municipal polygons, applies a dissolve to derive an island contour, and uses a buffer to define a protected perimeter. It relies on QGIS’s native vector analysis APIs for operations like intersection, asymmetric difference, union, and clip, and references Open Street Map extracts from Geofabrik alongside Red Natura 2000 data.

Loading thumbnail…

QGIS-funcionalidades-basicas

This interactive WebGL visualization demonstrates core QGIS vector-layer styling techniques, including categorized, graduated, rule-based, and inverted polygon symbology. It showcases how the open-source desktop GIS applies color ramps, labels, and attribute-driven rendering to geographic vector data, with examples using sample boundary layers. Built from a tutorial by LuisSevillano, the example pairs static maps with filter and join workflows for shapefiles. The implementation relies on custom JavaScript and Three.js for hardware-accelerated rendering, while the interface mirrors QGIS’s desktop panel layout—offering no direct API calls to d3 or Canvas, but visually reproducing the software’s native style editor behavior.

Loading thumbnail…

Gist 5a00993a5372ab7fb1a3ce99a6d0e46b

This chart is a line graph of Google's stock price over the summer of 2014, showing daily fluctuations in the closing price. It uses the `d3.js` library for rendering an SVG with a time-series line and a date-scaled x-axis. The data for each trading day is loaded from a CSV file that includes both price and volume. The visualization highlights the stock's downward trend and volatility during that period, with each data point clearly marked on the path.

Loading thumbnail…

Positioning triangles inside an element with CSS pseudo elements

This example demonstrates how to add directional arrows to a UI component using only CSS pseudo-elements, with no JavaScript or external libraries. The `.pill` element is styled with a relative position, while its `::before` and `::after` pseudo-elements each create a small triangular arrow on the left and right sides, respectively, using bordered boxes with transparent top and bottom borders. The triangles are vertically centered and offset from the edges using absolute positioning and margin values, simulating a callout or slider control. The code relies entirely on native CSS properties like `border-top`, `border-bottom`, and `margin-top` to construct the shapes.

Loading thumbnail…

Normalizer

This example demonstrates a string normalization function that converts accented and special characters into plain ASCII equivalents. It builds a character mapping from two parallel strings, then processes each input character, replacing matches with their mapped counterparts and lowercasing the final result. The implementation relies on standard JavaScript string methods such as `charAt`, `hasOwnProperty`, `join`, and `toLowerCase`. The code is presented as a standalone JavaScript function, with no external libraries or data sources involved, showing the raw logic behind text sanitization in a compact form.

Loading thumbnail…

Formating numbers and dates in Spanish

This example demonstrates how to localize number and date formatting for the Spanish language using D3.js. It applies custom locale settings for both numeric values and time-based strings, such as abbreviating numbers with a comma as the decimal separator. The code imports locale-specific JSON files for Spanish from the `d3-format` and `d3-time-format` libraries, then uses `formatLocale` and `timeFormatLocale` to create formatting functions that capitalize the first letter of month names output by `locale.format('%B')`.

Loading thumbnail…

From Hong Kong to Brussels

An animated globe highlights the journey from Hong Kong to Belgium, tracing a flight path between the two countries. It uses D3.js v4 and topojson to render land masses, graticule grids, and political borders on a canvas. The animation rotates the globe to a custom viewpoint and then simulates the plane’s travel along a great-circle arc, after which users can drag to spin the view, using `d3.geoOrthographic`, `d3.geoPath`, and a custom great-arc interpolator.

Loading thumbnail…

Poisson-Disc

This visualization demonstrates Poisson-disc sampling, a blue-noise distribution pattern that places icons evenly across a canvas while maintaining a minimum distance between them. Using Bridson’s algorithm, the d3.timer function adds 100 new samples per frame, each rendered as an SVG image element that animates from zero to its full size via the .transition() method. The code relies on d3.v4 for timer and transition APIs, with the poissonDiscSampler function handling spatial grid-based rejection sampling to ensure uniform coverage. The icons animate into place, illustrating the algorithm’s progressive point generation in real time.

Loading thumbnail…

Irma on leaflet

This interactive map animates the paths of hurricanes Irma and Jose across the Atlantic from September 2–11, 2017, overlaying forecast tracks on NASA MODIS Terra satellite imagery. It uses Leaflet for map rendering and panning, with TopoJSON for coastal and track geometry, plus jQuery to load the GeoJSON data. A date counter at the top updates daily as the animation progresses, though hurricane popups only appear for the first few days, and a scale bar displays metric distances. Data originates from the European Center for Medium-Range Weather Forecasts and the National Weather Service.

Loading thumbnail…

Center and Scale your map

This example demonstrates how to center and scale a map projection to fit a specific geographic feature, using a TopoJSON dataset of the A Coruña region. It shows the city boundary and coastline rendered as SVG paths, with a light blue background and gray land fill. The code computes the feature's bounds and centroid with `d3.geoBounds` and `d3.geoCentroid`, then uses `d3.geoDistance` to calculate an appropriate scale for the Mercator projection so the map is properly framed.

Loading thumbnail…

Constraint relaxation labels

A multi-line chart of stock prices uses D3 v4 to render SVG paths for each symbol. End-of-series labels overlap, so a simple constraint relaxation algorithm iteratively adjusts each label's vertical position until all are spaced at least 14 pixels apart, triggering an animation. Voronoi overlay paths enable mouseover interactions, while the final labels appear only after this relaxation converges, using data from stocks.tsv.

Loading thumbnail…

RBush+canvas+svg

A choropleth map of Spanish municipalities colors each region by population variation, using a canvas basemap for the filled polygons and an SVG overlay for a hover outline. The code builds an R-tree spatial index with `rbush` to quickly identify the municipality under the cursor, then renders a highlighted `d3.geoPath` in SVG. It uses `d3-geo` with the `geoConicConformalSpain` projection and `topojson-client` to load boundaries, with tooltip data from a companion JSON file.

Loading thumbnail…

Using node-canvas

A static choropleth map renders the prevalence of mental and substance use disorders across U.S. counties for 2014. Using `d3.geoPath` and `node-canvas`, the visualization draws county boundaries and fills them with a ten-step color scale based on `mental_substance.json` data. The code constructs a canvas context, applies a threshold scale from `d3-scale`, and renders state and national outlines from the `us-atlas` TopoJSON file. Data originates from FiveThirtyEight’s “35 Years Of American Death” project.

Loading thumbnail…

Gist f7dc00e0350f215e21d1d7b3f9ee6aca

This example presents an interactive geographic visualization of a world map, with animated flight paths connecting major cities. It shows a network of arcing routes overlaid on a dark, stylized globe. The visualization uses the D3.js library, specifically calling `d3.geoPath` to render the map’s landmasses and `d3.forceSimulation` to manage the physics of the flight arcs, making them appear as if they are in motion. The routes are likely generated from a small set of hardcoded city coordinate pairs. The rendering approach combines a simple geographic projection with dynamic path interpolation for the animated trajectory effects.

Loading thumbnail…

Canvas+SVG hover stroke effect

This choropleth map of Spanish municipalities uses a dual-rendering strategy: SVG paths provide hover interaction while a Canvas context draws the color-coded population density fills. The map layers transparent SVG municipality outlines over the Canvas raster, which uses a threshold color scale to visualize population rates. When a user hovers over an SVG path, its stroke becomes visible, creating a highlight effect. The example utilizes `d3.geoPath` and `d3.scaleThreshold` to generate both the vector outlines and the Canvas-rendered fills.

Loading thumbnail…

Path stroke with selection.raise()

A choropleth map of Zaragoza municipalities colors each district by population density using a threshold color scale, while a thin white stroke separates the polygons. On mouseover, the selected path receives a thicker black stroke and is brought to the front via `selection.raise()`, emphasizing its boundary against neighbors. The map is rendered with SVG and `d3.geoPath`, using TopoJSON for boundaries and CSV data for rates, projected with `d3.geoConicConformalSpain` from d3-composite-projections.

Loading thumbnail…

Path stroke with moveToFront

This choropleth map of Spanish municipalities encodes population density using a threshold color scale, with nine discrete steps from light to dark blue. The path stroke effect is created by applying a `moveToFront` method to the SVG elements on mouseover, which reorders the selected municipality to the top of the drawing stack, while a thicker black stroke highlights it. The code uses `d3.geoPath` with a `d3.geoConicConformalSpain` projection to render the map, and it aggregates data from a CSV file, mapping each municipality's rate to a color via `d3.scaleThreshold`. The map is rendered as SVG, with the region outline drawn separately and municipalities filled according to the data.

Loading thumbnail…

Color ramp maker

This tool generates color ramps by interpolating between two user-selected hex colors. A linear gradient bar is rendered as a series of divs, each showing the computed intermediate color and its hex code. Users adjust the start and end colors via jscolor pickers, set the number of entries, and click build; d3.scaleLinear performs the color interpolation. Clicking a swatch copies its hex code to the clipboard.

Loading thumbnail…

Assign data from csv to a canvas map

A choropleth map of the Portuguese island of La Palma colors municipalities by unemployment rate, with values assigned from a CSV file via their common ID codes. The visualization overlays land-use polygons and road networks from a TopoJSON file onto the unemployment data. Using D3.js, it renders directly to a Canvas with `d3.geoPath` and `.context(context)`, applying a threshold color scale to the unemployment percentages. The code combines `d3.queue` for deferred loading of the JSON and CSV, and `topojson.feature` to extract map geometries before drawing each layer.

Loading thumbnail…

Retina canvas map

A canvas map of São Miguel Island renders land use, municipal unemployment rates, and road networks from a QGIS-derived TopoJSON file. It uses d3.geoPath with a null projection to draw features onto a 2D canvas context, applying a threshold color scale to municipalities and custom stroke and fill styles for forests, residential areas, and road classes. The code also handles high-DPI displays by scaling the canvas context with the device pixel ratio.

Loading thumbnail…

Simple canvas map

A simple canvas map displays unemployment rates across the municipalities of a Spanish island using a threshold color scale. The visualization loads a TopoJSON file with `d3.json` and renders directly to a canvas element via `d3.geoPath`, iterating through each municipality to fill its polygon with color based on the unemployment value. White dashed lines stroke municipal boundaries, while a solid line outlines the island. The project is part of a QGIS and d3 workshop by LuisSevillano.

Loading thumbnail…

Geo2rect test using nmap

This example uses D3.js v4 and the geo2rect and nmap libraries to transform the districts of Madrid, Spain, from a GeoJSON polygon map into a rectangular treemap-like layout. The `geo2rect.compute` function converts each district's geographic boundaries into a rectangle, while the `nmap` algorithm arranges these rectangles in a grid. The visualization renders as SVG paths and an animated toggle control, highlighting the potential for spatial distortion when converting irregular administrative boundaries into a rectilinear grid.

Loading thumbnail…

Spanish municipalities choropleth test with Canvas and preprojected TopoJSON

A choropleth map of Spanish municipalities colors each region by population density using a threshold color scale. The visualization renders on a Canvas via `d3.geoPath`, reading preprojected TopoJSON geometry and joining it to CSV population data by municipality ID. A national border is stroked afterward for context. The map uses a forked `d3-geo-projection` pipeline to streamline drawing performance.

Loading thumbnail…

textPath along path

This example visualizes Arctic sea ice extent data from January to December 2016, plotting both the historical average and the 2016 measurements as smooth lines on a shared time axis. The visualization uses `d3.area` to render a shaded range between low and high historical values, with two distinct line series for average and 2016 extent. It employs the SVG `textPath` element to attach labels directly to the lines, positioning them along the curve at a fixed percentage offset. The interactive component adds a mouseover effect where a focus group with circles and annotations follows the cursor along the chart, using `d3.bisector` for date lookup and `d3.axisBottom` and `d3.axisLeft` for the time and value axes.

Loading thumbnail…

Line Chart

This line chart visualizes the evolution of Spain's population from 1900 to 2014, plotting live births and deaths over time. The visualization uses D3.js version 3.5.17, employing a time-scale for the x-axis, a linear scale for the y-axis, and SVG rendering. It features Voronoi diagrams for mouseover interaction, with a tooltip that remains always visible. The data is sourced from Wikipedia and loaded from a CSV file.

Loading thumbnail…

polylabel.js

A choropleth of US states renders state boundaries in gray and places each state's two-letter abbreviation at the point most distant from its borders. Using `polylabel.js`, the map calculates the pole of inaccessibility for each state's projected coordinates, ensuring labels sit inside irregular shapes like Washington's islands. Built with D3 v4, the visualization projects geographic data via `d3.geoPath` and `d3.geoAlbersUsa`, animated on SVG paths and text elements.

Loading thumbnail…

Comunidad Valenciana population(d3v4)

A choropleth map of the Comunidad Valenciana depicts population density per census tract, with a legend encoding values from pale yellow to dark red. The visualization uses `d3.geoPath` to render the regions and `d3.scaleThreshold` for the color bins, showing population per square mile. Census tract boundaries are outlined, and municipal borders are drawn via `topojson.mesh`. The data comes from the 2011 Spanish census and municipal shapefiles, processed into a TopoJSON file.

Loading thumbnail…

spanish provinces

A choropleth-style map of Spanish provinces rendered on a canvas, colored with a light yellow fill and gray borders, plus a dashed line marking the boundary between the Iberian Peninsula and the Canary Islands. The visualization uses a composite conic conformal projection handled by the custom `d3.geo.conicConformalSpain` function, with TopoJSON data presimplified via `topojson.presimplify`. It leverages `StaticCanvasMap` from the spam library to manage partial rendering and efficient spatial indexing through RBush. Boundaries are stroked with `CanvasRenderingContext2D`, and an interactive hover state is prepared for future mouse tracking.

Loading thumbnail…

mouseover constant stroke effect

This example shows a choropleth map of U.S. unemployment rates by county, where hovering over a county triggers a constant, dark stroke outline that highlights the selected area. The map uses D3.js and its `d3.json` and `d3.tsv` loaders to fetch TopoJSON geographic data and tab-separated rate values, which are then mapped to a color scale. On mouseover, jQuery clones the path element and applies a fixed `stroke` and `stroke-width` to create the highlight effect.

Loading thumbnail…

Comunidad Valenciana population

This choropleth map visualizes the population density of census tracts in the Comunidad Valenciana, Spain. The map uses a threshold color scale to encode population per square mile, with darker reds indicating higher densities. The visualization is built with D3.js, using the `d3.geo.path` projection and the TopoJSON library to render the geographic data. The source data comes from the 2011 Spanish census, processed from shapefiles using GDAL and TopoJSON command-line tools.

Loading thumbnail…

line between points w satellite projection

A satellite projection renders the Earth from an angled, tilted viewpoint, with graticule lines, country borders, and urban areas drawn from Natural Earth data via TopoJSON. A dashed red quadratic curve connects projected city markers for Paris and Rome, both plotted as points over the map. The visualization uses D3.js and the d3.geo.satellite projection from the d3-geo-projection plugin, with features painted onto a continuously rendered canvas.

Loading thumbnail…

fractal

An interactive fractal tree of circles responds to mouse position, with cursor X controlling recursion depth and Y controlling branch angle. The SVG is rendered using D3 v4’s data join, where each node is drawn as a circle whose radius shrinks by a fixed scale factor per level. The fractal recursively branches when the depth modulo 11 equals zero, flipping the angle sign to create alternating asymmetry. The code uses `svg.selectAll("circle").data()`, `.enter()`, and `.exit().remove()` to update the visualization live on every `mousemove` event.

Loading thumbnail…

suicides cases

A world map using the Robinson projection displays the locations and relative severity of terrorist suicide attacks from 1970 onward, with data points sized by the number of casualties. The visualization is rendered on an HTML5 canvas, using a collection of JavaScript libraries including D3.js, TopoJSON, RBush, and a custom projection library (spam.js) to handle map data from Natural Earth and attack statistics from the Global Terrorism Database. The code defines specific map elements—land, countries, and roads—as data layers, each with custom painting and interaction logic, and calculates the radius of each attack marker based on its fatality count using a square-root scale.

Loading thumbnail…

shaded relief with custom projection

This example visualizes the province of Almería, Spain, by overlaying municipal boundaries and a natural park on a shaded relief raster image. The map uses a custom projection matrix to align the raster with vector geometries. Built with D3 v3, it employs `d3.geo.path()` and the TopoJSON library to render GeoJSON features, while SVG elements display labels and styling for highlighted areas.

Loading thumbnail…

satellite projection

A satellite projection shows Earth as seen from an orbiting spacecraft, with the Iberian Peninsula centered on a curved horizon. The map layers Spanish coastline, provincial boundaries, and urban areas, rendered with a soft glow and a highlighted marker for Madrid. Built with D3.js and the `d3.geo.satellite` projection, the visualization uses canvas-based rendering for efficient drawing. Geographic data comes from Natural Earth, processed with TopoJSON, while a spatial index (RBush) accelerates feature lookup during rendering.

Loading thumbnail…

satellite projection w graticule

This interactive visualization projects a view of Earth from a satellite, centered on Europe and North Africa, with a graticule grid overlaid. It uses `d3.geo.satellite()` to define the projection and renders map data onto a canvas via the StaticCanvasMap. The map displays Natural Earth coastline, Spanish provinces, and urban areas as separate layers, painting features dynamically with the spam library. A marker and label for Madrid are also projected and drawn on the map.

Loading thumbnail…

A Coruña city historic map

A color-coded map of A Coruña highlights the city's historic districts, including the old town, colonial buildings, and urban expansion areas. The visualization layers multiple topojson feature sets onto a canvas, using distinct semi-transparent fills to distinguish each category. A d3-legend color scale provides the legend. The map is rendered with the spam.js library, which uses an r-tree index to optimize drawing, with d3.js and topojson.js handling data processing and projection.

Loading thumbnail…

Malaria cases

A world map displays malaria case locations as translucent red and yellow points over grey countries, visualized using the `spam.js` library with a static canvas. The map uses an azimuthal equal-area projection, with a graticule drawn via `d3.geo.graticule()`. Each case is projected from longitude and latitude coordinates and rendered as an SVG circle with semi-transparent strokes and fills. Data comes from the Malaria Atlas Project.

Loading thumbnail…

Bar Chart

A horizontal bar chart displays CO2 emissions in kilotonnes for 39 countries in 2009, ranking the United States highest at over 5.4 million kt. The visualization uses D3.js v3 with an ordinal y-scale, a linear x-scale, and transitions that animate the bars and value labels from zero to their final lengths. Countries are labeled on the left, with a separator line, and hover effects increase bar opacity.

Loading thumbnail…

Testing map labels

This example tests map label placement by rendering the regions of Italy over a Robinson projection. It uses D3's `d3.geo.path()` to draw the region polygons and `path.centroid()` to compute the x and y coordinates for each label. A text shadow is applied to each label to improve readability, with a background layer of white-stroked text behind the main labels. The map uses topojson data from the `italy.json` file and fills regions with a quantized color scale based on the `SHAPE_Leng` property.

Loading thumbnail…

Russian research stations in Antarctica

A static map of Antarctica displays the locations of Russian research stations. Station names are rendered as labels near point markers, with the continent's coastline drawn in gray. The visualization uses a stereographic projection and is built with the Spam.js library for canvas rendering. Station data is loaded from a TSV file via `d3.tsv`, with geographic boundaries provided by a TopoJSON file parsed using `topojson.feature`. The map is created through a `StaticCanvasMap` instance, which projects coordinates and paints features.

Loading thumbnail…

Line chart with step buttons

A line chart displays population trends for five countries from 1600 to 2030, with step buttons that cycle through each nation’s series. The visualization uses D3 v3 with SVG rendering and animation, building axes with `d3.svg.axis` and scales via `d3.time.scale` and `d3.scale.linear`. Users click Previous or Next to switch the highlighted line and its annotation, updating the chart dynamically. Data is loaded from a CSV file using `d3.csv`.

Loading thumbnail…

Line chart

A multi-line chart visualizes population changes for five countries—Germany, Italy, Japan, the United Kingdom, and the United States—from 1600 to 1916, with each line colored distinctly and labeled via tooltips. Built with D3.js, it uses `d3.time.scale` for the x-axis, `d3.scale.linear` for the y-axis, and SVG paths to render the trends. Data is loaded from a CSV file (`population.csv`) and formatted using `d3.format` and `d3.time.format`. The chart emphasizes comparative growth patterns over centuries.

Loading thumbnail…

Scatterplot chart

This scatterplot visualizes the Iris flower dataset, plotting sepal width against sepal length, with each point colored by species (setosa, versicolor, or virginica). The chart is built with D3.js, using `d3.scale.linear` for the axes and `d3.svg.axis` for rendering tick marks and labels. Data is loaded from a CSV file via `d3.csv`, and points animate upward from the bottom of the chart using chained transitions with staggered delays. Hovering reveals a tooltip with the species and measurements via appended SVG `title` elements.

Loading thumbnail…

Mouse event

An interactive SVG canvas responds to mouse movement and clicks by spawning animated circles and falling letterforms. Moving the cursor triggers a bouncing circle at its position, while clicking or a timer initiates a rain of random characters. The visualization uses D3.js transitions to animate opacity, size, and position, with colors generated procedurally via a golden-ratio hue rotation.

Loading thumbnail…

mouse-over event on line path

A step-before line chart plots randomized x/y data, and a semi-transparent circle tracks the mouse position along the path during hover, using D3’s SVG path `getPointAtLength` and `getTotalLength` to interpolate the nearest point. The chart includes randomized axes, draggable circles, and a click animation that spawns and removes expanding rings. Data is generated with `Math.random()` and rendered with D3 3.5.5, using SVG elements and CSS transitions for visual feedback.

Loading thumbnail…

Gist e16a54c8cf0a1e7081a8

A Sankey diagram visualizes the top asylum-seeking migration flows between European countries in 2015, with left-side nodes colored by origin continent and right-side nodes in blue for destinations. The R script loads Eurostat data via the SmarterPoland package, filters for total sex and age groups, aggregates counts by country pairs, and uses the riverplot package with RColorBrewer to define node styles and palette. Country codes are converted to continents using the countrycode package, and quantities are ordered by magnitude to clarify flow widths.