Skip to main content
SimilarExport ZIP
100%

exchange rates

✓ Published0🌍 Public
SSpaceActuary
Last edited Jun 17, 2016
Created on Jun 11, 2016

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.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/SpaceActuary/'>SpaceActuary</a>'s block: <a href='http://bl.ocks.org/SpaceActuary/c23470248705f04f46cedcf56cac02e8'>sliders</a>

forked from <a href='http://bl.ocks.org/SpaceActuary/'>SpaceActuary</a>'s block: <a href='http://bl.ocks.org/SpaceActuary/264fe75b18d4e53e8a1179c3c5072334'>sliders</a>

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
81% match
Loading thumbnail…

Line chart from CSV using d3.js

This example visualizes the USD to RUB exchange rate over three selectable years (2018, 2019, 2020) as an animated line chart with a filled area. It uses d3.js v6 within a React-compatible structure, rendering to SVG. Data is loaded from CSV files using `d3.csv`, with the x-axis mapped via `d3.scaleTime` and the y-axis via `d3.scaleLinear`. The line and area paths are built with `d3.line` and `d3.area` using cardinal curves, while transitions (using `transition()`) animate the axis rescaling and stroke-dasharray drawing effect. A mouse hover reveals a crosshair and highlights the nearest data point via `d3.bisector`. The source is the Moscow Exchange, linked via an embedded anchor.

AAleOG
69% match
Loading thumbnail…

Activity 9 q2

This area chart displays the exchange rate of USD over time, using a green filled area to emphasize the trend. The visualization is rendered as an SVG and built with D3 v7, which handles data parsing, time-based scaling on the x-axis, and linear scaling on the y-axis. The chart also includes labeled axes for "Year" and "USD", with the area path generated by `d3.area()`. The data is loaded from a remote CSV file, and the chart is styled with a green fill and black stroke.

Cchinnivikramnunna@gmail.com
68% match
Loading thumbnail…

sliders

This visualization demonstrates interactive sliders built with D3.js, where each slider’s filled portion changes color dynamically as the user drags the handle. The sliders use a brush interaction to capture input, and the fill color is mapped through a custom cubehelix color scale (d3.scale.cubehelix) based on the slider’s current value. The SVG rendering includes horizontal and vertical orientations, with text labels and a clean, minimal design. The code also includes an animated transition example, though it is commented out.

SSpaceActuary
67% match
Loading thumbnail…

title

This visualization, built with D3.js and rendered as an SVG, shows a time-series area chart of bid data across multiple financial exchanges. The chart displays overlapping filled regions, with the x-axis representing time and the y-axis representing price or value, while a light gray rect at the top-right suggests a hover or selection area. The data, sourced from a gist by FergusDevelopmentLLC, is drawn using smooth path curves for each exchange, creating a dense, layered comparison of exchange activity over time.

WWill Carter
67% match
Loading thumbnail…

sliders

A set of draggable horizontal and vertical range sliders lets a user adjust a value, and each slider’s fill color shifts through a cubehelix color ramp. Built with D3.js version 3.5.5, the sliders use the `d3.svg.brush` API to manage drag interactions, with the brush extent mapped through a linear scale. A separate `cubehelix.min.js` script provides the `d3.scale.cubehelix` color interpolation, which is applied to the slider’s value to produce a smooth, perceptually uniform gradient. The SVG output is rendered directly in the browser, with the slider bars updating live during the drag.

SSpaceActuary
67% match
Loading thumbnail…

Line Chart ICE-7

A line chart displays exchange rates over the course of a week, with a purple curved line connecting daily data points. The chart includes labeled axes for date and exchange rate, along with a title and gridlines. The visualization uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, `line`, and `curveBasis` to render the SVG. Data is loaded from a CSV file hosted on GitHub, and the code demonstrates importing from the `d3` module and local ES6 modules.

SSaahithi49
66% match
Loading thumbnail…

Activity7_Question2

This interactive line and area chart visualizes the monthly USD to INR exchange rate over time. The visualization combines a semi-transparent steelblue area chart with an overlaid line, both colored green, to show the trend. It includes axes labeled "Date" and "Exchange Rate (INR per USD)", plus a tooltip that appears on mouseover, revealing the exact exchange rate at the hovered date via a red focus circle. Built with D3 v7, the code uses `d3.area`, `d3.line`, `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.bisector` for interactivity, with data loaded from a CSV file via `d3.csv`.

Ssriharshithaanugu5@gmail.com
66% match