A

ala-wahibi

@ala-wahibi·29 public vizzes

Loading thumbnail…

Airports!

The visualization shows the number of flight routes per airline as a horizontal bar chart, ranked by route count. Hovering over a bar highlights that airline and displays its flight routes on a world map using `d3.geoNaturalEarth1` projection with `d3.geoPath` for geographic rendering. The map draws airport connections as lines based on route data from the CSV file, while the bar chart uses `d3.scaleBand` and `d3.scaleLinear` for axes. The map background is rendered from GeoJSON country boundaries.

Loading thumbnail…

Articles Timeline

This example displays a timeline of articles about Donald Trump, plotting each article as a point based on its modification date and allowing the user to aggregate the data by time intervals from seconds to years. It uses the d3-milestones library to render the timeline, with a dropdown menu in the HTML form controlling the aggregation granularity. The bundled JavaScript (bundle.js) supplies the article data, which includes titles, URLs, timestamps, and text snippets, and the visualization updates to reflect the selected time grouping.

Loading thumbnail…

Word Cloud

This word cloud visualizes the frequency of words in two classic texts, "The Three Wishes" and "Alice's Adventures in Wonderland," after removing stopwords. The size of each word corresponds to its occurrence count, with colors assigned from a categorical scale. Built with D3.js, it uses the `d3.layout.cloud` API to arrange words and renders them as SVG `<text>` elements. An animation reveals the words over time as the layout algorithm places them.

Loading thumbnail…

Network

A network diagram renders character relationships from *Les Misérables*, with nodes colored by group type and link thickness encoding connection weight. D3’s force simulation (`d3.forceSimulation`, `forceLink`, `forceManyBody`, `forceCenter`) positions nodes and updates SVG circles and lines on each tick. A color legend, built through a custom `colorLegend` module, maps categorical domains to a color scale. Data comes from a local JSON file.

Loading thumbnail…

Network

A force-directed network graph displays nodes and directed links, colored by categorical group and relationship type. Redundant labels and relationships are deduplicated from the input. Users can click a node to view its ID or double-click to filter the graph to that node's subgraph. The visualization uses d3.forceSimulation, d3.forceLink, d3.forceManyBody, d3.forceCenter, and d3.drag, rendering data from data.json with SVG.

Loading thumbnail…

Airports - Network

This example visualizes the flight route network for each airline from a CSV dataset, using a force-directed layout. Nodes represent individual airports, while lines depict the connections between them, colored in the airline’s signature maroon. The visualization is built with D3.js v5 and renders as an SVG. It employs `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to position the nodes. The code also integrates `d3.ForceEdgeBundling` to bundle edges, reducing visual clutter in the dense network.

Loading thumbnail…

Network

A force-directed network graph displays characters and groups from *Les Misérables*, with nodes colored by category and directed links styled by relationship type, such as email or mention. The visualization relies on `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to position elements, rendered as SVG circles and lines. A custom `colorLegend` function generates two legends, using circles for node categories and rectangles for link types, while drag interactions let users reposition nodes. Data loads from a JSON file, and edge colors and arrow markers highlight connection semantics.

Loading thumbnail…

Network

This network visualization maps character co-occurrences in Victor Hugo's *Les Misérables*, using color-coded nodes to represent categorical groups such as Document, Location, and Person. The force-directed layout, driven by `d3.forceSimulation` with link, charge, and centering forces, positions characters and their relationships. A color legend, built with a custom `colorLegend` function and `d3.scaleOrdinal`, clarifies the group assignments. The SVG rendering uses a loaded JSON dataset, and link thickness encodes relationship strength.

Loading thumbnail…

COVID-19 | April,2020

This map shows the global spread of COVID-19 as of April 2020, displaying confirmed cases, deaths, and recoveries by country. The visualization uses the ArcGIS JavaScript API 4.15 with FeatureLayers to render the geographic data, overlaying separate layers for deaths and confirmed cases. A popup template reveals country-specific counts when a feature is clicked, while the interface includes expandable widgets for legend, bookmarks, and basemap selection. The underlying dataset originates from Kaggle, covering daily records up to April 26, 2020.

Loading thumbnail…

Reference Arcade expressions

This map displays employment data for US counties, using Arcade expressions to derive and visualize two key metrics. It shows whether more people aged 16+ participate in the labor force, and also indicates the strength of that majority as a percentage. The map utilizes the ArcGIS JS API 4.15, employing a `FeatureLayer`, `UniqueValueRenderer`, and `PopupTemplate` for display. A custom opacity visual variable conveys the strength of the majority, while point size encodes the unemployment rate.

Loading thumbnail…

Swipe

