Fork of HTML Starter -- zoom works-

100%

Fork of HTML Starter -- zoom works-

✓ Published0🌍 Public

Last edited Nov 21, 2022

Created on Nov 21, 2022

This interactive line chart displays hydroelectric data over time, with values fluctuating around 1692. The visualization uses a brush mechanism to enable zooming into specific date ranges, dynamically updating the x-axis scale. Built with D3.js v6, the chart renders an SVG path and allows users to select a time window by dragging across the plot area, with axes and scales computed from the CSV data.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Fork of Fork of HydrographV2.3 Tooltips/Brush Working with dots and line

This interactive dashboard displays a multi-chart hydrograph visualization tracking federal funding, revenue, and crude oil production data through a combination of line charts and grouped bar charts. The visualization uses React with D3.js (v7) to render SVG elements with animated transitions, showing both actual and projected values across time series data. Notable features include multi-axis line charts displaying three different metrics simultaneously, bar charts comparing historical revenue against projections, and tooltip and brush functionality for interactive data exploration. The implementation leverages D3's scaleLinear, scalePoint, scaleBand, and transition APIs to coordinate the animated rendering across five coordinated chart panels.

Nnicolekevans

81% match

Loading thumbnail…

Fork of Fork of HTML Starter

An interactive line chart displays a time series with a circular marker tracking the latest data point. The visualization uses D3 v5 to render an SVG path from sample data, with axes and labels generated via D3 scales. A dropdown menu likely filters the displayed series, though the selection logic resides in the bundled React component. The chart updates dynamically, highlighting the most recent value with a labeled circle. The implementation combines D3’s selection, scale, and axis APIs within a React framework, styling the output through external CSS.

NNandini Maddula

81% match

Loading thumbnail…

Fork of HTML Starter

This interactive line chart renders an SVG visualization of data points connected by a smooth curve, with a title and chart container styled via CSS. Built with D3 v5 and React, the visualization uses an SVG `<path>` element to draw the line, while JavaScript handles the data binding and coordinate scaling. The chart is presented on a fixed 960x500 canvas, demonstrating a minimal HTML, CSS, and JavaScript integration for a basic line chart display.

NNandini Maddula

81% match

Loading thumbnail…

Fork of Fork of Stylized Line Chart

This interactive line chart visualizes 20,000 synthetic temperature readings over time, rendered as SVG paths using D3’s `line` and `area` generators within a React framework. Users can brush horizontally to zoom into finer levels of detail, switching between area and line representations while tooltips display exact timestamps and values. The data is preprocessed into multiple levels of detail, reducing points per view to maintain performance. D3 scales (`scaleTime`, `scaleLinear`) and axis components handle the coordinate system, with brush interactions powered by `brushX` and event listeners.

RRajat Dangat

80% match

Loading thumbnail…

Fork of HTML Starter

This visualization presents an interactive dashboard for exploring environmental sensor data. It renders a world map alongside line charts and a contour map, allowing users to select different sensor attributes from a dropdown menu. The code uses React with hooks, D3 scales and time parsing, and SVG rendering. Data is fetched from a local API endpoint, with brushed time ranges filtering the displayed temporal and spatial patterns.

CCheng Tang

79% match

Loading thumbnail…

Fork of Fork of HTML Starter

This interactive scatter plot visualizes wildlife data, mapping animal weight, altitude, population density, and temperature. The visualization cycles through different x-axis variables every second, allowing dynamic exploration of relationships between ecological metrics. Built with D3 v6, it uses scalable vector graphics (SVG) rendering with ordinal symbol scales to distinguish habitats, while circle sizes encode age-specific differences. The code implements reusable chart functions with configurable accessors, and animates transitions by updating scales and redrawing marks. Data originates from a CSV file loaded via D3’s CSV parser, with axes and symbols rendered using D3’s scale and shape generators.

NNandini Maddula

78% match

Loading thumbnail…

Fork of Stylized Line Chart

This visualization displays a time series of temperature data, rendered as a line chart that switches between a refined line and a filled area representation. Built with React and D3 v5, it uses `d3.scaleLinear` and `d3.scaleTime` to map data to SVG coordinates, with `d3.area` for the area chart. Users can brush horizontally to zoom into the data, which triggers a level-of-detail reduction that switches between raw data points and aggregated min/max ranges, with circles drawn at high zoom levels.

RRajat Dangat

77% match

Loading thumbnail…

Fork of Fork of HTML Starter abc

This visualization presents electronics sales data over time using a line and area chart, with monthly values plotted along a categorical x-axis and a linear y-axis for sales figures. The render function uses d3’s scaleBand, scaleLinear, line, and area generators with curveBasis smoothing to draw the paths, while axisLeft and axisBottom add labeled axes with gridlines. The data is loaded asynchronously from a CSV file via d3.csv, and the chart is rendered inside an SVG element. The code also includes a separate scatterplot.js module with d3.scaleLinear for potential scatter plot rendering.

Aakshitha.rapala@gmail.com

76% match