Fork of ice7

100%

✓ Published2🌍 Public

Last edited Jul 1, 2022

Created on Jul 1, 2022

Forked from ice7

This area chart displays the opening bid price for each day in January 2021, derived from a CSV file hosted on GitHub. The visualization uses D3 v5, leveraging `scaleTime` and `scaleLinear` for the axes, `line` and `area` generators with `curveBasis` for the smoothed trajectory and shaded region, plus `axisBottom` and `axisLeft` for the grid and labels. The SVG output includes a purple translucent area and a green line, with axis ticks and labels styled via CSS.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of ice7

This area chart displays the opening bid prices for January 2021, using a purple semi-transparent fill beneath a green curved line to emphasize price trends over time. The visualization uses D3 v5 with SVG rendering, employing `scaleTime` for the date axis and `scaleLinear` for price, while smoothing the path with `curveBasis`. Axis labels appear in orange, and gridlines are drawn in blue. The data is loaded from an external CSV file and formatted for the y-axis using `format('.5s')`.

PPujitha14challagulla

95% match

Loading thumbnail…

Fork of Fork of Fork of ice7

This chart displays the opening bid prices (BO) of ICE7 data for each month in 2020, shown as a smoothed line and a semi-transparent red area beneath it. The x-axis is labeled “Months” with abbreviated month names, while the y-axis is labeled “Opening bid price.” Built with d3.v5, the visualization uses `d3.csv` to load data from a GitHub gist, `scaleTime` and `scaleLinear` for axes, and `d3.line` with `curveBasis` plus `d3.area` to render the SVG paths. Axis labels are styled with orange, and tick lines are brown.

Aajaysonu

89% match

Loading thumbnail…

Fork of ICE - 7 Area Chart Maanas Katta

This fork of ICE—7 Area Chart visualizes the opening bid price of EURUSD across 2021, using an area chart to emphasize the price trend over time. The SVG-based graphic, rendered with D3 v5, smooths the line and area using curveBasis. The code applies d3.scaleTime and d3.scaleLinear for axes, with d3.axisBottom and d3.axisLeft for ticks, and formats labels via d3.format and d3.timeFormat. Data is pulled from a CSV hosted on GitHub, with date and price values parsed before drawing the area and line paths.

Nnsatyaprakash22

86% match

Loading thumbnail…

Fork of ICE - 7 Area Chart Maanas Katta

This fork visualizes the opening bid price of EURUSD across 2021 as an area chart. A smooth basis curve traces the price trend over months, with a semi-transparent aqua fill beneath the line. The chart uses D3 v5’s `scaleTime` and `scaleLinear` for axes, `area` and `curveBasis` to generate the filled path, and `axisLeft`/`axisBottom` for the labeled ticks. Data is loaded from a Gist-hosted CSV, and axes are rendered on an SVG canvas with custom tick styling.

Tttummala17

86% match

Loading thumbnail…

ice7

This graphic displays the opening bid price of EURUSD across the months of 2021, using a combined line and area chart. The visualization employs D3.js v5 with an SVG rendering approach. It uses `scaleTime` and `scaleLinear` to map dates and prices, while `axisBottom` and `axisLeft` create labeled axes. The data is loaded from a CSV file via `csv`, and the chart is drawn using `line` and `area` generators with a `curveBasis` smoothing effect.

PPujitha14challagulla

85% match

Loading thumbnail…

Fork of ICE - 7 Line Chart Maanas Katta

This fork of an ICE line chart visualizes the opening bid price of EURUSD throughout 2021 over time. The React application loads CSV data, formats dates, and renders an SVG line chart with gold tick marks, blue tick labels, and red strokes. It uses D3 v7 APIs including `scaleTime`, `scaleLinear`, `extent`, `line`, `curveBasis`, and `timeFormat`. The X-axis shows months, while the Y-axis represents opening bid prices, with labeled axes and a title.

Tttummala17

83% match

Loading thumbnail…

Fork of ICE - 7 Line Chart Maanas Katta

This example charts the opening bid price of EURUSD over 2021, displaying the data as a smooth line across an SVG. The visualization uses React to manage state and D3 version 7, specifically leveraging `scaleTime`, `scaleLinear`, `extent`, and a line generator with `curveBasis` to render the curve. Data is fetched as CSV and parsed with `d3.csv`, while custom React components build the axes and tick marks. Axis labels and a title are styled with CSS classes, and the chart includes gold tick lines and blue tick text.

RRahulSai05

83% match

Loading thumbnail…

Fork of ICE - 7 Line Chart Maanas Katta

This example shows the opening bid price of EURUSD across the months of 2021 using a line chart built with React and D3 version 7. The chart fetches CSV data from a GitHub gist, formats dates and numeric values, and renders an SVG with a smooth curve, gold tick lines, blue labels, and red stroke marks. It implements custom axes and scales via `d3.scaleTime` and `d3.scaleLinear`, with tick formatting through `d3.timeFormat` and line generation using `d3.line` with `curveBasis`.

SSRI RAM REDDY KOTERU

83% match