moslem-tg

@moslem-tg·12 public vizzes

Fork of Polished World Map

This example displays a world map of country boundaries using a Natural Earth projection, with graticules and interior borders rendered in a polished teal-and-grey color scheme. It uses React to manage the component structure and d3-geo’s `geoNaturalEarth1`, `geoPath`, and `geoGraticule` APIs to generate SVG paths. Geographic data comes from the World Atlas TopoJSON file, which is parsed with `feature` and `mesh` from topojson, while the final visualization is drawn entirely as SVG elements.

Apr 12, 2023

Loading thumbnail…

Fork of Location of Almaty Plane Crash

This map marks the location of the Almaty International Airport plane crash with red circles projected over a natural Earth globe. Using a React and D3 v5 setup, the visualization shows the crash site near Almaty, Kazakhstan, with the world’s landmasses and graticules rendered via `geoNaturalEarth1` and `geoPath`. The data comes from a static array of city coordinates loaded with `useCities`, while the world atlas topology is fetched and converted using `topojson`.

Apr 12, 2023

Loading thumbnail…

Fork of NACRO Membership by Institution

This visualization maps NACRO member institutions across the United States using an Albers equal-area projection. Circle size encodes the number of members at each institution, while hovering reveals the institution name. The map is built with Vega-Lite and D3, combining a TopoJSON state layer with point data from the College Scorecard Dataset. The code uses `vl.projection('albersUsa')`, `vl.markCircle`, and `vl.markGeoshape` to render the geographic overlay and member locations.

Apr 12, 2023

Loading thumbnail…

Fork of SF Arrests

This visualization maps the last week of arrests in San Francisco by neighborhood, showing each incident as a semi-transparent circle over a conic equal-area projection of the city. It uses D3 v5 with `d3.geoConicEqualArea`, `d3.geoPath`, and `d3.json` to load and render GeoJSON basemaps and streets alongside live SODA API query results filtered by date and resolution. Hovering highlights neighborhood outlines and displays tooltips. Data comes from the Police Department Incident Reports dataset.

Apr 12, 2023

Loading thumbnail…

Fork of Vega-Lite API Template

The visualization plots survey responses about technology’s impact on daily life, comparing opinions on riding in a driverless car against whether technology change generally improves or worsens life. Each circle’s size encodes the count of matching responses. It loads CSV data from a GitHub gist, applies custom axis and label styling, and renders using Vega-Lite’s API with d3.csv for data fetching. The vega-lite-api library builds the mark, and vega-tooltip provides hover interactions.

Apr 12, 2023

Loading thumbnail…

Fork of Locations of Datavis 2020 Students By Date

This map shows the geographic distribution of Datavis 2020 students, with each dot colored by the week they joined the course. The visualization uses a natural Earth projection via `geoNaturalEarth1` and `geoPath` to render world landmasses, graticules, and interiors from TopoJSON data. Student locations are plotted as circles with radii of 5 pixels, using a sequential Viridis color scale to encode join dates. The React components `Marks` and `ColorLegend` manage the SVG rendering, while data comes from a manually geocoded CSV parsed with `csvParse` and `timeParse`.

Apr 12, 2023

Loading thumbnail…

Fork of Top 150 US School Data

This visualization maps the top 150 US schools by their geographical location, using a scatter plot overlaid on a US map. The color of each point encodes the school’s net price, while the point size represents its acceptance rate. Tooltips reveal the institution’s name. Built with the Vega-Lite API and D3, it layers a `markGeoshape` US map (loaded from a TopoJSON file of states) with a `markPoint` layer positioned by latitude and longitude.

Apr 12, 2023

Loading thumbnail…

Fork of Monoliths on a Globe

This globe visualization plots the locations of three recently discovered monoliths in Utah, Romania, and California as steel-blue circles on an orthographic projection of Earth. The map uses `d3.geoOrthographic` with `d3.geoPath` to render country boundaries from TopoJSON world-atlas data, swapping between 110m and 50m resolution during and after drag interactions. Circles are positioned via the projection and display a tooltip with the monolith’s name using `d3-tip`. Users can drag to rotate the globe and zoom via `d3.zoom`, which scales the projection.

Apr 12, 2023

Loading thumbnail…

Fork of Globe Zoom - Animate

This example animates a globe that transitions between an orthographic and a Mercator projection, overlaid with a geo-scatterplot of nuclear explosion data. The visualization uses D3 v3’s `d3.geo.orthographic()` and `d3.geo.mercator()` projections with `d3.geo.path` and `d3.geo.zoom` to enable zooming and rotation. It also demonstrates shape tweening between projections, with the map rendered via TopoJSON and the nuclear data plotted as points from a CSV file. The globe supports interactive pan and zoom, with a legend and tooltips via `d3.tip`.

Apr 12, 2023

Loading thumbnail…

Fork of Fork of USA Country Map

This choropleth map of the United States displays each state as a pink shape with white borders, enhancing interactivity by highlighting states in orange on hover. The visualization uses D3.js v5’s `geoAlbersUsaTerritories` projection and `geoPath` to render geographic boundaries, while React manages the component state. TopoJSON’s `feature` and `mesh` functions process the US Atlas state boundaries from a JSON file, and the SVG output is styled via CSS.

Apr 12, 2023

Loading thumbnail…

Fork of Circles on a Map

This visualization displays global population data for 2018 using proportional circles positioned at country centroids on a natural Earth projection. A square-root scale encodes population values as circle areas, with a color legend indicating missing data. Users can pan and zoom the map, and hover over countries for detailed population figures sourced from UN data. The implementation uses d3.geoPath for map rendering, d3.scaleSqrt for sizing, and d3.zoom for interactive navigation.

Apr 12, 2023

Loading thumbnail…

Fork of Choropleth Map

This fork of a choropleth map uses a natural Earth projection to color countries by their economy category, with a D3 ordinal color scale based on the Spectral scheme. It also includes an interactive color legend built with reusable custom functions. The visualization renders as SVG and supports zooming and panning through d3.zoom, with hover highlighting on countries. Geographic data comes from the world-atlas TopoJSON dataset, joined with TSV metadata for country names and economic classifications, and styling is handled via external CSS.

Apr 12, 2023