designer

100%

✓ Published0🌍 Public

Last edited Jun 26, 2014

Created on Jun 26, 2014

This example shows a web page overlaying a Google Map with a floating card containing a toolbar and a slider control, designed as a Polymer custom element. The map is rendered via a Google Maps iframe, while the interactive card uses Polymer’s `core-card`, `core-toolbar`, `core-icon-button`, and `paper-slider` components. The code imports these components as HTML imports and defines the layout with absolute positioning and CSS styling inside a `<template>` tag. No data source or dynamic behavior is present; the visualization simply demonstrates a static dashboard layout using Polymer’s material design components.

AI-generated description

Similar vizzes

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

62% match

Loading thumbnail…

Gist 6cd6fea1125bc0e25597996d418bc20d

This example shows a React application that displays a Google Map centered on a specific location, with markers loaded from an external JSON file and rendered using the `react-google-maps` library. It also includes a separate "Places" component that fetches employee data from another JSON file via `axios` and lists their first names. The map uses the `GoogleMapLoader` and `GoogleMap` components, with custom marker icons, while the places list demonstrates asynchronous data fetching and state management. The visualization combines geographic positioning with a simple text-based list, illustrating how to integrate map and non-map data in a single React interface.

CCKschneid

62% match

Loading thumbnail…

D3js and Polymer Web Components

This example demonstrates a pie chart built as a custom Polymer web component that reads financial data from a CSV file. Sliders let the user adjust each spending category’s amount, and the chart updates in real time. The component uses Polymer’s `domReady` and `urlChanged` callbacks to load the data via `d3.csv` from the specified `url` attribute. D3’s `d3.layout.pie`, `d3.svg.arc`, and `d3.scale.ordinal` handle the layout, arc generation, and color mapping, while an SVG group element is updated on each slider input.

BBartekDu

61% match

Loading thumbnail…

Google Map + D3 Generated Layers

This example demonstrates a Google Map with multiple D3-generated layers overlaid, including choropleth countries, GeoHash grid cells, a heat map, a graph, and a graticule. The GMapLayered widget composites these layers, with countries colored by weight using a palette and GeoHash data shown as colored tiles. The visualization also renders a heat map and a graph of weighted points, all anchored to geographic coordinates. The code uses the hpcc-systems Visualization library’s map components to manage layer rendering and interaction.

GGordonSmith

60% match

Loading thumbnail…

hello world

This example presents an interactive pie chart built with D3.js and Polymer Web Components, showing expense categories from a CSV file. The chart displays four data types—Restaurant, Entertainment, Rent, and Groceries—with each slice labeled and colored via an ordinal scale. Sliders next to each category allow the user to adjust the amounts, and the chart redraws in real time as values change. The visualization uses D3’s `d3.svg.arc` and `d3.layout.pie` to generate the arcs, while Polymer’s `polymer-element` encapsulates the chart logic and data loading via `d3.csv`. Rendering is done in SVG, with the chart’s dimensions fixed at 500 by 500 pixels.

CCurran Kelleher

60% match

Loading thumbnail…

Map test

This example displays a full-screen interactive map embedded from Carto Builder, presenting geographic data in a standard tiled web-mapping interface. The page itself uses an iframe element to load the external Carto visualization, while D3 v4 is loaded via a script tag but is not actively used for rendering or interaction. The map includes pan and zoom controls provided by the Carto platform, and the overall layout is fixed to the viewport with zero margins for a seamless presentation. The code primarily demonstrates a simple integration pattern between a hosting page and a third-party mapping service, rather than a custom D3 visualization.

CCartophile

60% match

Loading thumbnail…

Untitled

This example displays a Leaflet map centered on a coastal area, with several vector layers added programmatically. It shows a GeoJSON polygon and point rendered via `L.geoJson`, alongside a marker, a red circle, and a polygon created with `L.marker`, `L.circle`, and `L.polygon`. The map uses a MapTiler Voyager tile layer with CARTO and OpenStreetMap attribution. Popups are bound to each shape, with the marker’s popup opened by default, demonstrating basic interactive map layers in a React-agnostic HTML setup.

Ccharliemok

60% match

Loading thumbnail…

Google Map + D3.js

This example combines Google Maps with D3.js to display bars and lounges around a Los Angeles hotel, using data from the Yelp API. A custom Google Maps overlay projects each business's latitude and longitude onto the map, rendering them as styled SVG markers with numbered labels. The map itself uses custom styling to alter road, landscape, and transit appearance, while the markers are drawn as red circles with white strokes. The code relies on the Google Maps JavaScript API, D3 v3, and jQuery for data handling, with the input data stored in a query.json file.

LLucaZampieri

60% match