This example uses the ArcGIS API for JavaScript 4.15 and D3 v5 to create a map view of the Kilauea volcano eruption site. The Swipe widget compares two TileLayers—shortwave infrared and near-infrared satellite imagery from the WV03 satellite—by dividing the view at a draggable position. Layer visibility is controlled through the widget, while a LayerList provides additional map layer management. The map displays a satellite basemap centered on the volcano with constrained zoom levels.

Loading thumbnail…

ACS

This example visualizes U.S. county-level population estimates by race and Hispanic origin using a dot density renderer. Each dot represents 100 people, with colors distinguishing eight racial and ethnic categories, overlaid on an interactive ArcGIS map. The visualization uses ArcGIS API 4.15 for mapping, FeatureLayer, DotDensityRenderer, and widgets like Legend and BasemapGallery, while D3 v5 is loaded for supplementary functionality. Data comes from the ACS (American Community Survey) feature service, with popups showing detailed counts per county and zoom constraints limiting display.

Loading thumbnail…

Outbreaker | Analysing

This interactive map identifies potential quarantine zones by combining two spatial criteria: proximity to the ZIP code with the most patients and areas with high child populations. Users adjust buffer distance and population thresholds, triggering a workflow that queries ArcGIS FeatureLayers, buffers geometries with `geometryEngine.buffer`, unions filtered ZIP code polygons, and intersects results using `geometryEngine.intersect`. The map renders patient data via a ClassBreaksRenderer and displays the final intersection polygon as a semi-transparent overlay.

Loading thumbnail…

ArcGIS: BaseMap

This example uses ArcGIS API for JavaScript and D3 v5 to create an interactive base map viewer. It shows how a user can switch between multiple ArcGIS basemaps (such as hybrid, streets, and terrain) and toggle between 2D MapView and 3D SceneView perspectives using two D3 dropdown menus. The 2D view centers on coordinates [34.8021, 38.9968] with a zoom level of 4, while the 3D view includes world-elevation ground and a perspective camera. The interface renders the map in a full-page div using ArcGIS’s `Map` and `MapView`/`SceneView` classes.

Loading thumbnail…

Outbreaker

Outbreaker visualizes patient disease data on an ArcGIS map of Denver, Colorado, using FeatureLayer and MapImageLayer. The map displays patient cases through class-break and unique-value renderers, with diamond and square markers indicating age ranges and sex categories. A demographic boundary layer from USA_Demographics_and_Boundaries_2018 provides geographic context, while Legend widgets clarify symbol meanings. The visualization uses ArcGIS API for JavaScript 4.15 and D3.js v5, with interactive map panning and zooming enabled through MapView.

Loading thumbnail…

Aurora Groceries

This visualization displays grocery store locations in Aurora using an interactive map built with Esri’s ArcGIS API for JavaScript. The map shows a FeatureLayer from an ArcGIS service, with the initial extent automatically set to the layer’s full extent. A dropdown menu, implemented with D3 v5, allows users to select from various basemaps, though the code currently uses a fixed “streets” basemap. The map is rendered in 2D using the MapView component.

Loading thumbnail…

Hikers

This example displays a topographic map of hiking trails, trailheads, and open spaces near Los Angeles using ArcGIS API 4.15 with a MapView. It visualizes trails as purple lines scaled by elevation gain via visual variables, and overlays bike-friendly trails with a dashed renderer. Trailheads use picture-marker symbols with labels, while parks appear as semi-transparent colored polygons categorized by type. Data comes from ArcGIS FeatureServer layers, rendered client-side with FeatureLayer classes and custom renderers.

Loading thumbnail…

ArcGIS: JavaScript starter app

This example demonstrates interactive 2D and 3D map visualization using ArcGIS JavaScript APIs alongside D3.js for a dropdown menu interface. The application loads a NatGeo World Map tile layer over various Esri basemaps, with a 2D MapView centered on coordinates [34.8021, 38.9968] at zoom level 5. The code includes commented-out 3D SceneView functionality with elevation settings and camera positioning. The dropdown menu, built with D3’s `select`, `append`, `merge`, and `attr` methods, lets users switch between different basemap options.

Loading thumbnail…

FDEB - Network

This network visualization displays flight routes for a selected airline using a force-directed edge bundling technique to reveal patterns in the data. The SVG rendering shows circles representing airports positioned by a physics simulation, with curved paths connecting origins and destinations. The example uses d3.forceSimulation for the layout, d3.ForceEdgeBundling to group similar routes, and d3.drag for interactive node manipulation. Data is loaded from a CSV file containing airline flight information, grouped by airline ID to create separate node-link diagrams for each carrier.

Loading thumbnail…

Population over Time by Region

