madroscla

@madroscla·10 public vizzes

Fork of Let's Make a Face Part I

This fork of a "Let's Make a Face" tutorial shows a simple smiley face built entirely from SVG shapes. A large yellow circle with a black stroke forms the head, while two smaller unfilled circles serve as the eyes. The construction relies on hard-coded pixel coordinates for the center (cx="480") and eye placements (cx="350" and cx="600") within a 960 by 500 canvas. The rendering is static SVG, using inline `<circle>` elements without any JavaScript or data-binding libraries.

Aug 2, 2021

Loading thumbnail…

Overall - Version 1.1

This sunburst chart visualizes the post-high school paths of participants, showing sequences from Military, School, Work, and NA categories. Hovering over a segment highlights the corresponding path in the breadcrumb trail and displays the percentage, raw count, and a description of that specific sequence. The visualization uses D3.js v4's `d3.hierarchy`, `d3.partition`, and `d3.arc` to render the radial layout, with data loaded from a JSON file. A legend toggle and fading transitions enhance the interactive exploration of hierarchical data.

Aug 21, 2019

Loading thumbnail…

Gender - Version 1.2

This interactive sunburst chart visualizes the post-high-school pathways of male and female participants, using a dropdown menu to switch between the two datasets. The visualization uses D3.js v4 and jQuery to read the separate JSON files and render the hierarchical data as an animated, zoomable sunburst. Hovering over a segment highlights its ancestor path in a breadcrumb trail and displays the percentage and raw count of participants who followed that exact sequence. The chart employs `d3.partition` and `d3.arc` to compute the layout and draw the arcs.

Aug 21, 2019

Loading thumbnail…

Gender - Version 1.1

This interactive sunburst chart visualizes the post-high-school trajectories of individuals, broken down by gender, with each arc segment representing a transition between Military, School, Work, or NA statuses. Hovering over a segment highlights its ancestor path and displays the exact percentage and raw count of participants following that sequence. Built with D3 v4, the visualization uses a hierarchical partition layout with arc rendering to create the sunburst, breadcrumb navigation for path tracking, and mouseover events to update the explanation panel dynamically. The code loads JSON data files for male and female datasets separately.

Aug 21, 2019

Loading thumbnail…

Combined - Version 1.0

This interactive sunburst diagram visualizes the post-high school transitions of different racial groups, allowing users to select from a dropdown menu to compare paths. The central donut chart displays proportions of participants in each state, with mouseover highlighting revealing exact percentages and participant counts for any given path. Built with D3 v4, the visualization employs a hierarchical partition layout, an animated breadcrumb trail for navigation context, and custom coloring to distinguish between the categories of Military, School, Work, and NA. Data is loaded from separate JSON files for each demographic group.

Aug 21, 2019

Loading thumbnail…

Combined - Version 1.0

An interactive radial sunburst visualization displays the post-high-school pathways of participants from different racial and ethnic groups. Users select a demographic group from a dropdown menu to load its corresponding JSON data and view the animated hierarchy. The chart uses d3.partition and d3.arc to render the rings, with breadcrumb trails showing the selected sequence. Hovering highlights the path and displays the percentage, raw count, and description of each segment, with color-coded categories for Military, School, Work, and NA.

Aug 15, 2019

Loading thumbnail…

Sequences sunburst - KR Original

This interactive sunburst chart visualizes hierarchical sequences of user actions on a website, showing the proportion of each path through categories like home, product, and search. Hovering over a segment highlights its ancestor path and displays the percentage of total visits, while a breadcrumb trail above shows the current sequence. Built with D3 v4, it uses `d3.partition`, `d3.hierarchy`, and `d3.arc` to compute and render the radial layout, with data loaded from a CSV file. The visualization fades non-ancestor segments on mouseover and includes an optional legend toggle.

Aug 9, 2019

Loading thumbnail…

Ethnicity - Version 1.0

This interactive sunburst chart visualizes the post-high-school paths of participants across six ethnic groups, showing the sequence of Military, School, Work, or NA statuses. A dropdown menu switches between JSON datasets for each ethnicity. Built with D3 v4 and jQuery, it uses the `d3.partition` layout and `d3.arc` to render the animated hierarchy, with breadcrumb trails and percentage labels updating on mouseover.

Aug 8, 2019

Loading thumbnail…

Overall - Version 1.0

This interactive sunburst chart visualizes the hierarchical flow of participants through post-high-school paths, with each arc segment representing a category such as Military, School, or Work. Hovering over a segment highlights its ancestral sequence in the breadcrumb trail and displays the percentage of the total population it represents. The visualization uses D3 v4’s `d3.partition` layout and `d3.arc` generator to render the radial layout, with data loaded from a nested JSON file via `d3.json`. A fade transition animates segment opacity on mouseleave, and a legend is toggled via checkbox.

Jul 29, 2019

Loading thumbnail…

Gender - Version 1.0

This animated sunburst chart, rendered with D3 v4, visualizes the post-high-school paths of males and females, displaying the proportions of individuals who transition through sequences of Military, School, and Work. It uses hierarchical JSON data for each gender, mapping each category to a distinct color. The visualization features a breadcrumb trail that updates on mouseover, showing the percentage of participants who chose a specific path, while fading all unrelated segments. The code explicitly builds the chart using `d3.hierarchy`, `d3.partition`, and `d3.arc` APIs within the D3 framework.

Jul 26, 2019