From your Education to your Job

100%

From your Education to your Job

✓ Published0🌍 Public

Last edited Apr 4, 2017

Created on Apr 4, 2017

This visualization uses a stretched chord diagram to show how graduates from various educational tracks transition into occupational sectors one year after graduation. The left side displays education fields, the right side shows job sectors, with ribbon thickness representing student counts. Built with D3.js v3, it employs a custom `d3.layout.chord.sort` layout and custom `stretchedChord` rendering with SVG paths and quadratic Bézier curves. An animated linear gradient flows across the chords to emphasize directional movement from education to occupation, and hover interactions highlight specific connections.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/f0d4b1b9b106927593f987cb1d5730a5'>stretched chord diagram- nematodes and copepods</a>

mit Licensed

Similar vizzes

Loading thumbnail…

From your Education to your Job

This example visualizes gene comparison data as a chord diagram, with the left side representing copepod gene names and the right side representing percent similarity values. The chart uses a custom stretched chord layout to pull the two halves apart, enabling clearer comparison of connections. Built with D3.js v3, it renders SVG paths and includes an animated linear gradient that moves across the chords. The data comes from a CSV file of nematode genes with identity percentages.

LLisaPicado

77% match

Loading thumbnail…

From your Education to your Job

LLisaPicado

77% match

Loading thumbnail…

Education Industry Sankey

This example shows how individuals move between education fields and industry sectors, with each node representing a discipline or industry and the thickness of the curved links indicating the number of people transitioning. Built with React and D3.js, the visualization uses a custom Sankey layout algorithm that computes node positions and link paths, rendering the result as SVG. The data is loaded from a JSON file containing the link values between the various categories.

DDavid Allyn

74% match

Loading thumbnail…

2017: Stretched Chord Diagram - Start Academiejaar ICTS Servicepunt

This visualization shows the flow of incoming versus resolved IT support tickets across different departments at a service desk, with tickets moving from the left half of the chart to the right. It uses a stretched chord diagram where the two halves are pulled apart along the x-axis to emphasize direction. The code relies on D3 v3’s `d3.layout.chord` with a custom layout function to sort chords and reduce overlap, and a custom `stretchedChord` function that modifies the SVG arc and curve paths to apply the pull-out effect. An animated linear gradient travels across the chords, and hover interactions dim non-selected links.

MMisunoKitara

70% match

Loading thumbnail…

Final Project

This example visualizes labor force information for college graduates, filtering the data by major category and STEM status. The main chart is an animated scatter plot, where the y-axis is categorical and the x-axis is a selected numeric measure. Users can interact by changing the x-axis through a dropdown menu and clicking legend items to filter the data and a supporting table. The visualization is built with D3 v5, using SVG and transitions for the animation. Legend selection triggers an update to the data table, and a tooltip appears on mouseover. The rendering also applies a mix-blend mode to the circles, and the dataset is loaded from a CSV file.

YYF

69% match

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.

Mmadroscla

68% match

Loading thumbnail…

Education Tree map

This treemap visualizes hierarchical education data, using nested rectangles sized proportionally to category values. Rendered as an animated SVG, the chart relies on D3’s `treemap` layout to compute the tile geometry, with transitions smoothly resizing groups when the view changes. The code explicitly sets an SVG container and applies `d3.hierarchy` to structure the nested data, while CSS styling controls the background. The visualization updates live, with labels and colored tiles clarifying the hierarchy. Data originates from a gist, and the animation demonstrates the treemap’s reflowing behavior.

DDragonVirus

68% match

Loading thumbnail…

EDAV Final Interactive

This interactive scatter plot visualizes social, educational, and employment trends across five time periods, from 1995–2019, using data from the UCI Machine Learning Repository. Users click labeled rectangles to switch between periods, triggering a 2-second D3 transition that moves each circle to new coordinates based on employment and education values. Circle color encodes a score value via a linear scale interpolating between green and black. Built with D3 v6, it uses SVG, scaleLinear, axisBottom, axisLeft, and selection.transition for animation.

Vvincent-sc4755

68% match