Fork of Fork of home dept top 5

100%

Fork of Fork of home dept top 5

✓ Published0🌍 Public

Last edited Jun 18, 2021

Created on Jun 18, 2021

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of home dept top 5

This interactive bar chart displays the top five home schools ranked by proposal counts across multiple years, with clickable year buttons (2013–2021) that update the bars to reflect each year’s data. Built with D3 v6, the visualization uses `scaleLinear` and `scaleBand` to position axes, a custom `draw` function to render SVG bars, and click event listeners to switch datasets and highlight the selected year. The chart includes a title, axis labels, and a tooltip behavior on bar hover, while defaulting to 2013 data.

Ttracy3057

97% match

Loading thumbnail…

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.

Ttracy3057

84% 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

76% match

Loading thumbnail…

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

73% match

Loading thumbnail…

Fork of Fork of Interactive pie and bar

This interactive dashboard combines a pie chart and bar chart to compare the top 5 countries across teaching, research, and citations. Hovering over a bar updates the pie chart and legend to display the corresponding data breakdown. Built with React and D3 v3, it uses SVG rendering with animations via `transition().duration(500)` to smoothly update bar heights and colors. The data is processed from a JavaScript object containing frequency values for each category.

JJerlineJJ

72% match

Loading thumbnail…

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

71% match

Loading thumbnail…

Fork of Fork of styling dropdown and working...Fork 999 of Stylized Bar Chart

This interactive bar chart displays the top 10 most populous countries based on immigration numbers for a selected year from 2008 to 2019. A dropdown menu allows users to switch between years, updating the bar heights accordingly. Built with React and D3 v5, the visualization uses `scaleBand` for the categorical x-axis, `scaleLinear` for the y-axis, and SVG `<rect>` elements for the bars. Data is loaded as CSV from a GitHub gist and formatted using D3’s `format` API, with axis labels and tooltips providing context.

Ssucotton9

71% match

Loading thumbnail…

Fork of HW5: Stacked Bar Charts

This stacked bar chart visualizes survey responses about opinions across multiple universities, using the D3.js library. The chart displays the distribution of five opinion categories—ranging from "Tout à fait d'accord" (strongly agree) to "Pas du tout d'accord" (strongly disagree)—for each institution, with each category represented by a distinct color in the stacked bars. An interactive dropdown menu allows users to select a specific opinion, and a second dropdown enables sorting of the bars in ascending or descending order, with a confirm button to apply the changes. The visualization uses SVG rendering within a React framework, featuring a legend with hover effects that highlight the corresponding segments of the stacked bars. This example demonstrates D3's stack layout for grouped categorical data and interactive chart controls.

Oobope@proton.me

71% match