sagayous

@sagayous·7 public vizzes

Fork of Electric Bar Chart Using d3.stack

This D3.js visualization presents two years of personal electricity consumption as a stacked bar chart, with each bar segmented by account number. The x-axis shows the reading date, while the y-axis shows kilowatt-hours used. It uses `d3.stack` to transform the data, `scaleBand` and `scaleLinear` for axes, and `scaleOrdinal` with a category color scheme for the segments. Hovering a bar segment dims it via a mouseover event and reveals an SVG `title` tooltip. The chart renders as an SVG graphic, with data loaded from a CSV source.

May 24, 2023

Loading thumbnail…

Fork of Stack Chart Template

This interactive stacked bar chart visualizes mortality causes in South African countries for 2013, using WHO data. It displays the number of deaths by cause and age group (or by province with three categories in an alternate version), with a radio-button toggle that switches the y-axis between raw death counts and percentages of total illness. Built with D3.js (v3.5.6), the chart uses `d3.layout.stack` to create stacked segments and adjusts its offset to either "zero" or "expand" based on the selected mode. The SVG renders with animated transitions on rectangles and axes.

Apr 26, 2023

Loading thumbnail…

Fork of Total Number of Rockets Throughout The Years

This bar chart shows the total number of rockets launched per year, with each bar segment colored by company name and tooltips displaying both the count and company. The visualization uses the vega-lite-api to define the bar mark and encoding, with data loaded via d3.csv from a Kaggle-derived CSV file. The transform groups records by year and company, then counts them, while the config file customizes axis and label appearance.

Apr 26, 2023

Loading thumbnail…

Fork of Donut Chart - Version 6 - Test

This donut chart displays the distribution of song counts by language, showing the top nine languages individually and aggregating all remaining languages into an "Others" slice. Clicking the "Others" segment replaces the view with a zoomed-in breakdown of those remaining languages. The visualization is built with D3 v6 (including `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` with `d3.schemeTableau10`), renders as an SVG, and uses a custom tooltip for hover details on each slice.

Apr 24, 2023

Loading thumbnail…

Fork of Fork of Donut Chart v2 - Le bon qui fonctionne

This donut chart visualizes the popularity of 36 languages by song lyrics. The chart displays the top five languages as individual slices, while all remaining languages are aggregated into a single "others" slice. Slices are labeled with their language name and total value, and connecting lines help map labels to their respective slices. Built with D3 v4 (d3.pie, d3.arc), the visualization renders as an SVG, pulling data from a local JSON file and using a color scale from d3-scale-chromatic.

Apr 11, 2023

Loading thumbnail…

Fork of Donut Chart v2 - Le bon qui fonctionne

A donut chart displays language popularity by song count, grouping the top five languages into slices and aggregating all others into a single "others" category. The visualization uses d3.pie and d3.arc with an inner radius to create the donut shape, and d3.scaleOrdinal with the d3.schemeDark2 color range. Labels and polylines are positioned using a second outerArc generator, with text anchored based on the mid-angle to align left or right. Data comes from a local data.json file, and the chart is rendered in SVG.

Apr 10, 2023

Loading thumbnail…

Donut Chart v2 - Le bon qui fonctionne

A donut chart displays the popularity of 36 languages from a dataset, but only the top 5 are labeled individually; all remaining languages are aggregated into a single "others" slice. The visualization uses d3.pie and d3.arc to generate the SVG paths, with d3.scaleOrdinal and d3.schemeDark2 for color encoding. Labels and connecting polylines are positioned using arc.centroid and a computed mid-angle, with text anchored left or right based on slice placement. Data is loaded via d3.json.

Apr 10, 2023