AleOG

@AleOG·13 public vizzes

Fork of 2015 Internet Users World Map

This map visualizes internet usage per 100 people across countries in 2015, using a green color scale to represent percentage ranges and a legend for reference. It updates the original static visualization by adding interactive hover tooltips that display country names and usage percentages, plus zoom functionality that scales the map. The implementation uses D3.js with `geoNaturalEarth1` projection and `geoPath` for rendering, topojson-client for world atlas data, and d3.zoom with transition animations. The dataset comes from the Kaggle Internet Users Dataset.

May 23, 2023

Loading thumbnail…

mapa Aragón usuarios de SAS

This example visualizes the percentage of SAS (Servicio Aragonés de Salud) users in Aragón by health sector for 2022. An interactive choropleth map uses color thresholds to represent population percentages across eight sectors, with a legend explaining the color scale. The visualization is built with D3.js (v5) and uses `d3.geoMercator` projection, `d3.geoPath`, and `d3.scaleThreshold` for color mapping. Data is loaded from a CSV via `d3.csv` and aggregated by sector. The map supports zooming via a custom D3 zoom component.

May 11, 2023

Loading thumbnail…

mapa España

This interactive choropleth map of Spain displays the percentage of the population served by health sectors in Aragon for 2022, with colored regions representing value ranges and a legend for interpretation. The visualization uses D3 v5 with topojson to load geographic boundaries, applies a Mercator projection through `d3.geoMercator` and `d3.geoPath`, and renders the map as an SVG. Data is parsed from a CSV file hosted on GitHub, containing population counts per sector, which are converted into percentage values. The map includes animations and dynamic color scaling via `d3.scaleThreshold`, with interactivity for selecting regions.

May 11, 2023

Loading thumbnail…

Fork of Gustoća stanovništva Republike Hrvatske

This choropleth map of Croatia displays population density by county, using a red sequential color scale with a corresponding legend. Each county shape is colored based on its density class, and hovering over a region reveals a tooltip with the county name, population, and density. Built with D3 v6, the visualization loads geographic data from a TopoJSON file, projects it using `d3.geoMercator`, and renders paths via `d3.geoPath`.

May 11, 2023

Loading thumbnail…

D3 Plot population Aragon

This visualization displays population trends across Aragon's counties over time, using a multi-line chart where each line represents a different county. The data, loaded from a CSV file, is filtered to show the central region. The implementation uses D3 v7 with a custom `linePlot` module, employing scales like `scaleTime` and `scaleLinear`, along with `d3.line` and `d3.axisBottom`/`d3.axisLeft`. An interactive tooltip appears on mouseover, though its data-point lookup logic is incomplete.

May 8, 2023

Loading thumbnail…

Line chart from CSV using d3.js

This example visualizes the USD to RUB exchange rate over three selectable years (2018, 2019, 2020) as an animated line chart with a filled area. It uses d3.js v6 within a React-compatible structure, rendering to SVG. Data is loaded from CSV files using `d3.csv`, with the x-axis mapped via `d3.scaleTime` and the y-axis via `d3.scaleLinear`. The line and area paths are built with `d3.line` and `d3.area` using cardinal curves, while transitions (using `transition()`) animate the axis rescaling and stroke-dasharray drawing effect. A mouse hover reveals a crosshair and highlights the nearest data point via `d3.bisector`. The source is the Moscow Exchange, linked via an embedded anchor.

May 8, 2023

Loading thumbnail…

mapa aragon

A choropleth map of Aragón colors each province by its share of the region’s 2021 population, using a green sequential scale derived from `d3.schemeGreens`. Hovering a province reveals its exact percentage in a tooltip. The visualization loads GeoJSON boundaries and a CSV dataset via `fetch` and `d3.csv`, then renders paths with `d3.geoPath` and a `geoMercator` projection. Interactive pan and zoom are enabled through `d3.zoom`, while a legend built with `scaleOrdinal` summarizes the color ranges.

May 2, 2023

Loading thumbnail…

Fork of Animated Reusable D3 Scatter Plot prueba

This example cycles through the numerical columns of the Iris dataset, using each as the x-axis variable while the y-axis remains fixed on the last column. Animated transitions, driven by `setInterval` and D3’s `transition`, move the scatter plot circles and update the x-axis title every three seconds. The visualization is built with D3 v6, using reusable chart functions, `scaleLinear`, `axisBottom`, and `axisLeft` to render the SVG. The data is loaded asynchronously via `d3.csv` from a GitHub Gist.

Apr 28, 2023

Loading thumbnail…

Grid Menus Animated Species Stratified Scatter Plot

This interactive scatter plot visualizes the Iris dataset, showing measurements of sepal and petal dimensions for three flower species. Users can dynamically switch the x-axis and y-axis variables via dropdown menus, and filter the displayed species, with circles smoothly animating between positions as axes change. When filtering, points for excluded species animate their radius to zero and are removed, while included species fade in with color coding (orange, blue, red). Built with D3 v6, it uses `selection.join` for enter-update-exit transitions and `d3.transition` for animated updates, with scales created via `d3.scaleLinear`.

Apr 27, 2023

Loading thumbnail…

D3 Selector

A set of fifteen circles moves in a vertical sine wave, with each circle's radius also oscillating in sync. The circles are connected by a black line, forming a continuously undulating path. The animation updates every 100 milliseconds by generating new data with `d3.range` and trigonometric functions in `makeData.js`. The rendering uses D3's `select` and `join` operations within `vizData.js` to handle enter and update selections, appending SVG `circle` and `path` elements to the page.

Apr 25, 2023

Loading thumbnail…

Fork of D3 beginning

This example displays an abstract geometric pattern of thin horizontal and vertical lines across the full browser viewport. The lines are selectively revealed or hidden through two SVG masks, each populated with D3 symbols (such as circles and crosses) arranged in a row. Using D3’s selection join, the code creates 100 rectangles per axis and applies the masks via `svg.call`. The rendering is done entirely with SVG elements in React, leveraging d3’s `symbol` and `range` APIs.

Apr 25, 2023

Loading thumbnail…

D3 beginning

This example shows a grid of thin horizontal and vertical rectangles that intersect to form a visible weave pattern, with a circular region in the center where the crossing lines appear to invert in contrast. The visualization uses D3 v6’s `select` and `range` functions to generate 100 rectangles in each direction, appended as SVG elements across the full window width and height. Two SVG masks, each containing a rectangle and a circle, selectively control which parts of the horizontal and vertical lines remain visible, creating the central circular effect against a dark background.

Apr 25, 2023

Loading thumbnail…

SVG Fundamentals

This example demonstrates how to build an interactive SVG scene using the Document Object Model (DOM) and the SVG namespace. It creates a full-window SVG element populated with a mask and a vertical rectangle, using methods like `createElementNS` and `setAttribute`. The code prepares a loop for generating 100 elements but currently leaves it empty, showing foundational SVG construction in raw JavaScript without external libraries. The visualization illustrates basic SVG structure, viewport sizing, and programmatic element creation for future graphics.

Apr 24, 2023