Skip to main content
SimilarExport ZIP
100%

home dept top 5

✓ Published1🌍 Public
Ttracy3057
Last edited Jun 18, 2021
Created on Jun 17, 2021
Forked from Customizing Axes

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.

AI-generated description
MIT Licensed

Similar vizzes

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
79% match
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
78% match
Loading thumbnail…

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.

Ttracy3057
76% match
Loading thumbnail…

ICE-6

This interactive bar chart ranks the top ten departments by average salary, displaying each as a rounded rectangle labeled on the left and colored on a cyan-to-teal gradient. The visualization is built with React and D3 v7, using a `scaleBand` for the categorical axis, a `scaleLinear` for the quantitative range, and a `scaleLinear` color scale for the gradient fill. Data is loaded from a local CSV file with `d3.csv` and grouped by department via a `d3.rollup` operation, with tooltips exposing exact salary values.

Mmendemrudula@gmail.com
70% match
Loading thumbnail…

Gender count for each department

This example visualizes the gender distribution across seven academic departments (CAM, COM, CSIS, GAV, MED, MUL, VIS) using a dot plot with pink and light blue circles representing female and male counts respectively. The chart displays both genders per department, connected by black lines to facilitate comparison of relative values. Built with React and D3 v5, the visualization uses `d3.scaleBand` for the y-axis, `d3.scaleLinear` for the x-axis, and SVG circles and lines rendered from the `earning_averages_by_year.csv` data source. Gridlines and axis labels are generated using `d3.axisBottom` and `d3.axisLeft`.

KKeerthiKandadai
70% match
Loading thumbnail…

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.

Ttracy3057
68% match
Loading thumbnail…

Read in JSON department files

This interactive sunburst diagram visualizes student enrollment across university departments, courses, and modules, segmented by gender. The visualization aggregates three JSON data sources—department names, course pathways, and module records—into a hierarchical structure rendered as animated arcs. Using D3 v5’s `d3.partition` and `d3.arc`, the chart displays the hierarchy with color-coded segments for each department. Radio buttons allow filtering by department, triggering a transition that updates the displayed arcs. The code employs a `d3.hierarchy` with a `sum` accessor and a `d3.scaleOrdinal` with an interpolated rainbow color scheme.

GGrimsas
67% match
Loading thumbnail…

spending_graph

This visualization shows French Government Spending by Department, using a bar chart to compare spending allocations across Education, Military, Health, Transportation, and Others. The bars are rendered in SVG using D3 v6, with `d3.scaleBand` and `d3.scaleLinear` mapping categorical and numerical values, while `d3.axisBottom` and `d3.axisLeft` display the axes. Hovering over a bar changes its fill color from steelblue to orange. The chart includes rotated department labels and explicit axis titles, with data provided as static in-code arrays.

Ttimothy.bell@cgi.com
67% match