viz_6

100%

✓ Published0🌍 Public

Last edited May 7, 2023

Created on May 7, 2023

This interactive line chart visualizes daily Brent oil prices over time, mapping dates to the x-axis and prices to the y-axis. Built with React and D3 v5, the visualization uses `scaleTime` and `scaleLinear` for axis scaling, with `line()` and `curveNatural` from D3 to create a smooth path through the data points. The SVG rendering includes custom axis components (`AxisBottom`, `AxisLeft`) and loads data from a CSV file via the `csv` function, with styles defined in Poppins font and a teal color scheme.

AI-generated description

A scatter plot of Data Canvas Sense Your City Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

viz_4

This scatter plot visualizes Brent crude oil prices over time, plotting date on the x-axis and price on the y-axis using a linear scale for both dimensions. The visualization is built with React and D3 v5, using `d3.scaleLinear` and `d3.extent` to compute domains, with SVG circles rendered via React components for the data marks. The code loads data from a CSV file of daily oil prices, formats tick labels using `d3.format`, and includes axis labels for “date” and “price.”

HHuldahMerlinKolli

91% match

Loading thumbnail…

project a

This multi-line chart visualizes four petroleum price metrics (A1, R1, M1, D1) from the PET_PRI_GND_DCUS_NUS_W dataset over time. The visualization uses d3.csv to load and parse the data, d3.scaleTime and d3.scaleLinear for axes, and d3.line to generate the paths. Each metric receives a distinct color from d3.scaleOrdinal, with an interactive legend that toggles line visibility by adding a hidden-line class on click. The chart is rendered as an SVG and also demonstrates d3.axisBottom and d3.axisLeft.

RRuthvik Bairaboina

72% match

Loading thumbnail…

VisuProjet

This visualization displays a line chart of daily closing prices from a CSV file containing date and value pairs. The chart uses a time-scaled x-axis and a linear y-axis to map the trends over the sample period. Built with D3 v5, the code relies on `d3.scaleTime`, `d3.scaleLinear`, and `d3.line` to render the red stroke path onto an SVG. Data loading uses `d3.xml`, while axes employ `d3.axisBottom` and `d3.axisLeft`. The visualization also references the MusicBrainz API, though it is not applied to the chart itself.

SSeegson

72% match

Loading thumbnail…

Line Chart with label V2

This line chart displays Google stock prices (open, high, low, close, and volume) over time from March 2016 to March 2021, using data loaded from a CSV via `d3.csv`. Built with React and d3.v5, the visualization uses `scaleTime` and `scaleLinear` for axes, and a `line` generator with `curveStep` to render the closing price trajectory. A crosshair cursor with `bisector` and `xScale.invert` enables interactive tooltips showing detailed values for each date.

RRajat Dangat

72% match

Loading thumbnail…

Hello VizHub

This example renders a time series line chart of stock closing prices from a CSV file, with dates on the x-axis and price on the y-axis. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` generator to draw the path within an SVG. Grid lines are added via tick sizing, and the chart includes axis labels. The data is loaded asynchronously with `csv` and parsed before rendering.

GGlenn Henshaw

72% match

Loading thumbnail…

ICE-7 Line Chart

This example visualizes house prices over time using a line chart with a filled area beneath the curve, rendered as SVG in a React-based VizHub project. The chart uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `line`, `area`, and `curveBasis` to draw the smoothed trend, with axes from `axisBottom` and `axisLeft`. Data is loaded via `csv` from a remote GitHub Gist, parsed into `Date` and numeric cost values, and styled with CSS classes for bold black lines and a blue fill.

Aachyutanandmishra17@gmail.com

72% match

Loading thumbnail…

Simple Line Graph v5

A simple line graph displays daily closing prices over roughly six weeks, extracted from a CSV file with date and value columns. The visualization uses an SVG path rendered through D3 v5's `d3.line()` generator, with a time scale for the x-axis and a linear scale for the y-axis. Margins are set explicitly, and both axes are drawn using `d3.axisBottom()` and `d3.axisLeft()`. The date strings are parsed with `d3.timeParse()`, and the line is styled with a steelblue stroke.

Dd3noob

71% match

Loading thumbnail…

Hello VizHub

This example visualizes the daily closing price of a financial asset over time as a smooth line chart. The visualization uses D3 v5 with a basisspline curve, rendered as an SVG path. It employs D3's `scaleLinear` and `scaleTime` for the axes, with an `axisBottom` and `axisLeft` that include gridlines. The chart also applies a custom color scheme for the line. The data is loaded from a local CSV file using D3's `csv` function and parsed for date and numeric values.

GGlenn Henshaw

71% match