klumng

@Lemasha·12 public vizzes

Fork of Hello VizHub

This example displays an interactive Leaflet map centered on a global view, with markers for Germany, India, and San Jose, plus a red circle highlighting the Golden Gate Bridge. It loads Leaflet from UNPKP and uses its `L.map`, `L.tileLayer`, `L.marker`, and `L.circle` APIs with CartoDB’s light basemap tiles. Popups bound to each feature show location names, while an ES6 module exports a companion message displayed separately.

Feb 17, 2023

Loading thumbnail…

Fork of Cheap Tricks for Interaction

This example shows a zoomable world map with country boundaries, where hovering over any country highlights it in red. It renders the map as SVG paths using `d3.geoPath` with a `geoNaturalEarth1` projection, and enables pan-and-zoom interaction through `d3.zoom`. Country names come from a TSV file joined to TopoJSON geometry from the world-atlas dataset, while hover styling relies on CSS.

Feb 11, 2023

Loading thumbnail…

Map

This example uses D3 v5 to visualize global economic data with a natural Earth projection. Countries are filled with colors from a spectral scheme based on their economy category, and hovering highlights each region. The visualization includes a custom color legend with circles and text. Data is loaded from the world-atlas package as TopoJSON and TSV files, which are processed using the `feature` function from topojson and rendered with `d3.geoPath`. The map supports zooming through `d3.zoom` events.

Feb 11, 2023

Loading thumbnail…

Fork of Let's make a map with D3 with popup.js!

A world map rendered with D3.js displays country values from a CSV file, changing country color to red on hover while showing a tooltip with the country ID and value. Using d3.geoNaturalEarth1 projection and d3.geoPath, the visualization loads TopoJSON world data and CSV data via Promise.all. Mouseover events position an HTML tooltip near the cursor, while d.csv provides the id-value pairs that populate the tooltip text.

Feb 10, 2023

Loading thumbnail…

for console test.js!

This example demonstrates fetching geographic data from the world-atlas TopoJSON file and printing the resulting JSON object to the console. The index.js file uses Python’s `requests` and `csv` libraries to load the remote dataset, while the HTML page loads D3 v5 and TopoJSON from UNPKG. However, the visualization itself is minimal: the SVG element remains empty, and the primary visible behavior is the console output of the fetched data structure. No d3 APIs are applied for rendering or transformation.

Feb 10, 2023

Loading thumbnail…

Let's make a map with D3 with popup.js!

This example shows a world map with country boundaries from the World Atlas TopoJSON dataset, where each country is color-coded and displays a tooltip with a numeric value on hover. The visualization uses D3 v5’s `geoNaturalEarth1` projection and `geoPath` to render the SVG paths, while `topojson.feature` converts the TopoJSON data into GeoJSON. A custom tooltip appears near the cursor using mouseover events and CSS positioning, and the `csv` data is matched to country IDs to populate the tooltip’s content.

Feb 10, 2023

Loading thumbnail…

Fork of Points on a Map

This example shows a world map with points for cities, using a natural Earth projection and graticules for geographic context. The visualization layers country land masses and interiors from World Atlas TopoJSON, with semi-transparent circles positioned via `d3.geoNaturalEarth1` and `d3.geoPath`. City data comes from a CSV loaded through `d3.csv`, and the React-based component structure uses hooks like `useWorldAtlas` and `useCities` to manage asynchronous data fetching.

Feb 10, 2023

Loading thumbnail…

Let's make a map with D3.js!

This example shows a simple world map rendered with D3.js, displaying country boundaries using data from the world-atlas TopoJSON dataset. Country shapes are drawn as SVG paths via `d3.geoPath` with a natural Earth projection, and hovering highlights each country in red. The code uses `d3.json`, `topojson.feature`, and appends `<title>` elements for each path, though it only logs data to the console. The page loads D3 v5, TopoJSON, and hexmap libraries, with a gray background and light blue countries.

Feb 10, 2023

Loading thumbnail…

Leaflet Map Example

This example shows a Leaflet map with interactive markers and a circle overlay, plotting applicant counts per country from a CSV dataset. Using the Leaflet JavaScript library, it renders an OpenStreetMap base layer and adds markers for each data point, binding popups to display country-specific information. The code also demonstrates adding a styled circle geometry to the map, and it imports utilities from TopoJSON for potential geospatial operations.

Feb 10, 2023

Loading thumbnail…

worldmap

A world map visualizes the number of applicants from different countries over several years, with applicant counts shown at their geographic coordinates. The map uses a Mercator projection and renders country boundaries as SVG paths, with applicant locations marked as red points. Built with React and D3, the visualization loads world topology from a TopoJSON file and applicant data from a CSV, using `d3.json` and `d3.csv` for data loading and `d3.geoPath` with `d3.geoMercator` for geographic projection.

Feb 10, 2023

Loading thumbnail…

Mapping.json

This example demonstrates how VizHub’s `package.json` supports custom library mappings and license declarations. The visualization renders a Leaflet map with OpenStreetMap tiles, plotting markers from a CSV dataset of countries and applicant counts. Code uses `d3.csv` for data loading, `React` and `ReactDOM` for component structure, and Leaflet’s `L.map` and `L.marker` APIs for geographic rendering. The `vizhub.libraries` field maps package names to browser globals and CDN paths.

Feb 10, 2023

Loading thumbnail…

D3.js!

This example displays world countries as light green shapes on a dark blue sphere, using the Natural Earth 110m dataset. It employs d3.geoPath with a d3.geoNaturalEarth1 projection to render the map, and fetches TopoJSON via the topojson library's feature function. The SVG output is generated with D3 v5, with the sphere and country paths styled through CSS classes.

Feb 10, 2023