Skip to main content
Log in
N

NourAldinAlmubarak

@NourAldinAlmubarak·12 public vizzes

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`.

May 5, 2020
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.

Apr 24, 2020
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.

Apr 24, 2020
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.

Apr 24, 2020
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.

Apr 24, 2020
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.

Apr 24, 2020
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.

Apr 24, 2020
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.

Apr 23, 2020
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.

Apr 23, 2020
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.

Apr 21, 2020
Loading thumbnail…

Read in JSON department files

This example reads course and department data from two JSON files and displays a sunburst chart using D3 v5. It loads the files with `Promise.all` and `d3.json`, then partitions the hierarchical data with `d3.partition` and renders it as SVG arcs via `d3.arc`. The visualization shows department and course names as labeled, colored slices, with interactive transitions on click using `transition.attrTween` to smoothly update the layout. Rotation logic in `computeTextRotation` orients labels to avoid upside-down text.

Apr 7, 2020
Loading thumbnail…

Read in JSON department files

This example demonstrates how to load and integrate data from multiple JSON files using D3.js v5. It reads two datasets—department names and course pathways—via `Promise.all` and `d3.json`, then logs both to the console. The visualization renders a list of course names as plain text paragraphs, appended to the body with `d3.select("body").selectAll("p")` and `.data(pathwaysData)`. The code highlights asynchronous data loading and simple data binding without any graphical marks or scales.

Mar 31, 2020