Skip to main content
SimilarExport ZIP
100%

Average Tuition Price Of Different Fraternities At Duke With A Menu To Change The State.

✓ Published0🌍 Public
Llokesh234
Last edited Oct 7, 2020
Created on Oct 7, 2020

This visualization displays the average high school tuition of Duke University fraternity members by their home state, using horizontal bar charts to compare different Greek organizations. A dropdown menu allows users to switch between states, dynamically filtering the dataset to show only fraternity members from the selected region. The visualization uses React for state management and component rendering, while D3 v5 handles data loading via `d3.csv` and scales (including `scaleBand` and `scaleLinear`) for positioning bars. The chart is rendered as an SVG with styled rect elements, pulling data from the GreekLifeDataDuke dataset published on GitHub Gist.

AI-generated description

This visualization allows to us to answer the differences in the tuition price in different fraternities and gives us option to change the state to have a clear and concise information. This was in my sketch given in the last assignment. This is the 'GreekLifeDataDuke' dataset. Published at Greek-Life-Demographics, this dataset contains the data The Chronicle used to analyze trends between those who do and don't join Greek life at Duke.

MIT Licensed

Similar vizzes

Loading thumbnail…

Average Tuition Price Of Different Fraternities At Duke With A Menu To Change The State.

This visualization displays the average high school tuition of Duke University fraternity members by their home state, using horizontal bar charts to compare different Greek organizations. A dropdown menu allows users to switch between states, dynamically filtering the dataset to show only fraternity members from the selected region. The visualization uses React for state management and component rendering, while D3 v5 handles data loading via `d3.csv` and scales (including `scaleBand` and `scaleLinear`) for positioning bars. The chart is rendered as an SVG with styled rect elements, pulling data from the GreekLifeDataDuke dataset published on GitHub Gist.

Llokesh234
100% match
Loading thumbnail…

High School Tuition of Greek Organizations at Duke University.

This visualization compares high school tuition costs across Greek organizations at Duke University, using a bar chart where each bar’s length encodes tuition and color represents the member’s home state. The bars are sorted by tuition in descending order, with axes scaled from zero to highlight differences. Built with Vega-Lite and d3, the view filters out non-Greek members from the GreekLifeDataDuke CSV dataset, configures axis styling via a custom config object, and renders interactive tooltips through the vega-tooltip handler.

Llokesh234
85% match
Loading thumbnail…

D3 World Map

This choropleth map visualizes the average university diversity index across U.S. states in 2021, using a white-to-blue linear color scale. Each state is rendered as an SVG path via `d3.geoPath` with a `d3.geoAlbersUsa` projection, colored by state-level data. Hovering reveals a tooltip, and a `d3.legendColor` legend displays the scale. The code loads TopoJSON state boundaries from a GitHub gist and uses D3 v4 and the d3-legend plugin.

EErik Erickson
60% match
Loading thumbnail…

D3 World Map

The map displays the University Diversity Index for each U.S. state, using a white-to-blue color scale where darker shades indicate higher diversity. It is rendered as an SVG using `d3.geoPath` and `d3.geoAlbersUsa` with data from a JSON file. On mouseover, a histogram image for the hovered state appears, which is appended dynamically and follows the cursor. The visualization is built with React, D3 v4, and the `d3-legend` library for the color legend.

JJincheng Liu
60% match
Loading thumbnail…

D3 World Map

This D3 world map visualizes university diversity across U.S. states, using a blue-white linear color scale mapped to each state’s diversity index. Hovering over a state with the mouse reveals a histogram image of that state’s diversity distribution. The visualization uses `d3.geoAlbersUsa` for the projection, `d3.geoPath` for rendering state boundaries, and `d3.legendColor` for the color scale, with data from a static JSON file.

JJincheng Liu
59% match
Loading thumbnail…

Fork of D3 World Map

This interactive map of the United States visualizes a university diversity index, using a blue color scale from white to dark blue to represent values from 0.2 to 0.8. Hovering over a state reveals a histogram image for that specific state, positioned near the cursor. The visualization is built with D3 v4, using `d3.geoAlbersUsa` for the projection, `d3.geoPath` for rendering state boundaries, and `d3.legendColor` for the color legend. State outlines have a white stroke and react to mouse events, while tooltips are implemented as dynamically appended images rather than the standard D3 tooltip.

Hhusseinmaatouk506@gmail.com
59% match
Loading thumbnail…

Fork of D3 World Map

This interactive map of the United States uses a blue-to-white color scale to display a “University Diversity Index” for each state, with darker blue indicating higher diversity. Built with D3 v4 and React, the visualization employs `d3.geoAlbersUsa` for the map projection and `d3.geoPath` to render state boundaries. Hovering over a state triggers a tooltip that displays a histogram image for that state, with the map data sourced from an external JSON file.

RReyden Harris
59% match
Loading thumbnail…

HW Add a Menu

This interactive bar chart visualizes labor data for 16 graduate program categories from 2010–2012, sourced from FiveThirtyEight’s Economic Guide to Picking a College Major. A dropdown menu allows users to switch between metrics such as total graduates, median salary, and unemployment rate, instantly updating the bar heights with a smooth d3 transition. The visualization uses d3.scaleBand, d3.scaleLinear, d3.axisLeft, d3.axisBottom, and d3.csv to load and render the SVG, with the menu built via the custom dropdownMenu function.

WW9183907
59% match