Fork of home dept top 5

Fork of Fork of home dept top 5

This interactive bar chart shows the top five home schools by proposal counts for each year from 2013 to 2021. Users click year buttons to update the visualization, which is rendered as SVG using D3 v6 with scaleLinear, scaleBand, and axis functions. The data is hardcoded as strings parsed via d3.csv, and each bar’s height reflects the proposal numbers. Clicking a rectangle appends a coordinate text label to the SVG, while hover effects reduce bar opacity.

97% match

Fork of Fork of home dept top 5

A bar chart displays the number of funding proposals for the top five primary departments at Columbia University across selected years from 2013 to 2021. Interactive year buttons highlight a chosen year and update the bars through D3.js v6 data joins with scaled linear and band scales. The visualization uses SVG rendering and hover effects on rectangles, though tooltips are not implemented.

83% match

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.

78% match

Customizing Axes

This example shows a horizontal bar chart of proposal counts for primary departments, with interactive year buttons (2013–2021) that let users switch between datasets. The chart uses D3 v6 APIs including `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to construct the axes. A click on a year button updates the chart data and highlights the selected button, while bars are rendered as SVG rectangles. The x-axis formats tick labels with `.0s` and replaces "G" with "B", and hover states adjust bar opacity. The data is embedded as CSV strings within the code.

74% match

animated bar chart with labels

This animated bar chart displays the percentage of school districts meeting a connectivity benchmark for the years 2015 through 2018, with the final year highlighted in orange. Built with D3 v4, the SVG visualization uses `d3.scaleBand` and `d3.scaleLinear` to map years and values, while `d3.axisBottom` renders the x-axis ticks. Bars and their percentage labels grow sequentially via `transition().duration(600).delay()` as the dataset is read from an inline JavaScript array.

FFrissAnalytics

Fork of Fork of Bar Chart - React & D3 (Part 24) - Stylised

This interactive bar chart visualizes student marks by name, with data drawn from estimated UN population statistics. Users can select a year and the number of top countries to display via dropdown menus. The visualization uses React with D3 v5 scales (scaleBand, scaleLinear) to render SVG rectangles, which are animated on load using the `<animate>` element. Bars are stylized with linear gradients, drop shadows, and continent-based coloring, while tooltips appear via `<title>` elements.

Cchandrakalavanukuri

Fork of bar_test

A grouped bar chart displays university ranking data, with each institution’s score broken into five stacked components (teaching, research, citations, industry income, and international outlook). Users can reorder the bars by selecting a different score metric or sorting order from dropdown menus, built with a custom `dropdownMenu` module. The visualization uses D3 v4’s `scaleBand`, `scaleLinear`, `stack`, and `axisBottom`, rendering SVG rectangles with mouseover tooltips showing school names and component scores. Data comes from a CSV file containing Times Higher Education rankings.

Ddaniel

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