Nikkko1

@Nikkko1·11 public vizzes

Fork of Flow chart for the spread of COVID-19 across the world

This visualization is a flow map that traces the early spread of COVID-19 between geographic locations, highlighting how provinces in China acted as initial carriers before secondary travel to Europe and Australia. The map uses a Mercator projection and renders a grey world map with green curved paths representing each connection. Built with D3 v4, it loads GeoJSON world boundaries and CSV coordinate data, then uses `d3.geoPath` to draw both the map and the line-based routes. The underlying data comes from the provided `data.csv` file.

Jun 7, 2022

Loading thumbnail…

Fork of Cheap Tricks for interaction

This example shows a world map with colored countries and two curved lines connecting points between South America and the Atlantic Ocean, drawn from a CSV file containing latitude and longitude pairs. The visualization uses d3.geoMercator for projection, d3.geoPath to render geographic features, and d3.zoom for panning and scaling the entire scene. Country data comes from a TopoJSON file loaded via topojson.feature, while a d3.json request fetches a GeoJSON world shape. Countries are assigned colors from a rotating palette, with hover effects turning them black.

Jun 2, 2022

Loading thumbnail…

Fork of Cheap Tricks for Interaction

This example shows an interactive world map that highlights countries in red on hover and displays country names as tooltips, with zoom and pan capabilities through the d3.zoom behavior. The visualization uses d3.geoNaturalEarth1 projection with d3.geoPath to render geographic features, sourcing country boundaries from the world-atlas TopoJSON dataset and matching names via TSV data. The SVG rendering includes a styled sphere background and country paths, with zoom transforms applied to a group element. Country names appear through SVG title elements appended to each path.

Jun 2, 2022

Loading thumbnail…

Fork of Circles on a Map

This visualization displays global population for 2018 using proportional circles overlaid on a natural Earth map projection. Each circle is positioned at a country’s centroid, with area scaled by population via `d3.scaleSqrt`, while a separate color legend and size legend explain the encoding. The map is rendered as SVG using `d3.geoPath` and `geoNaturalEarth1`, with pan and zoom enabled through `d3.zoom`. Data combines a CSV of population figures with TopoJSON world geography, processed using `topojson.feature`.

Jun 1, 2022

Loading thumbnail…

Fork of Interactive WorldMap

This interactive world map uses D3.js to visualize country-level economic data, coloring each nation with a categorical scale based on its economy type. The map renders geographic boundaries using d3.geoPath with d3.geoNaturalEarth1 projection, and supports zooming through d3.zoom. Data comes from world-atlas TopoJSON and TSV metadata, while a color legend uses d3-scale-chromatic. Additional code demonstrates animated interpolation between London and New York using d3.geoInterpolate, though that feature appears incomplete in the rendered output.

Jun 1, 2022

Loading thumbnail…

World Map D3.js!

This example displays an interactive world map using SVG, with countries rendered in green and the ocean as a blue sphere. It loads geographic data from the world-atlas TopoJSON file and converts it to GeoJSON using the TopoJSON `feature` method. Countries are drawn with `d3.geoPath` and the `geoEquirectangular` projection, and hovering over a country changes its fill to orange via CSS. The map uses D3 v5 for data binding and rendering.

May 24, 2022

Loading thumbnail…

Fork of Polished World Map

This example displays a world map with country boundaries, graticules, and a sphere outline, rendered as an SVG using the d3.geoNaturalEarth1 projection and d3.geoPath. The visualization loads geographic data from the World Atlas TopoJSON, using d3.geoGraticule to draw latitude and longitude lines. The map’s landmasses are filled with a teal color, while the ocean is light gray, and interior boundaries are highlighted with a contrasting stroke. The visualization is built with React, using d3.json to fetch the TopoJSON and topojson.feature and topojson.mesh to prepare the shapes for rendering.

May 20, 2022

Loading thumbnail…

Fork of Stylized Line Chart

This example shows a line chart drawn from the world-atlas TopoJSON dataset, rendering country boundaries as a continuous curved path using D3's `line` and `curveNatural` functions. The path is styled with a teal stroke and no fill, creating a stylized visual of the world map. The React component loads the geographic data via `useData`, which fetches the TopoJSON and converts it to GeoJSON with `topojson.feature`, then passes it to the `Marks` component for SVG rendering. The chart currently has circle-mark rendering commented out, leaving only the black-outlined path visible.

May 20, 2022

Loading thumbnail…

Fork of Fork of HTML Starter

This example displays the large, centered message “Hello HTML!” using CSS for styling and positioning. The page is a minimal HTML document that demonstrates fundamental web technologies, with a `.message` class setting the font size and text alignment. It uses no external libraries or frameworks, relying only on vanilla HTML, CSS, and JavaScript. The rendering is handled directly by the browser, with the text scaled to 13em for visual impact, and serves as a basic starter template for building more complex visualizations.

May 20, 2022

Loading thumbnail…

Document

This example shows a simple yellow smiley face rendered as three SVG circles on a black-outlined background. The static visualization uses hard-coded coordinates and radii, with two small black circles for eyes and a larger filled circle for the face. The page is built with React 18.1.0, loaded from a UMD CDN, and draws directly to an inline SVG element using basic circle attributes like `cx`, `cy`, `r`, `fill`, and `stroke`. No data source or interactive behavior is present.

May 13, 2022

Loading thumbnail…

Fork of D3: GeoEarth

This interactive SVG map displays global brain and central nervous system cancer deaths for 2019, using a YlOrRd sequential color scale to encode mortality counts per country. Built with React, it loads country boundaries via `d3.json`, converts them with TopoJSON’s `feature`, and projects them using `geoNaturalEarth1` and `d3.geoPath`. A hover-triggered tooltip appends country names and death totals, while a legend provides color reference. Data comes from a WHO-style cancer mortality CSV joined to ISO country codes.

May 13, 2022