Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published0🌍 Public
EEDPnajmi
Last edited Mar 24, 2022
Created on Mar 15, 2022
Forked from HTML Starter

This example shows a butterfly chart comparing the Teaching, Research, and Citation ratings of a single university, Caltech, using two horizontal bars that extend symmetrically from a central axis. The left side uses royalblue bars, while the right uses steelblue, with numeric values labeled above each bar. Built with D3 v7 in an SVG, the code converts the first row of CSV data into long format, then uses `d3.scaleLinear` for the bar lengths and `d3.scaleBand` for row positioning.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This example shows the distribution of student counts across letter grades, with horizontal bars colored in a solid blue tone. The chart uses D3.js v6 to construct an SVG visualization, employing `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the categorical y-axis. It renders rectangles whose widths are proportional to `num_students` values, with axes generated via `d3.axisLeft` and `d3.axisBottom`. The data is hardcoded in the script rather than loaded from the available CSV file.

Hhanulik.ondrej@gmail.com
75% match
Loading thumbnail…

Untitled

This bar chart displays the number of students for various grades and locations, with bars colored blue and axes labeled "Grades" and "Num_students." The visualization uses D3.js v6 to create an SVG rendering, employing `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the numeric y-axis. Data is hardcoded in an array of objects, while axes are generated with `d3.axisLeft` and `d3.axisBottom`. The chart includes a pink background rectangle and console logs for debugging scale behavior.

Hhanulik.ondrej@gmail.com
75% 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
75% match
Loading thumbnail…

Stacked Bar Charts

This example displays stacked bar charts of university rankings, with each bar segmented by weighted scores for Teaching, Research, Citations, Industry Income, and International Outlook. The visualization uses D3 v6 APIs such as `d3.stack`, `d3.scaleBand`, `d3.scaleLinear`, and SVG rendering to draw the chart. An interactive legend highlights a selected category by adjusting bar opacity on mouseover, while a button triggers data processing from a CSV file. The code loads university data and computes weighted score contributions for each segment.

AAkanksha
74% match
Loading thumbnail…

tryyyyyyy

This stacked bar chart visualizes World University Rankings across five metrics—Teaching, Research, Citations, Industry Income, and International Outlook—using d3.stack to aggregate scores per institution. Users can sort by metric and order via dropdowns, while hovering reveals exact segment values and legend interaction highlights selected categories. The SVG rendering uses d3.scaleBand for axes and d3.axisLeft/axisBottom, with data loaded from CSV via d3.csv.

Eeyxxr1260@gmail.com
74% match
Loading thumbnail…

Untitled

A simple bar chart displays two annual values from a CSV file, mapping dates on the x-axis and values on the y-axis. The chart uses D3 version 3 (loaded via CDN) with `d3.scale.ordinal`, `d3.svg.axis`, and `d3.time.format` for date parsing. Bars are rendered as SVG rectangles with steelblue fill. The axes include rotated date labels and a rotated y-axis title. The code demonstrates basic D3 data binding, scale setup, and SVG element creation within a fixed margin layout.

SSimon Hackbert
74% match
Loading thumbnail…

Fork of bar_test

This visualization displays university ranking data as an interactive stacked bar chart, showing scores across teaching, research, citations, industry income, and international outlook for each institution. Users select a sorting metric and order from dropdown menus, which reorders bars and changes the stacking priority. The chart uses D3 v4 with `scaleBand`, `scaleLinear`, `scaleOrdinal`, and `stack` to render SVG rectangles, while the `dropdownMenu` module handles menu interactions. Data comes from a local CSV file with Times Higher Education rankings.

Ddaniel
74% match
Loading thumbnail…

Untitled

This example presents a bar chart of average marks for university modules, with each bar representing a module code. The chart uses D3 v4 within a React framework to render SVG elements. Bars animate in sequentially using a transition with linear easing, and hovering over a bar triggers a mouseover event that highlights it in green, expands its width, and displays its average mark as a label. A mouseout event restores the bar’s original style and removes the label. The data comes from a CSV file containing module codes, student counts, and average marks.

VVishwas2629
74% match