Skip to main content
SimilarExport ZIP
100%

plotly

✓ Published0🌍 Public
Llucas-langlois
Last edited Apr 22, 2021
Created on Apr 22, 2021
Forked from HTML Starter

This example uses Plotly within an HTML widget to visualize seagrass cover percentages over time. The chart displays a time series with both lines and markers, spanning from 2001 to 2019, with error bars indicating variability in the measurements. The data is rendered through the plotly-binding and plotly-main libraries, which handle the interactive scatter plot. The visualization includes axis titles for Date and "% seagrass cover," along with a legend and hover tooltips for detailed data inspection. The code is structured as a React-based HTML widget.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Hello HTML

This example shows an interactive scatterplot of the Iris dataset, plotting sepal width against sepal length. The visualization uses React to render SVG elements and d3.scaleLinear for both axes. Data is loaded asynchronously via d3.csv from a GitHub gist, with custom React components like AxisBottom, AxisLeftScatterChart, and CircleMarks composing the chart. The axes display tick marks and labels, while circles represent individual data points, all styled with CSS classes for a clean, readable layout.

IIgor T.
68% match
Loading thumbnail…

D3 Plot with React

This example visualizes the Iris dataset as a scatter plot of petal length against sepal width, with each flower represented by a circle. It uses React to render SVG elements, while d3-scale’s `scaleLinear` computes the x and y positions and d3-array’s `extent` sets the domains. Custom React components (AxisBottom, AxisLeft, Marks) generate ticks and circles. Data loads asynchronously via d3-fetch’s `csv` from a GitHub gist. The chart includes rotated and positioned axis labels, and hover tooltips using SVG `<title>` elements.

WWasanta Pruttisarikorn
68% match
Loading thumbnail…

Scatterplot

This scatterplot visualizes the Iris dataset, plotting sepal length against sepal width for individual flowers. Using React to render SVG elements, the chart displays data points as red circles with tooltips showing the exact sepal length value. The code leverages D3 utilities such as `csv` for data loading, `scaleLinear` for axes, and `extent` for domain calculation, while custom React components construct the axes and marks. The visualization features labeled axes, tick marks, and a clean design with a Poppins font.

Yyastika
67% match
Loading thumbnail…

Scatter Plot with React & D3

This interactive visualization displays the Iris flower dataset, plotting sepal length over the dataset's row order. Users toggle between scatter plot and line chart views via React buttons, with species color-coded using d3.scaleOrdinal and a d3.schemeCategory10 legend. The D3 code builds linear scales, axes, and renders circles or a path using d3.line, while React manages state and the SVG element lifecycle.

BBismark Kofi Owusu Sarfo
67% match
Loading thumbnail…

Making a Scatter Plot with React & D3

This scatter plot visualizes the Iris dataset, mapping sepal length and width for individual flowers. It demonstrates a modular approach to combining React and D3, where D3's `scaleLinear` and `extent` APIs handle the data scaling and domain calculation, while React components render the SVG elements. The axes are custom-built using D3's tick generation, and the plot includes interactive tooltips via SVG `<title>` elements and labels for both axes.

Llaurajchang
67% match
Loading thumbnail…

[SR] Scatter Plot with React & D3

This scatter plot visualizes the relationship between sepal length and sepal width in the Iris dataset, with each point colored teal and showing tooltips on hover. The visualization is built using React components that leverage D3’s `scaleLinear` and `extent` for scaling axes, while custom `AxisBottom` and `AxisLeft` components render SVG tick marks and labels. Data is loaded asynchronously via D3’s `csv` parser from a GitHub gist. The chart displays formatted tick values (like compact notation) and includes rotated axis labels, with margins defining the plot area.

Ssuserocc
67% match
Loading thumbnail…

react scatterplot chart

This React scatterplot visualizes the Iris dataset, plotting sepal length against sepal width with tooltips displaying exact values on hover. The SVG-based chart includes labeled axes and a title. Built with React 18 and D3.js, it uses `scaleLinear` from d3-scale for coordinate mapping, `extent` for domain calculation, and `csv` for data loading. The visualization is composed of reusable components for axes, marks, and the overall chart group, with the dataset fetched from a GitHub-hosted CSV file.

SSuperShreejit
67% match
Loading thumbnail…

Reusable_D3_Scatter_Plot.

This example presents an interactive scatter plot of the Iris dataset, cycling through different x-axis variables (petal width, sepal width, petal length, sepal length) at intervals to explore relationships with sepal length on the y-axis. The visualization uses D3.js v6 within a React environment, rendering with SVG and animation. The reusable `scatterPlot` function leverages D3 scales, axes, and data joins, while the main script loads CSV data, maps species to colors (red, violet, orange), and includes a custom legend with labels and points.

DDaniel R Handoko
67% match