lucas-langlois (@lucas-langlois), VizHub

plotly

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.

Apr 22, 2021

Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, mapping petal length against sepal width with points colored by species. A React-driven color legend allows users to hover over species names, which highlights matching data points and fades all others using opacity transitions. Built with d3.scaleLinear for axes, d3.scaleOrdinal for categorical colors, and SVG circles rendered through React components, the visualization responds to hover events via useState and onMouseEnter handlers to filter and re-render marks dynamically.

Apr 21, 2021

Loading thumbnail…

Fork of Interactive Color Legend

This interactive scatter plot visualizes the Iris dataset, mapping petal length against sepal width with points colored by species. A React-driven color legend allows users to hover over species names, which highlights matching data points and fades all others using opacity transitions. Built with d3.scaleLinear for axes, d3.scaleOrdinal for categorical colors, and SVG circles rendered through React components, the visualization responds to hover events via useState and onMouseEnter handlers to filter and re-render marks dynamically.

Apr 21, 2021

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal HTML page rendering the text "Hello HTML" centered in the browser window with a large 13em font size. It serves as a bare-bones starter template showing how CSS and JavaScript integrate within a single HTML file. The page uses inline `<style>` for styling the body and a `<script>` block that logs "Hello JavaScript!" to the browser’s developer console. No external libraries are loaded; the code relies purely on native HTML, CSS, and JavaScript APIs.

Apr 21, 2021