InfoVis - Assignment 4

100%

InfoVis - Assignment 4

✓ Published0🌍 Public

Last edited Jul 10, 2023

Created on Jul 9, 2023

This example shows a bar chart of energy source production in billion kWh for the year 2022, using data from a local CSV file. The visualization highlights the magnitude of each energy type, with data labels displayed above each bar. Built with Chart.js, the chart uses the canvas rendering API, with custom plugins handling the top labels. The page also includes responsive CSS media queries that adjust the chart’s dimensions and label rotation across different screen widths. The code fetches the CSV, parses it, and maps the seventh column to the chart’s dataset.

AI-generated description

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

Similar vizzes

Loading thumbnail…

Untitled

This bar chart displays monthly electricity consumption for a two-year period, using green and blue bars to represent different billing accounts. The visualization loads data from a local CSV file and renders an SVG graphic using D3.js version 3.5.17. The code employs d3.scale.ordinal for the x-axis, d3.scale.linear for the y-axis, and d3.svg.axis for tick marks and labels. Month and year values are parsed with d3.time.format, while the vertical axis label is rotated using SVG transforms.

Vvenkatajayanth03

73% match

Loading thumbnail…

Untitled

This visualization shows the average share of renewable energy production from 2000 to 2020 across EU member states, with each year plotted as a green vertical bar. The bar heights are scaled proportionally to the data’s maximum value, and axis tick labels appear at intervals rounded up to the nearest five. Built with p5.js, the sketch loads a CSV dataset via `loadTable`, draws axes and gridlines using Canvas drawing functions like `line` and `rect`, and spaces bars dynamically based on row count and available chart width.

SSnigdha6698

72% match

Loading thumbnail…

Untitled

An interactive bar chart displays the growth rate change in U.S. energy sources from 2012 to 2021, with buttons to toggle between Solar and Gas datasets. The visualization shows outlined, red-stroked bars in an SVG, where each bar’s height represents the annual emission growth value. Using D3 v4, the code implements `d3.scaleBand()` for the x-axis, `d3.scaleLinear()` for the y-axis, and transitions that animate axis updates over 2.5 seconds. A tooltip appears on mouseover, and the chart title and axis labels update dynamically based on the selected energy source.

Xxiaojingwu138

71% match

Loading thumbnail…

barChart

This example displays a vertical bar chart of carbon intensity data (gCO2/kWh) for 2020, loaded from a CSV file hosted on a GitHub gist. Each bar’s height represents a data value, with categorical labels drawn beneath the bars and a rotated axis title at the bottom left. The visualization is built using the p5.js library, with custom functions `drawTickYAxes` and `drawTickXAxes` that render grid lines and tick marks on the plot. A maximum value from the data drives the y-axis scale, labeled in increments of 50.

Hhollyjpotter

71% 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

71% match

Loading thumbnail…

ICE6

This stacked bar chart visualizes two years of personal electricity consumption across multiple accounts in a three-family structure, with green and blue bars representing different meter readings. The code uses React with d3-scale-band and d3-scale-linear scales, d3.stack for stacking, and SVG rendering to display the data. The chart loads CSV data from a GitHub gist and includes labeled axes, a legend, and a vertical y-axis label. It employs d3.csv for data loading and d3.max for computing the domain, with the visualization showing account-specific usage patterns over time.

SSnigdha6698

71% match

Loading thumbnail…

Green house gas bar chart

This visualization displays greenhouse gas emissions by country using a bar chart, with the data loaded from a CSV file containing country names and population figures. The chart renders as SVG elements within a React component, drawing only the X and Y axes as black lines using basic SVG line elements. The code relies on React hooks (useState, useEffect) and the d3.csv function to fetch and parse the data, while d3.v5 is loaded via CDN. The visualization uses a fixed 450×450 pixel SVG canvas with no bars actually drawn, showing only the coordinate system and data loading foundation.

VVikil Lakkavatri

70% match

Loading thumbnail…

Activity 7

This example displays a horizontal bar chart of population data for 20 countries in 2020, using green bars sorted by country name along a categorical y-axis and a linear x-axis with tick labels formatted in billions. Built with React and D3 v5, it loads CSV data via `d3.csv`, scales with `scaleBand` and `scaleLinear`, and renders SVG bar marks, axes, and a title using local ES6 modules for reusable axis and mark components.

Aanith462@gmail.com

70% match