Skip to main content
Log in
M

mayowaOyetola

@mayowaOyetola·6 public vizzes

Loading thumbnail…

Locations of Datavis 2020 Students By Date

This map shows the global locations of Datavis 2020 students who introduced themselves during the first week, with each dot colored by the date they joined. The visualization uses a natural Earth projection, rendered as SVG via React with D3 v5, and leverages `d3.geoPath` and `d3.geoGraticule` to draw the landmasses and graticules. Student locations are geocoded from Slack introductions and plotted as colored circles, with a sequential viridis color scale and a legend indicating the join date.

Jan 10, 2020
Loading thumbnail…

Locations of Datavis 2020 Students By Date

This visualization displays the geographic locations of Datavis 2020 students, colored by the week they joined the course, using a natural Earth projection. The map is rendered with SVG paths for the sphere, graticules, landmasses, and interiors, while student locations are drawn as circles whose colors encode their join date via a viridis sequential color scale. The project leverages `d3.geoPath`, `d3.geoNaturalEarth1`, and `d3.geoGraticule` for map generation, and a `ColorLegend` component shows the date range. Data is sourced from a hardcoded CSV of manually geocoded student locations, parsed with `d3.csvParse` and `d3.timeParse`.

Jan 10, 2020
Loading thumbnail…

Locations of Datavis 2020 Students By Date

This visualization displays the geographic locations of Datavis 2020 students, colored by the week they joined the course, using a natural Earth projection. The map is rendered with SVG paths for the sphere, graticules, landmasses, and interiors, while student locations are drawn as circles whose colors encode their join date via a viridis sequential color scale. The project leverages `d3.geoPath`, `d3.geoNaturalEarth1`, and `d3.geoGraticule` for map generation, and a `ColorLegend` component shows the date range. Data is sourced from a hardcoded CSV of manually geocoded student locations, parsed with `d3.csvParse` and `d3.timeParse`.

Jan 10, 2020
Loading thumbnail…

Locations of Datavis 2020 Students By Date

This visualization maps the global distribution of Datavis 2020 students, coloring each point by the week they joined. The map uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`, with world atlas data from TopoJSON. Student locations are geocoded coordinates rendered as circles on an SVG, with a sequential viridis color scale showing join dates. The React component structure and D3 utilities like `scaleSequential` and `timeFormat` drive the legend and date encoding.

Jan 10, 2020
Loading thumbnail…

Locations of Datavis 2020 Students By Date

This map shows the global distribution of students who joined Datavis 2020 during its first week, with each point colored by the date they joined. A color legend on the left displays the date scale, while circles on a natural Earth projection mark student locations based on manually geocoded coordinates from introductions in the D3 Slack group. The visualization uses React for components, d3.geoNaturalEarth1 and d3.geoPath for map projections, d3.scaleSequential with interpolateViridis to encode dates, and loads world atlas data via topojson.

Jan 10, 2020
Loading thumbnail…

Hello VizHub

This example displays a large, centered "Hello VizHub!" message in the Ubuntu font on a dark navy background. It demonstrates the setup of a minimal D3.js visualization project, showing how to structure code across separate files for modularity. The text is rendered via a D3 selection, using the `select` API to target the HTML element, with the greeting coming from a local ES6 module. Styling is applied through an external CSS file, which also imports a Google Font, while the page loads a local bundle script.

Aug 7, 2019