Skip to main content
100%

CartoDB map of Colors

✓ Published0🌍 Public
Aandrewxhill
Last edited Apr 6, 2015
Created on May 14, 2013

This map of named colors uses CartoDB and D3 to place colored circular markers on a world map, one for each color in a dataset. The markers are rendered as SVG ellipses with a multiply blend mode, sized by zoom level so they remain visible at any scale. Each marker’s fill is determined by matching its data attribute `named_color` to the corresponding CSS color in a large lookup table, turning the geographic coordinates into a palette of thousands of named colors. The result is a colorful, overlapping scatter of dots that reveals the global distribution of color names.

AI-generated description

Steps for building a google form + cartodb table to collect data

Figure out what data you want to collect. I'm going to collect

  • What color people like (color)
  • Where they are located (location)

Create a table to store the results

  • Create blank table with columns for color and location

Create a form to collect data

  • docs.google.com
  • select Create new Form
  • create form
  • store results in a new spreadsheet

Go to the new spreadsheet

  • Tools
  • Script editor
  • Create a script for => Spreadsheet

Edit script

  • rename to CartoDBColors
  • use the attached set of functions
  • add trigger on onFormSubmit for 'on form submit'

Share your form with the world!

  • enjoy data collection straight into CartoDB :)

Similar vizzes

Loading thumbnail…

CartoDB + D3 Bubble Map

A bubble map renders world borders and populated places on a blue SVG canvas, with city markers animating from random positions to their geographic coordinates. The visualization combines CartoDB’s SQL API (fetching GeoJSON from `d3_world_borders` and `d3_populated_places`) with D3’s `d3.geo.mercator` projection and `d3.geo.path` for borders. City circles scale by population, and clicking a marker displays its name via SVG text. A `d3.behavior.zoom` handler enables panning and zooming through SVG transforms.

Aandrewxhill
78% match
Loading thumbnail…

Basic CartoDB Layer in D3

This example displays geographic features from a CartoDB table as violet polygons on a map. It uses D3.js with a GeoJSON data format to load the geometry through the CartoDB SQL API. The code applies `d3.geoPath` with a projection to convert GeoJSON coordinates into SVG path data, appending `path` elements to a selected layer. The map relies on the `d3.json` method to fetch the data asynchronously and render it directly into the SVG.

Aandrewxhill
75% match
Loading thumbnail…

Easy example | CartoDB.js

This example shows a full-screen interactive map that renders a dataset called "untitled_table_5" with custom CartoCSS styling. The map displays points, lines, and polygons in a red color scheme with white outlines, and includes tooltips triggered by interactivity on the `cartodb_id` field. The code uses the CartoDB.js library version 3, specifically `cartodb.createVis`, which loads the visualization from a JSON configuration object. The base map is provided by OpenStreetMap tiles via Leaflet, while the geographic data is queried from a CartoDB table using SQL and styled with CartoCSS rules for each geometry type.

Aandrewxhill
73% match
Loading thumbnail…

d3.carto - Basic d3.carto Map

This map uses the d3.carto.map plugin to render a single GeoJSON layer of world country boundaries, styled with a blue fill and black strokes. The page loads the map into a full-screen div, applies zoom/pan controls via the plugin's built-in interface, and enables clickable features for interactivity. Data comes from a local world.geojson file, with countries drawn as SVG polygons; the accompanying CSS defines the visual styling for map elements, controls, and modal dialogs.

663anp3ca
73% match
Loading thumbnail…

Gist 4354110

This visualization displays a map rendered with CartoDB, showing geographic data from a hosted visualization. The page loads a full-screen map using the CartoDB.js library, which initializes the map via `cartodb.createVis` and connects to a remote visualization URL. The map itself is embedded in a fixed-size `<div>` element and relies on CartoDB’s built-in rendering and tile services to draw the geographic layers. The code does not include custom data processing or interaction logic; it simply leverages the CartoDB API to present the pre-configured map.

Aandrewxhill
73% match
Loading thumbnail…

Map

A map-style scatterplot displays colored circles of varying sizes positioned over an SVG canvas, with click interactions that alert the name of each data point. Built with D3 v5, the visualization uses `selectAll` and data joins to bind an array of coordinate objects to circle elements. Local ES6 modules and D3 imports are demonstrated alongside styling via external CSS.

Cchris.shimotake@gmail.com
72% match
Loading thumbnail…

d3.carto - Simple Map Example

This example demonstrates the use of the d3.carto library to create a simple, layer-based map. It displays geographic features rendered as SVG elements, with support for canvas rendering and animation. The map leverages d3.carto’s API to define map layers, handle panning and zooming controls, and provide interactive features such as clickable markers and modals. The accompanying CSS ensures that vector elements maintain stroke width regardless of zoom, and the interface includes zoom and pan buttons positioned over the map.

AAlan McConchie
72% match
Loading thumbnail…

D3 map

This example displays a world map with color-coded countries and circular markers positioned at geographic coordinates, each filled with a photographic image. It uses D3.js (v5) with the `geoNaturalEarth1` projection and `geoPath` to render the map, loading TopoJSON country boundaries from the world-atlas package. Data is fetched from a SPARQL endpoint via a query that retrieves images, titles, and latitude/longitude for cultural heritage objects. The code creates SVG patterns containing images and applies them as fills to circles positioned using the projection function.

Kkimgarrard
72% match