Fork of D3 Starter

100%

Fork of D3 Starter

✓ Published0🌍 Public

Last edited Oct 19, 2025

Created on Oct 19, 2025

This example displays a bar chart of average energy consumption by household appliance, sourced from a CSV file. It uses D3 v7 to load the data, construct linear and band scales, and render SVG rectangles for the bars, with rotated axes labels. The visualization adds a descriptive title and applies a blue fill to each bar via the `d3.scaleBand` and `d3.scaleLinear` APIs.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of D3 Starter

This example shows a bar chart of average temperatures by city, rendered as an SVG with a steelblue fill for each bar and an orange hover highlight. It loads data from a CSV file and uses D3 v3’s `scaleBand` and `scaleLinear` to position bars, while `axisBottom` and `axisLeft` add labeled axes with a thinned tick list. The chart is built on an 800×500 canvas with margins, a title, and sans-serif styling from a separate CSS file. The code imports the D3 library via a module script and includes a minimal `index.js` that writes a placeholder text.

Jjanisha30gowda@gmail.com

82% match

Loading thumbnail…

Fork of Fork of Electric Bar Chart Using d3.stack

This stacked bar chart visualizes two years of personal electricity consumption across three accounts (household floors and common areas). The data comes from CSV files processed with `d3.group` and `d3.stack`, mapping account numbers to stacked segments per reading date. Rendered in SVG, it uses `scaleBand` for months on the x-axis and `scaleLinear` for kilowatt-hours on the y-axis, with `scaleOrdinal` and `d3.schemeCategory10` assigning colors. Rectangles include hover opacity changes and SVG `<title>` tooltips showing segment amounts. Colors are green and blue, with a title and vertical axis label.

RRadhakrishna246

82% match

Loading thumbnail…

Fork of D3 Starter

This example creates a static bar chart visualizing food-related data from an external CSV file. It uses D3 v7 scales and axes—`d3.scaleBand`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`—to map years and values, with y-axis labels formatted as dollar amounts. The chart is drawn inside an SVG with a fixed margin, and the data is loaded asynchronously via `d3.csv`. Only the axes are rendered; no bars or other marks are added.

Mmavercikalvin

81% match

Loading thumbnail…

Fork of Fork of D3 Starter

This example presents an average monthly sales bar chart, displaying sales data from a CSV file across repeated calendar years. The visualization aggregates repeated monthly entries into bars, showing the overall sales distribution for each month. Built with D3 v7, the code loads data via `d3.csv`, maps sales values to numbers, and constructs the chart using `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis. SVG rectangles represent each bar, while `d3.axisBottom` and `d3.axisLeft` render the axes, with a title added as an SVG text element.

KKOLLIPATI NIKHIL

81% match

Loading thumbnail…

Home Appliances

A bar chart displays the average energy consumption in kilowatt-hours for each appliance type, using data from a 100-row CSV dataset of home electric appliance usage. The chart sorts appliances by descending average kWh and colors each bar distinctly, with a tooltip on hover showing the exact value. Built with D3 v7, the visualization uses `d3.csv` to load data, `d3.rollups` and `d3.mean` for aggregation, and `scaleBand` and `scaleLinear` for axes. Bars animate upward on load via a `transition()`, and dashed gridlines, rotated axis labels, and rounded bar corners enhance readability.

Mmaddulanagasanjana@gmail.com

81% match

Loading thumbnail…

Fork of Electric Bar Chart Using d3.stack

This stacked bar chart visualizes two years of personal electricity consumption across multiple accounts in a three-family building. The visualization uses d3.stack to layer consumption by account number for each monthly reading, with green and blue color encoding distinguishing accounts. Built with d3-scaleBand, d3-scaleLinear, and d3-scaleOrdinal, the chart renders as SVG with animated hover effects that adjust bar opacity and display tooltips showing kilowatt-hour values. The code imports data via d3.csv and utilizes d3-scale-chromatic for the color scheme.

DDINESH SAI BOPPANA

80% match

Loading thumbnail…

Fork of Electric Bar Chart Using d3.stack

A stacked bar chart displays two years of personal electricity consumption across multiple household accounts, with each bar segmented by account number and colored via d3.scaleOrdinal with d3.schemeCategory10. The visualization uses d3.stack to transform grouped CSV data by read date, then renders SVG rectangles with d3.scaleBand and d3.scaleLinear axes. Interactive hover effects change bar opacity and show a tooltip via appended title elements, while axis labels and a legend clarify account mappings.

JJyothicherukuri

80% match

Loading thumbnail…

Fork of Fork of Electric Bar Chart Using d3.stack

This visualization displays two years of personal electricity consumption across multiple household accounts, shown as stacked bar charts organized by month. Each month’s bar is segmented by account number, with green and blue colors distinguishing the accounts, and hovering reveals exact kilowatt-hour values via tooltips. The code uses d3.stack to transform the dataset, d3.scaleBand and d3.scaleLinear for axes, and d3.scaleOrdinal with d3.schemeCategory10 for colors. It renders with SVG, includes a legend, and is built from a CSV data file.

Kkechapasiin

80% match