Skip to main content
SimilarExport ZIP
100%

Assignment 2.2

✓ Published0🌍 Public
Ppjdhungana@gmail.com
Last edited Jul 21, 2023
Created on Jul 14, 2023
Forked from Hello VizHub

A stacked bar chart displays monthly sales data from a CSV file, showing both quantity and amount per month in two color-coded segments. The visualization uses D3.js with SVG rendering, loading data via `d3.csv` from a GitHub gist. The chart leverages `d3.scaleBand` for the categorical month axis, `d3.scaleLinear` for the numeric amount axis, and `d3.scaleOrdinal` for color assignment. It includes manually positioned axis labels, a title, and a legend built with SVG rectangles and text. The styling uses custom fonts and colors defined in a separate CSS file.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

Assignment_2_Task_2_Stacked_Bar_Chart

This stacked bar chart visualizes sales data across market segments, with each bar segmented by product sub-category. The visualization uses D3.js to load CSV data and render an SVG, featuring an interactive color legend that filters and highlights specific sub-categories on hover. The chart includes tooltips showing exact sales values and uses d3.legend for the color key, while the stack layout computes cumulative values for each segment.

Ssreekarthanda@gmail.com
83% match
Loading thumbnail…

Simple d3.js bar chart

This simple d3.js bar chart displays monthly values over a two-year period, with each bar representing a data point from a CSV file. The visualization uses d3.scale.ordinal and d3.scale.linear to map categorical dates and quantitative values, respectively, to pixel positions. Axes are rendered with d3.svg.axis, while the bars themselves are drawn as SVG rectangles with a steelblue fill. The chart includes a navigation interface with circular arrow buttons and a detail area, though the interaction logic is incomplete. Data comes from the external file bar-data.csv, and the visualization is built using the D3 version 3.5.17 library.

PPatrick Wojda
80% match
Loading thumbnail…

Assignment 2 - Stacked Bar

A stacked bar chart displays crash ratings for 24 car makes across five rating levels, with each bar segmented by color to show the proportion of one-to-five-star ratings. Loading CSV data with values between zero and one, the visualization uses D3 v7's `d3.stack()` and `d3.scaleOrdinal` to map rating categories to colors. Hovering over a segment reveals a tooltip with the exact percentage and rating. The SVG renderer includes a legend, axis labels, and a title, styled with custom CSS.

Ppasyasahas
80% match
Loading thumbnail…

Stacked Bar Graph

This example shows a stacked bar graph where each bar represents a total value composed of three categorical segments, using data from an external CSV file. The visualization renders as an SVG chart with a light gray background, axes, a title, and a color-coded legend. It loads the dataset with `d3.csv`, transforms the columns into numeric values, and uses `d3.stack` to arrange the segments. The chart draws rectangles via SVG and scales the axes using `d3.scaleBand` and `d3.scaleLinear`, with colors assigned by `d3.scaleOrdinal` and `d3.schemeCategory10`.

NNukaShravanKumar
79% match
Loading thumbnail…

Stacked_Bar_chart

This example presents a stacked bar chart of randomly generated product sales data across six months. The chart visualizes sales for ten product categories, with each bar segmented by month using a categorical color scheme. Built with D3.js v7, the code generates data on the fly and renders the visualization as an SVG. The implementation uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.schemeCategory10` for color assignment, along with D3's axis helpers for labeling.

Ppardha1411
79% match
Loading thumbnail…

stacked bar

A stacked bar chart displays records published by month in 2015, broken into four categories: Geographic, Dataset, Application, and WebService. The chart uses D3.js (v3.5.5) to load the CSV data from `views.csv`, compute cumulative y-values for each segment, and render colored rectangles per category. An ordinal x-scale maps months, a linear y-scale encodes total counts, and a legend identifies the color-coded categories. The SVG rendering includes axes formatted with the `.2s` tick format and uses `d3.svg.axis` for the bottom and left axes.

MMbrownshoes
79% match
Loading thumbnail…

Stacked Bar Chart with D3.js

This stacked bar chart visualizes monthly sales data for ten products, with each bar segmented by month. The example uses D3.js v7 to generate random data, render SVG rectangles for the bars, and apply `d3.scaleBand` and `d3.scaleLinear` for positioning. Color encoding via `d3.scaleOrdinal` with `d3.schemeCategory10` distinguishes months, while axes, labels, and a legend are added using `d3.axisBottom` and `d3.axisLeft`.

Ssaikrishnabussa
79% match
Loading thumbnail…

Assignment2 Stacked Bar Chart

This stacked bar chart visualizes sales costs aggregated by department, item category, and sales type using a hardcoded dataset. The chart groups bars by department, with sub-bars representing item categories and segments distinguishing domestic versus international sales. It uses D3.js v7 with SVG rendering, leveraging `d3.group` for data aggregation and `d3.scaleBand` and `d3.scaleLinear` for positioning. Color scales differentiate departments across sales types, while axes and labels clarify the department and cost dimensions, though international segments are stacked alongside domestic totals.

Cchsaisriharsha@gmail.com
79% match