Skip to main content
SimilarExport ZIP
100%

Read in JSON department files

✓ Published1🌍 Public
NNourAldinAlmubarak
Last edited Apr 24, 2020
Created on Apr 24, 2020

This example shows a zoomable sunburst chart of student enrollment data by department, course, and module, with a breakdown of male and female students. A radio button selection allows users to choose a department for focus. The data is loaded from three JSON files using `Promise.all` with `d3.json`. The visualization uses D3 v5’s `d3.partition`, `d3.hierarchy`, and `d3.arc` to render the SVG-based radial layout, with click interactions to zoom and animate through the hierarchy. Colors are assigned via `d3.scaleOrdinal` with a rainbow interpolator.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Read in JSON department files

This example shows a zoomable sunburst chart of student enrollment data by department, course, and module, with a breakdown of male and female students. A radio button selection allows users to choose a department for focus. The data is loaded from three JSON files using `Promise.all` with `d3.json`. The visualization uses D3 v5’s `d3.partition`, `d3.hierarchy`, and `d3.arc` to render the SVG-based radial layout, with click interactions to zoom and animate through the hierarchy. Colors are assigned via `d3.scaleOrdinal` with a rainbow interpolator.

NNourAldinAlmubarak
100% match
Loading thumbnail…

Read in JSON department files

This example shows a zoomable sunburst chart of student enrollment data by department, course, and module, with a breakdown of male and female students. A radio button selection allows users to choose a department for focus. The data is loaded from three JSON files using `Promise.all` with `d3.json`. The visualization uses D3 v5’s `d3.partition`, `d3.hierarchy`, and `d3.arc` to render the SVG-based radial layout, with click interactions to zoom and animate through the hierarchy. Colors are assigned via `d3.scaleOrdinal` with a rainbow interpolator.

NNourAldinAlmubarak
100% 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
94% 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
92% 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
91% 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
91% 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
90% 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
90% match