Skip to main content
SimilarExport ZIP
100%

CSCE 5320 HW5 - Campus Buildings and Energy

✓ Published0🌍 Public
TTEJA P C
Last edited Sep 26, 2026
Created on Sep 24, 2026
Forked from HTML Starter

This interactive scatterplot visualizes campus building energy usage, plotting each structure by floor area and energy consumption. Users filter data by building type or energy source via toggle buttons. The visualization updates dynamically, using D3 v7 scales, axes, and SVG circles as marks, with hover interactions displaying detailed building information in a side panel. A summary statistics section shows aggregated values, and the chart is styled with a warm, editorial color palette and serif headlines.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This interactive line chart displays energy consumption data across multiple building sites, allowing users to switch between locations via a dropdown menu. The visualization employs an SVG-rendered multi-series plot with a smooth animated transition when a new site is selected. The code uses `d3.csv` for data ingestion, `d3.scaleLinear` for axes, `d3.line` for plotting, and `d3.transition` to animate changes. A color scale assigns distinct hues to each site. The chart reveals periodic patterns in usage, with site 7 showing notable gaps where zero consumption was recorded.

KKeerthiKandadai
75% match
Loading thumbnail…

reusable

This interactive scatter plot visualizes city-level energy metrics, comparing population against CO₂ emissions while using color to represent renewable energy adoption buckets (low, medium, high). The chart cycles through five different x-axis variables every three seconds, including electricity consumption, renewable percentage, and temperature, with smooth updates via D3’s data joins. Built with d3.v7, the reusable scatterPlotFactory pattern manages scales, axes, and a categorical color legend, rendering animated SVG marks that re-position as the axis changes. The dataset is fetched from a remote CSV and parsed client-side.

Sshreelasya.bezawada@gmail.com
73% match
Loading thumbnail…

CSCE 5320 HW5 - Cars Visualization

This interactive scatterplot explores the relationship between new-car price and fuel efficiency, with horsepower mapped to circle size and segment assigned to color. Users can switch between three visual encodings via control buttons: position-only, color-coded by segment, and a version that adds labels. Built with D3.js v7, the SVG chart fetches data from a CSV file, renders axes and legends dynamically, and includes a hover tooltip. A summary panel highlights the position of a specific vehicle, the Porsche 718 Cayman.

RRakesh vilasagaram
71% match
Loading thumbnail…

V5- OK at the mo - bar

A grouped bar chart displays total monthly energy consumption in kilowatt-hours for several building sites, with each bar representing a site's aggregate usage and color highlighting individual sites. The visualization uses D3 v5 with an SVG rendering, a band scale for site positioning, and a linear scale for the y-axis. Data is loaded from a CSV file, parsed with d3.timeParse, and aggregated using d3.nest() to compute site totals. Interactive tooltips appear on mouseover to show the precise consumption value, while bar hover effects change their fill color to orange.

Mmab3105
70% match
Loading thumbnail…

Reusable Scatter Plot

This visualization explores global city energy and demographic data using a reusable D3 scatter plot component. It displays cities as colored symbols (triangles, squares, diamonds, circles) based on their renewable energy adoption, with a legend categorizing values from low to very high. The example animates by cycling the X-axis through population, temperature, CO2 emissions, and renewable energy percentage every three seconds, while the Y-axis remains electricity consumption. The code imports D3 v6 modules via `select`, `text`, `csvParse`, `scaleLinear`, `axisLeft`, `axisBottom`, and `symbol` to build the custom SVG visualization, reading data from a gist-hosted CSV.

Sshreelasya.bezawada@gmail.com
70% match
Loading thumbnail…

CSCE 5320 HW6 - Q2 Animation

This interactive scatterplot animates multi-cloud service performance by cycling through frames grouped by service type, plotting CPU utilization against throughput for each provider. The animation displays one frame at a time with pause/play controls, a frame label, and a tooltip; the data comes from a CSV loaded via `d3.csv`. Built with D3 v7, it uses `scaleLinear`, `scaleOrdinal` with `d3.schemeTableau10`, SVG axes, and employs a timer to update transitions between frames.

SSatya Tej Kammili
70% match
Loading thumbnail…

CSCE 5320 HW5 - Ice Cream Shop Visualization

This interactive scatter plot visualizes the menu performance of an ice cream shop, mapping price and weekly orders for each item. The color of the circles encodes the menu category, while point size reflects preparation time, and a chocolate scoop is highlighted. Built with D3 v7, the visualization is rendered as SVG. The code loads a CSV dataset from a GitHub gist and populates a summary panel with computed statistics like mean and median weekly orders.

GGuduru Naga Tejaswi
69% match
Loading thumbnail…

Untitled

A small-multiple area chart displays monthly energy consumption across different sites, with each panel representing a distinct location. The visualization uses D3.js v4 to load data from a CSV file, parse the time series, and render a separate small SVG chart for each site. The code employs d3.nest() to group data by site, d3.line() for path generation, and d3.scaleOrdinal() for color encoding, with axes rendered per chart.

Mmab3105
69% match