Skip to main content
SimilarExport ZIP
100%

Day3-30day30sites

✓ Published0🌍 Public
KKacieW
Last edited Oct 7, 2017
Created on Oct 7, 2017

This example presents a visual tour of the coastal city of Dalian, beginning with a slideshow of three photographs that cycle every two seconds, each captioned with a landmark name. Below the slideshow, two static image-and-text cards describe local seafood and Tiger Beach Ocean Park. The page also embeds a Google Map centered on Dalian (latitude 38.915883, longitude 121.619674) with a single marker, using the Google Maps JavaScript API’s `google.maps.Map` and `google.maps.Marker` objects. All images are pulled from external URLs.

AI-generated description

Similar vizzes

Loading thumbnail…

Day2 - 30day30sites

This example presents a full-screen, scroll-driven exploration of the four seasons, using large background images and fixed-position text overlays to label each section. The page relies on background-attachment: fixed to create parallax-style imagery as the user scrolls, with anchor links in a navigation bar jumping to corresponding seasonal sections. Content is structured with plain HTML and CSS only, using background-image URLs for the season photos and absolute positioning with transforms to place the headings. No JavaScript libraries are used; the implementation is purely static markup and styling.

KKacieW
70% match
Loading thumbnail…

100 days of Learning D3.js

This example showcases a 100-day learning journey of D3.js through a minimalist HTML page. It presents a blank body, serving as a canvas for the author’s evolving D3 visualizations over three months. The embedded YouTube video, accessible via an iframe, demonstrates the learning process and likely highlights the cumulative output, although the page itself does not render any charts. The code relies solely on standard HTML and iframe integration, with no explicit D3 APIs or data sources present in the provided files. It functions as a documentation and presentation hub rather than an interactive visualization.

Sshapak26
56% match
Loading thumbnail…

3 dec lesson

This example presents a minimal page titled “Spatial data – 3 dec 2021,” introducing spatial data concepts through a single heading and a blue introductory paragraph. It uses D3 v7’s `d3.select` to append text to the page, styled with Google Fonts “Roboto Slab” and “Roboto” via CSS. The code demonstrates basic DOM manipulation with D3 and a static HTML structure, serving as a starting point for spatial data visualization without any maps or interactive elements.

SSimone
55% match
Loading thumbnail…

Map id 11 & slider v1

This example combines a Google Map with a D3.js time slider to explore a single day’s data. The map is centered on Lyon, France, at zoom level 16, while a draggable slider spans from 5:20 AM to 12:10 PM on December 7, 2014. Dragging the handle updates a label with the selected time and changes the slider’s background color using `d3.hsl`. The visualization uses the Google Maps JavaScript API for the map and D3 v4 for the slider, ticks, and drag behavior.

LLucLafond
55% match
Loading thumbnail…

Gist 8603058

This example presents an interactive campus tour using GeoJSON point data, mapping two historic landmarks with descriptions and photo links. It renders the geographic points on a map using D3’s `d3.geoPath` and `d3.forceSimulation` to position labels or markers, while pulling tour info from the embedded feature properties. The visualization relies on the GeoJSON FeatureCollection structure and displays Wikipedia URLs and image thumbnails as part of each stop. Coordinate parsing and path generation are handled through standard D3 geo projections, making the tour spatially navigable.

CCliffordAnderson
54% match
Loading thumbnail…

Google Maps + D3

This example overlays a custom D3 visualization on an interactive Google Map, plotting California weather station data as brown circles with labeled markers. The map displays terrain tiles from the Google Maps API, while the overlay is drawn using D3’s `d3.json` to load station coordinates and attributes. Each marker is rendered as a separate inline SVG element, positioned via the Google Maps projection’s `fromLatLngToDivPixel` method when the overlay is added. The code combines the Google Maps JavaScript API with D3’s selection and data-binding capabilities to synchronize the dynamic overlay with the map’s pan and zoom.

Mmbostock
54% match
Loading thumbnail…

projet_1

This interactive map visualizes hourly pedestrian sensor data across a city, with the view switching between 24 time-steps via buttons. It uses a Google Maps base layer with a custom D3 overlay to render each sensor as a brown circle sized by pedestrian count, and labels each location. The code employs D3.js for data binding and scaling, Google Maps’ OverlayView for projection, and SVG for markers, with data loaded from two CSV files.

EEssohanamKouyou
54% match
Loading thumbnail…

Map id 11 & slider v1

This example combines a Google Map with a D3.js time slider to explore a single timestamped location. A map centered on Lyon (map id 11) displays terrain, while the slider beneath it spans a time interval on December 7, 2014. Dragging the slider’s handle updates the displayed date and changes the SVG background color using `d3.hsl`. The implementation uses the Google Maps JavaScript API for the map and D3 v4’s `d3.drag` and `d3.scaleTime` for the interactive time axis, with SVG rendering for the slider.

LLucLafond
53% match