viz_4

100%

✓ Published0🌍 Public

Last edited May 7, 2023

Created on May 7, 2023

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.”

AI-generated description

A scatter plot of The Iris Dataset.

MIT Licensed

Similar vizzes

Loading thumbnail…

viz_6

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.

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…

Working With Time

A scatterplot shows daily closing values over time, with each point marking a date and its corresponding price. The chart uses a time-scaled x-axis with abbreviated weekday labels and a linear y-axis for values. Built with React and D3 v5, the visualization loads CSV data via `d3.csv`, scales positions with `d3.scaleTime` and `d3.scaleLinear`, and renders SVG circles with native `<title>` tooltips. Axes are custom React components using D3's tick generation.

GGayan Priyadarshana

71% match

Loading thumbnail…

Simple scatter plot in v4

This example shows a simple line graph with circular data points overlaid to create a scatter plot, displaying stock closing prices over time. The visualization uses d3.csv to load the data, d3.timeParse to convert date strings, and d3.scaleTime and d3.scaleLinear to map the date and price values to pixel coordinates. A d3.line generator draws the line path, while appended circle elements mark each data point. The chart includes axes generated with d3.axisBottom and d3.axisLeft, all rendered as SVG within the page.

Dd3noob

70% match

Loading thumbnail…

Re-usable Scatter Plot

This reusable scatter plot visualizes the relationship between product quantity and price from a CSV inventory dataset. It uses D3 v6 to load the data, map the numeric fields to linear scales, and render circles with fixed radius on an SVG canvas. The code demonstrates a modular chart-building pattern with explicit margins, axis generation via `d3.axisBottom` and `d3.axisLeft`, and a consistent steelblue fill for all data points. The chart is embedded in a centered, styled layout.

Vvishnupriya eupuri

70% match

Loading thumbnail…

Scatterplot with v4

This example shows a line graph of stock closing prices over time, with scatterplot points overlaid on the line to mark individual data values. The code loads a CSV file with dates and closing prices, parses the dates with `d3.timeParse`, and defines scales using `d3.scaleTime` and `d3.scaleLinear`. It renders the line with a `d3.line` path and adds circles for each data point using SVG. Axes are drawn with `d3.axisBottom` and `d3.axisLeft`. The visualization uses d3.v4 and is rendered as SVG in the browser.

Dd3noob

70% match

Loading thumbnail…

Time scatter plot

This time scatter plot visualizes temperature readings over time as red circles on an SVG canvas. The visualization uses D3's `scaleTime` and `scaleLinear` for axes mapping, with `timeFormat` to display weekday labels on the bottom axis. React renders each data point as a circle, with tooltips showing the formatted timestamp. The chart loads data from a CSV file via D3's `csv` utility, and custom React components handle axis and mark rendering.

Yyastika

70% match

Loading thumbnail…

legend date

This scatterplot displays daily GrossAmount values over time, with each point colored by its price category through a categorical ordinal scale. The visualization includes an interactive color legend that highlights points matching the hovered value while fading others. Built with React and D3 v6, it uses `scaleTime`, `scaleLinear`, and `scaleOrdinal` to map date, price, and color encodings, rendering circles as SVG marks. Data comes from NOAA, loaded via `d3.csv`, with axes generated by custom `AxisBottom` and `AxisLeft` components.

EEnes Gök

69% match