Y

Yerlan Yeszhanov

@yeszhanov·15 public vizzes

Loading thumbnail…

Untitled

This interactive map of Canada displays province names in a tooltip as the mouse moves over each region. Hovering a province turns it red via a CSS `:hover` rule, while the tooltip div follows the cursor and is hidden on mouse-out. The visualization uses d3.v7’s `d3.json` to load GeoJSON data and `d3.geoAlbers` projection with `d3.geoPath` to render the SVG paths. Tooltip positioning and visibility are managed through CSS classes and inline styles.

Loading thumbnail…

Fork of GeoVisualization - Choropleth map of the world

This choropleth map of the world visualizes population by country using a threshold color scale, with dark blue representing higher populations. The map renders in SVG and responds to mouse-over and mouse-leave events by adjusting the opacity of all countries and highlighting the hovered one with a black stroke. The code loads GeoJSON boundaries and CSV population data via `Promise.all`, projects the paths using `d3.geoPath` with a Mercator projection, and colors each country through `d3.scaleThreshold` and `d3.schemeBlues`. Interactions are handled with D3 transitions for smooth visual feedback.

Loading thumbnail…

Fork of D3 Map Nederland

This interactive map of Kazakhstan, rendered with SVG, highlights individual municipalities and allows users to zoom and pan across the region. Clicking a district fills it red and animates the view to focus on it, while clicking the background resets the view and restores the default fill. The visualization uses d3.geoPath with a Mercator projection and d3.zoom to handle transformations, loading TopoJSON data from geoBoundaries. Hover effects change district colors to orange, and transitions animate both the zoom level and the selected area’s styling.

Loading thumbnail…

Fork of Mexico map

This map displays Mexico with a Mercator projection, showing state boundaries and graticules. Built with React and D3 v6, the visualization uses `geoMercator`, `geoPath`, and `geoGraticule` to render geographic features as SVG paths, with state land in red and graticules in aqua. The data comes from a TopoJSON file fetched via `d3.json` and converted to GeoJSON using `topojson.feature`, sourced from the geoBoundaries release for Mexico.

Loading thumbnail…

Fork of England Regional Map

This fork of the England Regional Map visualizes Kazakhstan's administrative regions using a D3.js geo projection and SVG rendering. The map, styled with teal region fills and grey interior boundaries, is built with React and renders via the `geoNaturalEarth1` projection and `geoPath` API. Region polygons are drawn from TopoJSON data provided by the geoBoundaries repository, while interior mesh lines highlight administrative divisions.

Loading thumbnail…

Fork of USA Country Map

This choropleth displays the 50 U.S. states, each filled in green with white interior borders, and highlights states in orange on hover. It uses a geospatial projection via `geoAlbersUsaTerritories()` and renders the map with `d3.geoPath` on an SVG canvas. State boundaries come from the US Atlas TopoJSON dataset, which is loaded with `d3.json` and processed through TopoJSON’s `feature` and `mesh` functions. The React app manages data loading with `useState` and `useEffect` hooks.

Loading thumbnail…

Fork of ICE 8 country map

This example displays a choropleth-style map of India, colored with the d3.scaleOrdinal and schemeCategory10 palette, with hover states that turn regions orange. The visualization uses d3.geoMercator projection, d3.geoPath for rendering, and topojson.feature to parse GeoJSON from a geoBoundaries TopoJSON file hosted on GitHub. The React-based code loads data via d3.json, appends SVG paths, and includes zoom functionality through d3.zoom, with the map heading and styling defined in HTML and CSS.

Loading thumbnail…

Fork of Fork of India Map

This visualization displays a choropleth map of India’s administrative regions, with each state filled by a categorical color from d3.scaleOrdinal and labeled with its name. It uses d3.geoMercator projection and d3.geoPath to render the TopoJSON data loaded via d3.json, with the first feature removed. Text labels are positioned at each path’s centroid using pathGenerator.centroid. The map is drawn as SVG paths with styling from CSS, and labels use text-anchor middle for readability.

Loading thumbnail…

Fork of Fork of India Map: ICE-8

This example displays a choropleth map of India’s administrative regions, colored with a categorical palette and labeled with state names. The visualization uses D3 v5’s `geoMercator` projection and `geoPath` to render TopoJSON boundaries, while `scaleOrdinal` and `schemeCategory10` assign fills. The code loads geographic data from a remote TopoJSON source and manipulates the feature collection by removing the first entry before drawing.

Loading thumbnail…

Untitled

This example displays a map of Kazakhstan using D3 v7, with provinces rendered as SVG paths via a TopoJSON data source. On mouse movement over a province, the code updates a tooltip div’s position and content, displaying the province name, while changing the province’s fill color through a CSS hover rule. The tooltip is shown by removing a hidden class and repositioned based on the event coordinates, then hidden again on mouse out. The map projection is created with d3.geoAlbers and rendered through d3.geoPath.

Loading thumbnail…

Fork of Australia Map

This visualization displays the regions of Kazakhstan, colored by electoral division using a Mercator projection. Built with D3.js and the TopoJSON library, it loads GeoBoundaries data and renders each region as an SVG path. The code uses `d3.geoPath` for path generation, `d3.scaleOrdinal` with `schemeCategory10` for coloring, and appends tooltips showing region names.

Loading thumbnail…

Fork of England Regional Map

This fork of the England Regional Map visualizes Kazakhstan's administrative regions using a D3.js geo projection and SVG rendering. The map, styled with teal region fills and grey interior boundaries, is built with React and renders via the `geoNaturalEarth1` projection and `geoPath` API. Region polygons are drawn from TopoJSON data provided by the geoBoundaries repository, while interior mesh lines highlight administrative divisions.

Loading thumbnail…

Fork of England Regional Map

A Choropleth-style map of England displays its administrative regions as solid teal polygons with thin gray borders separating neighboring areas. The visualization loads GeoJSON data from a remote URL and uses `d3.geoNaturalEarth1` for projection and `d3.geoPath` to render shapes as SVG paths within a React component. Region boundaries are derived via `topojson.mesh` to highlight only interior borders, while `d3.json` fetches the dataset in the `useData` hook.

Loading thumbnail…

Fork of ICE8 - Country Map

This example renders a choropleth map of Australia using a GeoJSON file. The code employs D3 v5's `geoMercator` projection and `geoPath` to convert geographic coordinates into SVG paths, with `scaleOrdinal` and `schemeCategory10` assigning categorical colors to electoral divisions. State names are placed at path centroids. The map is drawn in SVG within a React-free HTML page, loading data via `json()` and styling borders through CSS.

Loading thumbnail…

Untitled

This example displays a choropleth map of Kazakhstan’s administrative regions using D3 v7. On mouse movement over a province, a tooltip div appears, showing the region’s name from the GeoJSON properties, while the cursor position determines the tooltip’s placement. The tooltip is hidden on mouseout. The map uses `d3.geoAlbers` projection and `d3.geoPath` to render SVG paths from the loaded GeoJSON data.