Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published0🌍 Public
Ddiegobrivo
Last edited Aug 11, 2022
Created on Aug 11, 2022
Forked from D3 Starter

This example combines stacked bar charts and a step-after line graph to compare gas and electrical emissions (kgCO2) with normalized costs across properties. It uses D3 v3 with SVG rendering, reading data from a TSV file. The chart employs ordinal and linear scales, dual y-axes, and d3.svg.axis for ticks, while d3.svg.line defines the cost line with interpolation. Legend rectangles and value labels clarify the two categories.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

A stacked bar chart shows annual CO2 emissions for properties, with segments for gas and electrical sources, alongside a step-after line tracking normalized costs on a second axis. Data from a tab-separated CSV file includes property names, emission values, and cost metrics. The visualization uses d3.svg.axis for dual left and right axes, d3.scale.ordinal for property positioning, and d3.svg.line with step-after interpolation for the cost overlay. Dots mark the exact cost values, and a legend identifies the two emission categories.

Ddiegobrivo
90% match
Loading thumbnail…

Untitled

A line chart shows the annual value of CO2 emissions from 1995 to 2014, with each year represented by a white circle with a teal outline. The circles change their stroke to black on hover, and a tooltip displays the exact value for each point. The visualization uses D3 v4 to read the CSV data, build a time-scale X axis and a linear Y axis, and draw a smoothed curve using `d3.line()` with `curveBasis`. The SVG output includes axes, circles, and the path, while the tooltip is appended as an HTML div in the page.

Llamiyaa
75% 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
75% match
Loading thumbnail…

Untitled

This example shows a stacked bar chart comparing values across three groups, with each bar subdivided into three colored segments representing different subgroups. The chart reads data from a CSV file hosted on GitHub, parsing it with `d3.csv` and mapping groups to the x-axis and numeric values to the y-axis. It uses `d3.scaleBand` for both group and subgroup positioning, `d3.scaleOrdinal` for the categorical color palette, and `d3.axisBottom` and `d3.axisLeft` to render the axes. The SVG output is built via D3's selection and append methods, with each group translated into position and rectangles drawn per subgroup.

Vvveewwee
75% match
Loading thumbnail…

Stacked Bar - 29/06

This example visualizes the greenhouse gas emissions of major US companies, breaking down each company's total emissions into scope 1, 2, and 3 categories as stacked bars. The chart, built with D3 v5 and rendered as SVG in a React context, uses `d3.csv` to load the mock data and `d3.scaleBand` and `d3.scaleLinear` to map company names and emission values to positions. A dashed line marks the average total emissions across all companies, while hovering over any bar segment reveals its specific value via an appended `title` element.

Bbertieip
74% match
Loading thumbnail…

Electric Bar Chart Before Stack Refactoring

This bar chart visualizes personal electricity consumption across two years, with bars colored by account number to distinguish usage among three household accounts. Rendered in SVG with D3 v6, the visualization uses `scaleBand`, `scaleLinear`, and `scaleOrdinal` to position and color the bars, with hover interactions transitioning fills to grey. Data is loaded via D3’s `csv` from a GitHub gist, and axis labels, a title, and a legend are generated using `axisLeft`, `axisBottom`, and custom text elements.

PPeter Cordone
74% match
Loading thumbnail…

Electric Bar Chart Using d3.stack

This stacked bar chart visualizes two years of personal electricity consumption across three accounts in a three-family structure, with each bar showing monthly kilowatt-hours segmented by account number. Built with D3.js v7, it uses `d3.stack()` to transform grouped data into stacked series, `scaleBand()` and `scaleLinear()` for axes, and `scaleOrdinal()` with `d3.schemeCategory10` for colors. The SVG rendering includes rotated axis labels, a title, and a legend, with tooltips implemented via SVG `<title>` elements showing per-account usage.

PPeter Cordone
74% match
Loading thumbnail…

Untitled

This example demonstrates a stacked bar chart built with D3.js, loading the library from UNPKG. The chart uses `d3.stack`, `d3.scaleBand`, and `d3.scaleOrdinal` to arrange categories. The rendering shows how to structure a D3 visualization project with local ES6 modules, including a separate file for a simple message. The displayed chart uses divergent stacking, color-coded series, and axis gridlines, while the HTML page also includes a separate message text.

JJoshua Higginbotham
74% match