AaronBhasker

@AaronBhasker·6 public vizzes

geojson.io | powered by Mapbox

This interactive web application enables users to create, view, and share spatial data as GeoJSON. The interface combines a Mapbox GL-powered map with a text editor, allowing real-time synchronization between geographic features and their JSON representation. The code uses Mapbox GL JS for map rendering and tile loading, along with React for building the UI components. The application supports drawing, editing, and parsing GeoJSON geometry, with changes reflected instantly across both the map and the editor panel.

Mar 14, 2023

Loading thumbnail…

Untitled

This example demonstrates the fundamental D3 data join pattern using SVG text elements. The code initially renders a single text element containing the letter "g" before binding an array of three letters—a, b, c—to all existing text nodes. The D3 join method handles three states: entering new text elements positioned horizontally at increments of 10 pixels, updating existing elements with blue fill, and removing exiting nodes. Using d3.select and selectAll, the React-based example relies entirely on D3 v7’s declarative join API to manage SVG rendering based on array data.

Mar 14, 2023

Loading thumbnail…

Fork of Covid-19 confirmed cases (Date 25/09/20)

This visualization presents COVID-19 confirmed cases by date using a bar chart rendered with SVG, alongside a world map colored by total cases using a spectral color scale. The bar chart uses d3.scaleLinear and d3.scaleBand to map cases and dates, with axis labels styled with IBM Plex fonts and interactive tooltips via d3.tip. The map employs d3.geoPath with a geoNaturalEarth1 projection, and d3.scaleOrdinal with schemeSpectral to encode country-level data. Both views load from external CSV and TopoJSON sources, with the map supporting zoom interaction.

Mar 13, 2023

Loading thumbnail…

DV Project

This interactive map of the world uses a natural Earth projection to display country boundaries, with countries colored light green and the ocean blue. Hovering over a country changes its fill to red, and users can zoom by scrolling. The visualization is built with D3 v5, using `geoNaturalEarth1` and `geoPath` for map generation and `zoom` for interaction. Country names are joined from a TSV file by ISO code, with geographic data from the `world-atlas` package.

Mar 9, 2023

Loading thumbnail…

Untitled

This example presents a choropleth map of global population by country, rendered as an SVG using D3.js v4. It employs a Mercator projection via `d3.geoMercator` and draws country boundaries with `d3.geoPath`. The fill color for each nation is determined by a threshold color scale that bins population values into a blue scheme from `d3.schemeBlues`. Data is loaded asynchronously with `d3.json` for the world GeoJSON topology and `d3.csv` for population figures.

Mar 9, 2023

Loading thumbnail…

Features

This example presents a “Features” page for a warranty management dashboard called “Count Stock.” It showcases a static layout with a navigation header, a prominent title, and text describing system capabilities like dead stock management and warranty tracking. The page is built as a React application rendering SVG icons, and it uses the Tailwind CSS framework for styling and layout, along with custom CSS. The content is purely informational, highlighting the product’s benefits without interactive data visualization.

Feb 22, 2023