Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published0🌍 Public
Xxiaojingwu138
Last edited Jul 31, 2023
Created on Jul 31, 2023
Forked from D3 Starter

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.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Document

This interactive line chart shows the annual growth in U.S. electricity generation from Solar and Gas sources from 2012 to 2021. Users click buttons to toggle between the two datasets, triggering a transition that updates the axes and line path. Built with D3 v4, it uses `d3.line`, `d3.axisBottom`, and `d3.axisLeft` with linear scales, plus SVG transitions and a tooltip for mouseover values. Data comes from the provided `data.csv`, with hardcoded arrays in `vis.js` for each energy source.

Xxiaojingwu138
85% match
Loading thumbnail…

Climate Change and Energy Consumption Change in U.S.

A stacked bar chart shows the annual change in U.S. primary energy source growth rates (Solar, Coal, Gas, Nuclear) from 2012 to 2021, with tooltips revealing exact values on hover. Built with D3 v5, it uses `d3.layout.stack()` and `d3.scale.ordinal()` to render SVG rectangles, with axes and a legend. The visualization highlights how energy consumption patterns shift over the decade, reflecting climate-related trends. Data is embedded directly in the code as arrays, and interactivity is implemented via mouseover and mousemove events.

Xxiaojingwu138
81% match
Loading thumbnail…

Untitled

This interactive stacked bar chart displays state-level data across two years. A dropdown menu selects the year, and the visualization animates the transition between the 2017 and 2018 views. The chart uses a categorical color scale to distinguish three data ranges. The code leverages D3 v5 APIs including `d3.csv`, `d3.scaleBand`, `d3.scaleLinear`, and `d3.stack`. Built with SVG elements, the bars and their total value labels are rendered directly, with a 750ms transition on year change.

JJens Grochtdreis
78% match
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
77% match
Loading thumbnail…

Untitled

This interactive stacked bar chart displays the distribution of three categories across U.S. states for a selected year, with a dropdown menu to switch between years. The visualization uses D3.js v5’s `d3.csv` to load data, `d3.scaleBand` and `d3.scaleLinear` for axes, and `d3.stack()` to compute stacked segments. Animated transitions (via `transition().duration()`) smoothly update bar heights and axis labels. Total values for each state are shown above the bars. The SVG rendering includes axis groups and colored layers, with the year selector populated from the dataset.

Pp189
76% match
Loading thumbnail…

Untitled

This interactive stacked bar chart displays survey data across U.S. states for two years, showing proportions within three rating categories. A dropdown menu lets viewers switch between 2017 and 2018, triggering animated transitions of the bars, axes, and total-value labels. Built with D3 v5, the visualization uses `d3.stack()` to generate the layered series, `d3.scaleBand()` and `d3.scaleLinear()` for positioning, and SVG transitions with `transition.duration()` for smooth updates.

Pphamiter253
76% match
Loading thumbnail…

D3 Diverging Color Bar Chart

This interactive D3 bar chart visualizes the percentage change in natural gas consumption by the electric power sector across eleven U.S. states, with bars diverging from a central zero axis. Each bar’s fill color reflects the magnitude and direction of change using a sequential color scale based on the `interpolateRdBu` interpolator. The chart employs `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for both the horizontal value scale and bar lengths, and `d3.axisBottom`, `d3.axisLeft`, and `d3.axisRight` for axis ticks. A `d3.legendColor` legend with nine cells maps the color scale to the numeric range. Data is loaded from a CSV file via `d3.csv`.

Mmariahdiaz
76% match
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
76% match