Skip to main content
100%

Live currency map

✓ Published0🌍 Public
Aandrewxhill
Last edited May 22, 2015
Created on May 19, 2015

A live world map displays real-time currency exchange rates relative to the US dollar, with each country colored according to its current rate and updated every ten minutes. The visualization uses CartoDB for rendering and Yahoo Finance as the data source, with a Node.js server polling currency pairs and updating the map. An animation-driven layer shows the latest values, with a timestamp overlay indicating the last update time.

AI-generated description

Similar vizzes

Loading thumbnail…

Gist 89566fbfb20d81fd7fe9

This interactive line chart tracks the exchange rates of various global currencies against the euro, with a dropdown menu to switch between different currency selections. The visualization displays a time series of daily rates, augmented by a red exponential moving average line that reveals underlying trends, while a crosshair with a trackball follows the mouse to show precise values for any date and rate pair. The chart is rendered as an SVG using the D3.js library, with grid lines, axis labels, and a legend. The code also incorporates the d3fc framework for chart components and a custom area chart beneath the line to emphasize the rate’s magnitude over time.

BBenHeubl
66% match
Loading thumbnail…

World map economy

This example presents a world map visualization focused on economic data, embedding an interactive map created with CartoDB’s builder interface. The page uses d3.v4 to load and structure the environment, but the core rendering is handled by an external iframe that pulls from a Carto map. The visualization displays geographic regions with economic indicators, allowing users to explore the data through Carto’s interactive mapping tools. The code relies on d3’s selection and utility functions for DOM setup, while the primary map rendering occurs outside d3’s native drawing capabilities.

CCartophile
65% match
Loading thumbnail…

exchange rates

A slider shows the daily USD-to-EUR exchange rate over time, with a draggable horizontal line that can be moved to inspect specific values. The visualization plots the data as a line chart, using a cubehelix color scale for a continuous gradient background. It is built with D3.js, including the custom brush, scale, and time-series slider APIs, and renders as SVG. The data comes from the eurofxref-hist.csv file, filtered to show dates from February 2015 onward.

SSpaceActuary
64% match
Loading thumbnail…

Gist e13df2ee55aa6c1117d5d6b6371e9b69

This example uses Yahoo Finance’s quote API to visualize live foreign-exchange data for the GBP/USD pair through D3.js. The JSON response is processed to display key metrics such as the current price, day’s high and low, and 52-week range, using D3’s scales and SVG paths to render a candlestick-style chart. Only the most recent quote is shown, with no time-series animation or historical data. The rendering logic draws on D3’s `forceSimulation` for layout and `geoPath` for styling, though the visual itself is a simple static chart of the currency pair’s market range.

RRobinL
64% match
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.

NNikkko1
64% match
Loading thumbnail…

Interactive WorldMap

This interactive visualization displays a world map colored by each country’s economy type, using a natural Earth projection. The map supports pan and zoom through `d3.zoom`, with country names and economy values shown as tooltips via SVG `<title>` elements. It loads geographic data from the world-atlas TopoJSON and country names from a TSV file, then maps economy categories to a spectral color scale using `d3.scaleOrdinal`. The code relies on `d3.geoPath` to render countries and a sphere outline, with hover effects changing country fills to red.

KKelsey Xu
64% match
Loading thumbnail…

map visualization

This map visualization displays global cost of living indices using a color scale from yellow to blue, with gray indicating missing data. It uses D3 v7 to load TopoJSON world geography and CSV country data, generating simulated cost values for each nation. The visualization employs d3.geoNaturalEarth1 projection with d3.geoPath to draw country boundaries as SVG paths, and includes an interactive hover tooltip that reveals each country’s index value. A sequential color legend with a linear gradient and axis is rendered at the bottom right to show the value range from 30 to 100.

Ddeepthinaidu2001@gmail.com
63% match
Loading thumbnail…

Gist 242e773969e53286f87a

This example presents a dynamic geographic mapping interface powered by a live data feed from a Quadrant server, visualizing real-time information over a map of the United States. The code employs `d3.forceSimulation` to position and animate network nodes, while `d3.geoPath` and Canvas's `getImageData` handle the rendering and manipulation of the geographic base layer. The visualization, likely representing network activity or fleet locations, refreshes over a rolling two-hour window, with user controls for time range and sub-app navigation embedded in the URL. The UI is constructed with HTML and CSS, with the map generated from a topojson data source.

SStephen
62% match