Skip to main content
Log in
K

kechapasiin

@kechapasiin·4 public vizzes

Loading thumbnail…

Example of Electric Bar Chart Using d3.stack

This stacked bar chart visualizes two years of personal electricity consumption across three accounts. It displays monthly total kilowatt-hours, segmented by account number. Built with D3.js v7 and the d3-scale-chromatic library, the visualization uses `d3.stack` to transform the input data and `scaleBand` and `scaleLinear` for axes. The SVG rendering includes interactive hover effects that change bar opacity and show a tooltip with individual consumption values. Colors distinguish accounts via `scaleOrdinal` and `d3.schemeCategory10`.

Feb 16, 2023
Loading thumbnail…

Example of Electric Bar Chart Using d3.stack

This stacked bar chart visualizes two years of personal electricity consumption across three accounts. It displays monthly total kilowatt-hours, segmented by account number. Built with D3.js v7 and the d3-scale-chromatic library, the visualization uses `d3.stack` to transform the input data and `scaleBand` and `scaleLinear` for axes. The SVG rendering includes interactive hover effects that change bar opacity and show a tooltip with individual consumption values. Colors distinguish accounts via `scaleOrdinal` and `d3.schemeCategory10`.

Feb 16, 2023
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.

Feb 16, 2023
Loading thumbnail…

[Continue] Campaign Timeframe

This interactive visualization displays the number of events occurring per day over varying campaign timeframes, with buttons to toggle between 15, 30, and 60-day periods. The line chart, rendered as an SVG, uses smooth transitions to animate the path's shape and axis scales as new data loads from CSV files. The visualization is built with D3 v6, leveraging functions like `d3.csv` for data import, `d3.scaleLinear` for axes, and `d3.line` for generating the path. The data originates from the Data Canvas Sense Your City dataset.

Feb 2, 2023