The visualization comprises a line chart and a pie chart showing population trends over time by region, sourced from UN population estimates. The line chart displays population changes from 1950 to 2100, with each region colored distinctively, and includes a vertical line marking a selected year. The pie chart shows the population distribution for that selected year. Hovering over the line chart updates the selection, which synchronizes both charts. The implementation uses D3 v5 with `scaleTime`, `scaleLinear`, `scaleOrdinal`, `axisBottom`, `axisLeft`, `line`, `curveBasis`, `nest`, and custom `colorLegend` and `PieChart` modules, rendering as SVG.

Loading thumbnail…

A Week of Temperature

A Week of Temperature displays temperature readings from multiple cities over a single week using multi-line time series. Colored lines, generated by the `line` generator with `curveBasis` smoothing, show temperature trends, while an ordinal color scale with a custom legend distinguishes cities. The chart employs `scaleTime` and `scaleLinear` for axes, with data loaded via `csv` from a Curran dataset. Gridlines and rotated axis labels clarify temporal and temperature values.

Loading thumbnail…

World Countries

This choropleth map of world countries displays two categorical variables—economy and income group—selected via dropdown menus. Users can hover over the color legend to highlight countries matching a specific category, dimming others. Built with d3.v5, the map uses d3.geoNaturalEarth1 projection and d3.geoPath for rendering SVG paths, with d3.zoom for panning and zooming. Color scales from d3.schemePastel2 among others are selectable. Data is loaded from the World Atlas TopoJSON and TSV files.

Loading thumbnail…

Cars Statistics

The visualization displays automotive statistics from a CSV dataset, showing relationships between variables like horsepower, MPG, weight, and acceleration. Four small multiples scatterplots compare horsepower against different attributes, while a large interactive scatterplot lets users select any two columns via dropdown menus. The main chart animates points using D3 transitions with staggered delays. Built with D3 v5, it uses `scaleLinear`, `axisBottom`, `axisLeft`, and `extent` for scales and axes, rendering SVG circles with opacity styling.

Loading thumbnail…

Religions of Largest 20 Countries

This interactive visualization displays the religious composition of the world’s 20 most populous countries. A bar chart ranks countries by total population; hovering over a bar triggers an animated pie chart showing that country’s religious breakdown, with a color legend. The visualization uses D3 v5 with SVG and transitions via `transition.attrTween` for the pie arcs. Data comes from the Pew Research Center’s Global Religious Landscape, processed from a CSV file. The bar chart uses `d3.scaleLinear` and `d3.scaleBand`, while the pie chart employs `d3.pie` and `d3.arc`.

Loading thumbnail…

World Countries

This interactive tree diagram visualizes the hierarchical structure of world countries, organized by continent and subregion. The visualization reads a nested JSON data source and maps it using a horizontal tree layout, with the `d3.tree()` function configuring the node positions. The `d3.linkHorizontal()` generator creates the connecting paths, while color categories from `d3.schemeCategory10` distinguish continents. The SVG rendering supports zooming via `d3.zoom()`, and the Playfair Display font provides stylistic text labels for each country, region, and continent.

Loading thumbnail…

Bowl of Fruit

D3.js renders an animated bowl of fruit where apples and lemons appear, transform, and disappear in a circular arrangement. The visualization demonstrates the general update pattern: entering elements fade and scale in, updating elements shift positions, and exiting elements shrink and fade out. Clicking a fruit highlights it with a black stroke. The code uses `scaleOrdinal` for color, radius, and font sizing, `transition().duration()` for animation, and data joins on `g` elements. Fruits are generated randomly and mutated through timed `setTimeout` events.

Loading thumbnail…

Charts for Fun

This visualization presents the top 10 most populous countries using both a bar chart and a scatter plot, with population data from the United Nations World Population Prospects 2017 estimate. The bar chart displays population values as horizontal bars, while the scatter plot represents each country as a circle positioned along the same axes. Both charts use D3 v5’s `scaleLinear`, `scaleBand`, and `scalePoint` for scaling, with customized axes via `axisLeft` and `axisBottom`. The data is loaded from a CSV file, and population values are multiplied by 1000 during processing to reflect the original units.

Loading thumbnail…

Worldwide Population

This visualization presents global population growth from 1950 to 2015 using two complementary SVG charts: a line chart and an area chart, both rendered with D3 v5. The data from a CSV file is mapped with `scaleTime` for the temporal x-axis and `scaleLinear` for the population y-axis, with tick values formatted to show billions. Both charts share axes and margins, but the line chart uses a single red, semi-transparent path via `d3.line` and `curveBasis`, while the area chart fills the space beneath its curve using `d3.area`.

Loading thumbnail…

Temperature in Canada Over Years

The chart visualizes monthly average temperatures in Canada from 1768 to 1798, split into four small multiples by year ranges (1890, 1920, 1990, 2003). Each line plot shows seasonal temperature fluctuations, with data points as circles and varying line colors based on the minimum temperature range. The visualization uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisLeft`, `axisBottom`, `line`, and `csv` to load and render the data from a CSV file as SVG.