Skip to main content
SimilarExport ZIP
100%

Interactive Color Legend_With_Menu_NH_2

✓ Published0🌍 Public
NNavak94
Last edited Mar 25, 2023
Created on Mar 23, 2023

This interactive scatter plot displays daily solar power generation data from Kaggle, plotting maximum wattage against data point (date) for Banneker and Davies solar sites. A drop-down menu switches between sites, while a color legend highlights points by site name and dims unrelated circles on hover. Built with D3 v7, the visualization uses `scaleLinear` for axes, `scaleOrdinal` with `schemeCategory10` for coloring, and custom modules for axes, legend, and menu rendering. The fetched CSV data is parsed and coerced to numeric types before being plotted as circles.

AI-generated description

A scatter plot of solar data from (https://www.kaggle.com/datasets/mattop/daily-solar-power-generation?resource=download)

wherein the y axis is the maximum wattage gotten on a particular data point and the x axis is the data point number (i.e. the date)

MIT Licensed

Similar vizzes

Loading thumbnail…

Interactive Color Legend_With_Menu_NH

An interactive scatter plot visualizes daily solar power generation data from Kaggle, plotting maximum wattage against sequential data points. The visualization uses D3.js v7 with a dropdown menu to filter results by site, and a color legend that highlights specific data categories on hover. The implementation builds the chart from a CSV dataset, using D3's `csvParse`, `scaleLinear`, and `scaleOrdinal` APIs to render axes, circles, and interactive elements.

NNavak94
95% match
Loading thumbnail…

Interactive Color Legend_NH

This interactive scatter plot visualizes daily solar power generation data from Kaggle, showing maximum wattage on the y-axis against data point number (date) on the x-axis. Points are colored by site location using a categorical color scale, with an interactive legend that highlights or dims points when hovering over site names. The visualization uses D3 v7's `scaleLinear`, `scaleOrdinal`, and `schemeCategory10` for scales, with `axisLeft` and `axisBottom` for axes. Data is loaded and parsed from a local CSV file using `csvParse`.

NNavak94
94% match
Loading thumbnail…

Scatter Plot_NH

This scatter plot visualizes daily solar power generation data from Kaggle, plotting each data point by its sequential index on the x-axis against the maximum wattage recorded on the y-axis. The visualization uses D3 v7 with `d3.scaleLinear` for both axes and `d3.axisLeft`/`d3.axisBottom` for tick marks, rendering circles with a fixed radius of 10 pixels. The data is loaded via `d3.csvParse` and includes fields such as watt_max, site location, and date.

NNavak94
84% match
Loading thumbnail…

Scatter Plot_NH_with_legend

This scatter plot visualizes daily solar power generation data from Kaggle, plotting maximum wattage on the y-axis against data point number on the x-axis. The visualization uses d3.scaleLinear to map the data values, with circles rendered at each data point. The code imports axes and scatterPlot components that leverage d3's axisLeft and axisBottom for axis generation. Data is loaded asynchronously via fetch and parsed with d3.csvParse, then converted to numeric fields before being passed to the scatter plot function.

NNavak94
84% match
Loading thumbnail…

Scatter Plot Simple NH

This scatter plot visualizes daily solar power generation data from a Kaggle dataset, showing the maximum wattage produced on the y-axis against the sequential data point number on the x-axis. Each circle represents a single day’s peak output from the Banneker site in Bloomington. The visualization uses D3 v7’s `scaleLinear` and `extent` functions to map the data, with `scatterPlot` handling the circle rendering. Data is loaded asynchronously via `fetch` and parsed with `csvParse`, then converted to numeric values before plotting.

NNavak94
83% match
Loading thumbnail…

Line_graph_NH

This example visualizes daily solar power generation data from a Kaggle dataset, plotting the maximum wattage recorded at each data point (date) as a line graph. The y-axis shows watt max values while the x-axis represents the sequence of data points. The visualization uses D3 v7 with `d3.scaleTime`, `d3.scaleLinear`, and a `d3.line` generator to draw the path. Axes are rendered using D3's `axisLeft` and `axisBottom`, with CSV data loaded via `d3.csvParse` and custom SVG rendering in a full-viewport layout.

NNavak94
79% match
Loading thumbnail…

loading_data_NH_2_solar_data

This visualization displays daily solar power generation data from multiple sites, comparing metrics like watt hours and expected output across different locations. It loads a CSV file containing site information, dates, power measurements, and geographic coordinates, parsing the data with `d3.csvParse`. The visualization renders the raw data as a JSON-formatted pre element using `d3.select` and `selectAll().join()`, showing the data in its text form. The code demonstrates a simple data-loading state machine that fetches the CSV, parses it into typed numeric and string columns, and displays the structured result.

NNavak94
76% match
Loading thumbnail…

Transforming Data_NH

This visualization demonstrates binned aggregation and data transformation techniques using D3.js (v7). It loads solar energy data from a CSV file and computes the average maximum wattage per site address using `flatRollup` and `sum` functions. The resulting summary is displayed as formatted JSON text within a `<pre>` element, showcasing how raw tabular data can be programmatically summarized. The example uses D3's `csvParse` for data parsing and `select` for DOM manipulation.

NNavak94
74% match