Fork of d3.js learning

100%

Fork of d3.js learning

✓ Published0🌍 Public

Last edited Jun 24, 2021

Created on Jun 24, 2021

This stacked bar chart visualizes survey data on gadget usage, showing how different work statuses (such as Employed and School Student) rate various motivations like "Winning" and "Having Fun." The chart uses d3.layout.stack to layer series representing each motivation, with d3.scale.ordinal and d3.svg.axis handling the x and y axes. SVG rectangles render each segment, and a tooltip displays the average gadget value on mouseover. A legend at the right identifies the series, with data from dataset.csv.

AI-generated description

A bare minimum HTML page.

Similar vizzes

Loading thumbnail…

Fork of Fork of Exploring survey data interactively - y-axis

An interactive bar chart explores survey data by displaying average values for student interest groups, with a dropdown menu to select which variable appears on the y-axis. The visualization uses d3.json to load survey data and d3.nest to aggregate it, while d3.scaleBand and d3.scaleLinear handle the axes. The chart updates dynamically through the general update pattern, redrawing bars and the y-axis via selectionChanged when a new variable is chosen. SVG rendering and d3.axisLeft and d3.axisBottom provide the visual layout.

DDhiva21

78% match

Loading thumbnail…

Fork of Fork of Fork of Rendering Data with React & D3

This visualization displays a horizontal bar chart comparing student marks, using a dataset loaded from a CSV file and limited to the first 10 students. The chart renders as an SVG, with blue bars representing each student’s score on a linear scale, while a band scale positions the student names on the y-axis. The code combines React hooks for state management and data loading with D3 utilities such as `csv`, `scaleBand`, `scaleLinear`, and `max` to compute scales and render tick marks and rectangles.

Kkirangithub23

78% match

Loading thumbnail…

d3.js learning

This stacked bar chart visualizes yearly fruit consumption data from a CSV-like dataset, tracking redDelicious apples, McIntosh apples, oranges, and pears. It uses `d3.layout.stack` to compute layered series and `d3.scale.ordinal` for the x-axis years, with SVG rects for bars. Hovering reveals a tooltip with the value via mouse events. A legend identifies the four categories with custom labels, while `d3.svg.axis` renders gridlines and axes.

Ttayyabanisar

78% match

Loading thumbnail…

d3.js learning

Ttayyabanisar

78% match

Loading thumbnail…

d3.js learning

This example shows a stacked bar chart of fruit consumption over time, using d3.v3 with SVG rendering and React integration. The visualization displays four categories (redDelicious, mcintosh, oranges, and pears) as stacked layers, with a tooltip revealing individual segment values on mouseover. The code uses d3.layout.stack() to transpose data, d3.time.format for year parsing, and d3.svg.axis for both x and y axes, building the chart with svg rect elements and a custom legend.

Ssafdarawan

78% match

Loading thumbnail…

Fork of React Starter

This interactive bar chart visualizes internet usage percentages across countries, with controls to filter by year and select the top 20, bottom 20, or countries surrounding a user-specified nation. Built with React and D3 v7, it renders an SVG using d3.scaleBand and d3.scaleLinear, and updates the chart via d3.select and data joins. Hovering over bars triggers a tooltip displaying the exact percentage, while input fields and dropdown menus drive the filtering logic. The data comes from a CSV file fetched with d3.csv.

YYI-CHENG-SHIH645

77% match

Loading thumbnail…

Fork of d3.js learning

This stacked bar chart visualizes the relative proportions of four fruit types (redDelicious, mcintosh, oranges, and white) across the years 2006 to 2016. Each bar segment represents the quantity of a fruit per year, with colors mapping each category. The chart uses d3.layout.stack to stack the series, along with d3.scale.ordinal for the x-axis and d3.scale.linear for the y-axis. Axes are rendered with d3.svg.axis, and the SVG output is styled with CSS. The data is embedded as an array of objects in the code.

RRohit-2710

77% match

Loading thumbnail…

Fork of HW5: Stacked Bar Charts

This stacked bar chart visualizes survey responses about opinions across multiple universities, using the D3.js library. The chart displays the distribution of five opinion categories—ranging from "Tout à fait d'accord" (strongly agree) to "Pas du tout d'accord" (strongly disagree)—for each institution, with each category represented by a distinct color in the stacked bars. An interactive dropdown menu allows users to select a specific opinion, and a second dropdown enables sorting of the bars in ascending or descending order, with a confirm button to apply the changes. The visualization uses SVG rendering within a React framework, featuring a legend with hover effects that highlight the corresponding segments of the stacked bars. This example demonstrates D3's stack layout for grouped categorical data and interactive chart controls.

Oobope@proton.me

77% match