Fork of Read in JSON department files

100%

Fork of Read in JSON department files

✓ Published0🌍 Public

Last edited May 10, 2022

Created on May 10, 2022

Forked from Read in JSON department files

This interactive sunburst diagram visualizes student enrollment across departments, courses, and modules, with each ring segment sized by student count and split by gender. A radio button filter lets users isolate the Communications, Media, and the Arts, Computer Science and Information Systems, or Games and Animations departments. Built with D3 v5, the visualization uses `d3.hierarchy` and `d3.partition` to compute the layout, and `d3.arc` to render the segments with animated transitions on click. The code loads three JSON files—`department_names.json`, `pathways_to_departments.json`, and `courseModules.json`—to construct the hierarchical data.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Read in JSON department files

This interactive sunburst diagram visualizes student enrollment across university departments, courses, and modules, segmented by gender. The visualization aggregates three JSON data sources—department names, course pathways, and module records—into a hierarchical structure rendered as animated arcs. Using D3 v5’s `d3.partition` and `d3.arc`, the chart displays the hierarchy with color-coded segments for each department. Radio buttons allow filtering by department, triggering a transition that updates the displayed arcs. The code employs a `d3.hierarchy` with a `sum` accessor and a `d3.scaleOrdinal` with an interpolated rainbow color scheme.

GGrimsas

91% match

Loading thumbnail…

Read in JSON department files

This example shows a zoomable, animated sunburst diagram that visualizes male and female student counts across courses and modules within three academic departments. Users can filter the view to a specific department via radio buttons, which transitions the hierarchy in response. Built with D3 v5, the visualization loads three JSON files and uses `d3.hierarchy`, `d3.partition`, and `d3.arc` to render the radial layout, with color encoding by department and hover tooltips revealing structural details.

SSurajRepo

89% match

Loading thumbnail…

Read in JSON department files

This interactive sunburst chart visualizes university enrollment data, showing student numbers (male and female) across different departments, courses, and modules. The hierarchical radial layout allows users to click on a department segment to zoom in and explore its specific course and module breakdowns. The visualization is built with D3.js v5, using the `d3.hierarchy`, `d3.partition`, and `d3.arc` APIs to construct and render the radial diagram. The code loads JSON data from three separate files—department names, pathways to departments, and course modules—and uses a promise-based `Promise.all` to load them asynchronously before constructing the hierarchy.

NNourAldinAlmubarak

88% match

Loading thumbnail…

Read in JSON department files

This visualization shows a hierarchical sunburst chart of module enrollments across Teesside University’s departments, courses, and modules, with male and female student counts as leaf values. A set of radio buttons lets the user filter the view to focus on specific departments (CAM, CSIS, GAV) or show all. The code loads three JSON files via `Promise.all` and `d3.json`—department names, course-to-department mappings, and module enrollments—then builds a hierarchical data structure. It uses `d3.hierarchy` and `d3.partition` to compute the sunburst layout, with `d3.arc` for the arcs, `d3.scaleOrdinal` with `d3.quantize` and `d3.interpolateRainbow` for coloring, and renders as an animated SVG with clickable segments.

NNourAldinAlmubarak

87% match

Loading thumbnail…

Read in JSON department files

NNourAldinAlmubarak

87% match

Loading thumbnail…

Read in JSON department files

This example shows the gender distribution of students across university departments, courses, and modules using an interactive partition layout (sunburst) visualization. The circle chart displays hierarchical data from three JSON files—department names, pathways to departments, and course module counts, colored by department. The visualization uses d3.partition, d3.hierarchy, and d3.arc to compute the sunburst’s geometry and SVG rendering with animation on click. A central circle allows zooming back to the root level, while tooltips display course names and student counts. The code uses d3.scaleOrdinal with d3.quantize and d3.interpolateRainbow for colors.

NNourAldinAlmubarak

87% match

Loading thumbnail…

Fork of Read in JSON department files

This interactive visualization displays hierarchical data from three JSON files, representing departmental structures and course modules at Teesside University. It uses a zoomable sunburst layout created with the D3.js v5 partition and arc APIs. Users can filter departments using radio buttons, triggering animated transitions via the `clicked` event handler. The view renders as SVG, with color-coded segments derived from a rainbow scale mapped to top-level department nodes.

Gghjkllgbmvmn

86% match

Loading thumbnail…

Read in JSON department files

A zoomable sunburst visualization displays student enrollment counts by gender across university departments and courses. Three radio buttons filter the view to specific departments. The visualization loads data from three JSON files using `Promise.all` and `d3.json`, building a hierarchical structure with `d3.hierarchy` and `d3.partition`. The code uses `d3.arc` to render the sunburst segments and includes interactive zooming via click handlers.

Llittlenanopichu

86% match