Skip to main content
SimilarExport ZIP
100%

HTML Starter - ML

✓ Published0🌍 Public
Lllm0316@gwmail.gwu.edu
Last edited Mar 28, 2024
Created on Mar 28, 2024
Forked from HTML Starter

This interactive dashboard visualizes real-time electricity demand, generation, and forecasting across the U.S. grid. It displays a map of balancing authorities with color-coded demand changes, a top-five demand bar chart, time-series line charts of national demand and generation, and area charts of power interchange with Canada and Mexico. The visualization uses Observable Plot for charts, D3 for data processing and map projections, and incorporates a slider to explore historical hourly data from the EIA API.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Dynamic Linechart

This dynamic line chart visualizes U.S. electricity consumption over time, with a growing path and data points that reveal the trend as the animation progresses. The graphic is rendered as an SVG, with the chart updating by increasing a counter that shifts the visible data window. The implementation uses the `d3` library for data parsing, time formatting, and chart construction, including `scaleTime`, `scaleLinear`, and axis functions. Data is fetched from a CSV file hosted on GitHub, and the animation is driven by a `setInterval` callback.

Sscheenmi@gmail.com
70% match
Loading thumbnail…

ICE 73 MD

Animated three-line chart showing renewable energy generation trends for the USA from 2010 to 2024, comparing solar, wind, and hydro sources. Built with D3 v7, it renders SVG paths for each energy source with colored lines and data point markers. The visualization uses linear scales for time-series axes, axis generators, and a tooltip for hover interaction. Data comes from country_energy_stats.csv, loaded via d3.csv, with lines drawn using the d3.line path generator.

Ddandamidhun41613@gmail.com
69% match
Loading thumbnail…

Untitled

This interactive visualization maps the transmission of electricity over time, displaying power lines and load data on a geographic canvas. Users upload CSV files for lines and loads via file inputs, then scrub through a time slider to see changing network conditions. The code uses PapaParse for CSV parsing and d3-fetch for file handling, while D3’s slider and DOM manipulation update the displayed time and redraw the line elements based on a threshold value.

Jjtacne
69% match
Loading thumbnail…

ICE 74 MD

This animated area chart displays renewable energy generation trends for the USA from 2010 to 2024, comparing solar, wind, and hydro sources. The visualization uses D3 v7’s `d3.area()` and `d3.line()` generators with `curveMonotoneX` to render semi-transparent filled regions with stroked boundaries, while `d3.axisBottom` and `d3.axisLeft` provide labeled scales. Hover interactions reveal tooltips on data points, and the chart reads from a CSV file containing annual GWh values for multiple countries, though only USA records are visualized.

Ddandamidhun41613@gmail.com
68% match
Loading thumbnail…

ICE63MD

This visualization presents two views of renewable energy data spanning 2010–2024. The first chart shows trends for Solar, Wind, and Hydro generation, with lines and points for each energy source. The second chart combines bars showing total generation per year with a line overlay tracking the solar trend specifically. The implementation uses the D3 library, with `d3.select` to build SVG elements, `d3.scaleLinear` and `d3.scaleBand` for axis scaling, and `d3.axisBottom` and `d3.axisLeft` to render axes. Data is loaded from a CSV file using `d3.csv`.

Ddandamidhun41613@gmail.com
68% match
Loading thumbnail…

ICE-7

This interactive line chart visualizes 24 months of synthetic household electricity usage data from a CSV file. The line and points track seasonal consumption patterns, rising and falling across the year with peaks in summer and winter months. Built with reusable D3 v7 component architecture, it uses `d3.scaleTime()`, `d3.scaleLinear()`, and `d3.line()` to render the SVG, with gridlines, axes, and tooltips. The chart supports dynamic updates through a public `.update()` method, making it adaptable for any time-series dataset with date and value columns.

Vvydeeshm@gmail.com
68% match
Loading thumbnail…

Energy DashBoard

This dashboard visualizes global energy trends across multiple metrics, including renewable energy share, electricity access, fossil vs. renewable proportion, and GDP versus energy consumption per capita for selected countries. It features four synchronized D3.js v7 SVG charts—a line chart, bar chart, pie chart, and scatter plot—with a dropdown menu for country selection. The visualization uses d3.csv to load data and d3.timeParse for year formatting, while tooltips provide interactive detail on hover. Each chart includes styled titles and axis labels, and the pie chart uses d3's arc generator to display proportional energy sources.

Rrayavarapulokesh3@gmail.com
68% match
Loading thumbnail…

new

This visualization displays a line chart of energy sector intensity forecasts over time, using a dataset from an external JSON API. The x-axis represents forecast years, while the y-axis maps intensity values, with a colored legend distinguishing intensity levels from "Very Low" to "V.High." Built with D3 v6 in a React framework, the code employs `scaleLinear`, `axisBottom`, and `axisLeft` APIs to construct the axes, and `line` with `curveCatmullRom` to draw the smoothed path. Data points are rendered as circles, colored conditionally based on intensity thresholds, with grid lines and labels styled via CSS.

AAkshay
68% match