Skip to main content
SimilarExport ZIP
100%

Fork of Read in JSON department files

✓ Published0🌍 Public
Gghjkllgbmvmn
Last edited May 4, 2022
Created on May 4, 2022

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Read in JSON department files

This example presents a zoomable sunburst visualization of Teesside University’s academic structure, showing departments, their courses, and course modules as nested arcs. It loads three JSON files—department names, pathways to departments, and course modules—and merges them into a hierarchical tree. Using d3.partition and d3.arc, the sunburst lays out nodes by angle and radius, while d3.hierarchy computes the layout from the aggregated data. Clicking arcs triggers a zoom transition via transition.attrTween, re-scaling the visualization around the selected node. The view applies a rainbow color scale to top-level departments and renders labels with conditional visibility.

NNourAldinAlmubarak
88% match
Loading thumbnail…

Read in JSON department files

This visualization presents a hierarchical sunburst chart of student enrollment data across Teesside University’s departments, courses, and modules, broken down by gender. It uses `d3.partition` to compute the layout and `d3.arc` for rendering SVG path segments, with animated zooming via click interactions and `transition` updates. The data comes from three JSON files (department names, pathways, and course modules), which are loaded using `Promise.all` and `d3.json`, and colored with a `d3.scaleOrdinal` interpolated rainbow scale based on department hierarchy.

NNourAldinAlmubarak
87% 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

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…

Fork of 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.

Sshivaambattu
86% 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
84% 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
83% match
Loading thumbnail…

Read in JSON department files

This visualization shows the enrollment distribution of male and female students across courses and modules within academic departments at Teesside University. Users can filter the view by department using radio buttons for All, CAM, CSIS, or GAV. The data is loaded from three JSON files using `Promise.all` and `d3.json`, then structured into a hierarchy. A sunburst layout, rendered with SVG paths via `d3.partition` and `d3.arc`, displays the data, with clickable segments and animated transitions on filter change using `d3.v5`.

NNourAldinAlmubarak
83% match