Skip to main content
SimilarExport ZIP
100%

Rank Chart

✓ Published0🌍 Public
663anp3ca
Last edited Oct 10, 2018
Created on Oct 10, 2018

This rank chart tracks the intra-university NSS rankings of Imperial College departments from 2012 to 2017, with each department drawn as a line that moves up or down as its rank changes. The visualization uses a multi-line voronoi overlay for tooltips, letting viewers hover to identify departments. A customisable starting animation sequentially highlights departments in a predefined array, drawing attention to specific trends. Built with D3 v4, the chart includes grid lines, axis labels, and a clip path to contain the animated lines.

AI-generated description

A chart showing how the intra-university NSS ranks of Imperial departments have changed since 2012. Uses a multi-line voronoi for the tooltip.

Customisable starting animation which focuses on departments included in an array.

Inspired by Nadieh Bremer's Baby Name chart.

forked from <a href='http://bl.ocks.org/tlfrd/'>tlfrd</a>'s block: <a href='http://bl.ocks.org/tlfrd/1eaaf63bf8110247a6ff88cd5601a9b7'>Rank Chart</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Rank Chart

This chart tracks the changing intra-university National Student Survey ranks of Imperial College departments between 2012 and 2017, highlighting select departments from an array. It uses D3 v4 with SVG and animation to draw ranked lines over time. A multi-line Voronoi diagram (`d3.voronoi`) powers the tooltip, while `d3.scaleOrdinal` assigns colors and `d3.line`, `d3.axisBottom`, and `d3.axisLeft` structure the visualization. Data comes from a local CSV file, rendered with open-source code inspired by Nadieh Bremer’s baby-name chart.

KKacieW
93% match
Loading thumbnail…

Fork of 1010

This visualization displays 2024 World University Rankings as a stacked bar chart, breaking down each institution’s total score into five component categories: teaching, research, citations, industry income, and international outlook. Users can sort the bars by any category or the total, toggle ascending/descending order, and upload their own CSV data to update the chart. Built with D3 v7, it uses `d3.stack()` for stacking, `d3.scaleBand` and `d3.scaleLinear` for axes, and SVG `rect` elements with mouseover tooltips.

Eeyxxr1260@gmail.com
67% match
Loading thumbnail…

1010

This stacked bar chart visualizes the Times World University Rankings 2024, breaking down each institution's overall score into five components: Teaching, Research, Citations, Industry Income, and International Outlook. The chart uses d3.scaleBand for the categorical y-axis and d3.scaleLinear for the numeric x-axis, with d3.stack() to create the stacked segments. Interactive sorting by any score metric, in ascending or descending order, is provided via HTML dropdown menus, and a tooltip displays segment values on mouseover. The data is loaded from a CSV file, with schools ranked as "Reporter" filtered out.

Eeyxxr1260@gmail.com
67% match
Loading thumbnail…

home dept top 5

This visualization shows the number of proposals for primary departments (ENG, DSI, GEU, A&S, MED) across different years, with each year selectable via clickable buttons. A horizontal bar chart displays the top five departments, and hovering over bars triggers an opacity change. The chart uses d3.scaleLinear and d3.scaleBand for axes, with data embedded as CSV strings in the code. The visualization is rendered as SVG with a pink-to-palevioletred color scheme for year selection.

Ttracy3057
66% match
Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This animated scatter plot visualizes university rankings across multiple countries, cycling through four metrics: Research Environment, Students to Staff Ratio, Research Quality, and Industry Impact. Built with D3 v3, the chart uses distinct SVG symbols (star, square, circle) to represent different data dimensions, with axes updating every two seconds as the metric changes. The visualization leverages a reusable chart pattern, where the scatter plot component is separated into its own module and accepts configurable setters for data binding and scales.

Vvinodreddysagam929@gmail.com
66% match
Loading thumbnail…

Rdar Chart Backup

This radar chart compares universities across four metrics—Community, Self-expression, Discovery, and Agency—based on peer institution data. The visualization uses a square layout with linear scales for each axis, rendering each university as a closed path. Interactivity includes a clickable legend that toggles visibility, mouseover highlighting that emphasizes a selected institution, and a D3.js color scheme. The chart leverages d3.scaleLinear, d3.line for path generation, and d3.axisLeft/axisBottom for axes, with data loaded from a CSV file.

Kkratikashetty1102@gmail.com
65% match
Loading thumbnail…

Untitled

This example shows the Times Higher Education World University Rankings 2024 as interactive stacked bar charts. Each page displays 100 universities, with bars segmented by six performance categories (overall, teaching, research, citations, industry income, and international outlook). Users can reorder the bars by ascending or descending score for any category and page through the dataset. The visualization uses D3 v7 with `d3.stack`, `d3.scaleBand`, `d3.scaleLinear`, and `d3.scaleOrdinal`, rendered as SVG with hover tooltips.

ZZeroKurosakii
65% match
Loading thumbnail…

test2024

This visualization displays university rankings from a CSV dataset as an interactive stacked bar chart. Users can sort universities by overall score or individual performance metrics, and choose ascending or descending order using dropdown menus. The chart renders with D3.js v4, using `scaleBand` for the x-axis, `scaleLinear` for the y-axis, and `scaleOrdinal` for color mapping. The bars stack five score components—teaching, research, citations, industry income, and international outlook—using D3's stack API, with SVG rendering for the final output.

Ddaniel
65% match