Skip to main content
SimilarExport ZIP
100%

Monthly Price of Gold since 1950

✓ Published1🌍 Public
MModalMBS
Last edited Sep 28, 2020
Created on Sep 27, 2020
Forked from Car's Scatter Plot

The visualization displays the monthly price of gold from 1950 onward as a series of vertical bars, with height representing the dollar price and horizontal position encoding time. It uses D3 v6 to load the CSV data, parse dates with `timeParse('%Y-%m')`, and map values through `scaleTime` and `scaleLinear` before appending SVG rectangles. The data comes from the gold-prices dataset hosted on Datahub.

AI-generated description

https://datahub.io/core/gold-prices#data

MIT Licensed

Similar vizzes

Loading thumbnail…

Monthly Price of Gold since 1950

The visualization shows the monthly price of gold from 1950 onward, using stacked rectangular bars to represent price levels over time. Each bar’s height is scaled by the d3.scaleLinear y-axis, while the x-axis uses d3.scaleTime to map dates. The code loads data from a CSV file via d3.csv, parses dates with d3.timeParse, and renders SVG rectangles with d3.select and data joins. A secondary d3.scaleLinear for working hours is defined but not fully utilized.

MModalMBS
96% match
Loading thumbnail…

ICE 7 - Line Chart(Gold Prices)

This visualization shows the yearly trend in average gold prices from a CSV dataset, with the x-axis mapping year and the y-axis mapping the average closing price in USD. The line chart uses D3 v5’s `scaleLinear`, `scaleTime`, and `axisBottom`/`axisLeft` to build the axes, while a `line` generator with a `curveBasis` path renders the smooth red trend line. The React-served SVG includes axis labels and a title, with data loaded via `csv` from a GitHub Gist.

NNaveen Kumar
70% match
Loading thumbnail…

ICE 7 - Area Chart(Gold Prices)

This area chart visualizes gold price trends over time, displaying yearly average closing prices in U.S. dollars. The visualization uses a green filled area with a smooth curve to represent price fluctuations, with labeled axes for year and price. It loads data from a GitHub Gist and renders using D3 v5 APIs including `scaleTime`, `scaleLinear`, `area`, `curveBasis`, and axis generators. The SVG output includes styled titles and clear axis labels, with data parsed from CSV format.

NNaveen Kumar
69% match
Loading thumbnail…

Line Chart ICE-7-Rajasri

This line chart visualizes gold prices over time, plotting the "High" value against the timestamp for each data point. The visualization uses D3 v5 with SVG rendering, employing `scaleTime` and `scaleLinear` for axes, a `line` generator with `curveBasis` for the smoothed path, and `axisBottom` and `axisLeft` for labeled ticks. Data is loaded via `csv` from a GitHub gist, with the chart styled through CSS properties like stroke color and font sizing defined in an external stylesheet.

Rrajasrilekkala
69% match
Loading thumbnail…

Fork of Fork of Barchart of the restaurant data

This example visualizes the annual gold rate data by rendering a horizontal bar chart where each bar represents a date, with the bar length encoding the gold price in USD. The chart uses D3.js v5 for scales and data processing, while React 16.9 handles the component lifecycle and SVG rendering. The code employs `scaleBand` for the y-axis date categories, `scaleTime` for the x-axis temporal values, and explicitly maps over the data to draw each rectangle. The visualization reads from a CSV file hosted on GitHub and filters the dataset to the first 30 entries, with axes labeled to clarify the date and USD units.

Ttejasviteegala@my.unt.edu
68% match
Loading thumbnail…

Fork of Responsive Scatter Plot

This example displays a scatter plot of annual gold prices, charting Date on the x-axis against USD on the y-axis. It uses d3.csv to load the data and d3.scaleLinear, d3.extent, d3.axisLeft, and d3.axisBottom to render the axes. The SVG circles are appended using a data join with attributes for position and fill. The chart is styled with a custom background color and large tick labels via CSS.

Ttejasviteegala@my.unt.edu
67% match
Loading thumbnail…

Untitled

This bar chart displays monthly values over time, with each bar’s height representing a numeric amount in dollars. The chart uses D3.js (version 3.5.17) to parse date strings from a CSV file, map dates to ordinal positions on the x-axis, and scale values linearly on the y-axis. Axes are rendered using `d3.svg.axis` with rotated tick labels, and the bars are drawn as SVG rectangles filled in steel blue.

AAnju60
67% match
Loading thumbnail…

Untitled

A bar chart displays monthly monetary values from 2013-01 through 2014-02, with each bar’s height encoding the value and labeled on the y-axis as "Value ($)." The chart uses an ordinal x-scale with rotated date labels and a linear y-scale, rendered as SVG rectangles. Built with D3 version 3.5, it employs `d3.svg.axis`, `d3.time.format`, and `d3.csv` to load and parse the `bar-data.csv` file. Data points are formatted as monthly timestamps, and axes include tick marks with rotated text for readability.

RRohit-2710
67% match