Skip to main content
SimilarExport ZIP
100%

NYC High school Demographics over Student Diversity Sentiment

✓ Published0🌍 Public
BBrian Hernandez
Last edited Apr 12, 2021
Created on Apr 12, 2021
Forked from D3 Starter

This visualization shows how demographic composition relates to student satisfaction with diversity across NYC high schools. A slider browses 426 schools, updating a bar chart of the percentages of Asian, Black, Hispanic, Multiracial, and White students alongside the displayed satisfaction score. The code loads data from a CSV file using `d3.csv`, sorts schools by satisfaction, and animates each bar’s height with a `transition` on SVG rectangles. It relies on D3’s scale functions, axes, and the jQuery UI slider for interaction.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

NYC High Schools

This visualization compares NYC high school graduation rates against attendance rates using a scatterplot, and it also includes a bar chart showing the number of students per school. The scatterplot uses `d3.scaleLinear` for both axes, with `d3.axisBottom` and `d3.axisLeft` for tick marks, and circles jittered slightly to reduce overplotting. Hovering over a circle highlights all schools in the same neighborhood. The bar chart uses `d3.scaleBand` for its y-axis and `d3.scaleLinear` for the x-axis. Data is loaded as CSV from NYC Open Data, and the visualization is rendered as SVG with D3 v7.

Yyixual5
79% match
Loading thumbnail…

Horizontal Bar chart

This horizontal bar chart displays the projected 2020 population percentages for school-age children and seniors across New York City boroughs, with white bars on a dark blue background and hover tooltips showing detailed age-group and borough information. The data is loaded from a CSV file using `d3.csv` and sorted in descending order by the `TwentyTwentyPercentPopulation` field. Each rectangle’s width is scaled by that percentage multiplied by 41, with vertical positioning determined by index and fixed 50-pixel spacing. The visualization uses D3 v3’s SVG rendering.

PPaperpanic
71% match
Loading thumbnail…

demographic school snapshot

This interactive dashboard presents a demographic snapshot of NYC crime incidents, linking a choropleth precinct map to a pie chart of crime types and bar charts for victim age, race, and sex through coordinated brushing and a reset button. It uses d3.geoPath with a Mercator projection to render the map and d3.arc for the pie, while animated transitions update all charts based on user selections. The code relies on d3.v6, d3-array, and d3-geo, with SVG and tooltips for hover details.

YYuan
71% match
Loading thumbnail…

Fork of Multivariate Choropleth Experiments

This map visualizes multidimensional racial demographics for New York census tracts by blending three HCL color scales into a single fill per tract. The code uses d3.geoPath to render TopoJSON shapes, with d3.scaleSqrt encoding population counts for White, Black, and Asian residents into opacity values that are multiplied via color-blend. Hovering reveals precise population counts, while an ordinal legend identifies each race’s base hue. Data comes from the 2018 American Community Survey API, and the visualization supports pan and zoom through d3.zoom.

HHeidi Stockton
69% match
Loading thumbnail…

Module2 exercise

The visualization shows changes in NYC’s school-age and 65+ populations from 1960 to 1980, using paired horizontal bars per decade to display percentages. The bars are drawn as raw SVG elements with hardcoded coordinates and sizes, and styled with colors like orange and navy. The code loads the CSV data via `d3.csv` and logs it to the console, but does not use the loaded data to generate the chart; all visual values are manually specified in the markup.

PPaperpanic
69% match
Loading thumbnail…

Module2 exercise

The visualization shows changes in NYC’s school-age and 65+ populations from 1960 to 1980, using paired horizontal bars per decade to display percentages. The bars are drawn as raw SVG elements with hardcoded coordinates and sizes, and styled with colors like orange and navy. The code loads the CSV data via `d3.csv` and logs it to the console, but does not use the loaded data to generate the chart; all visual values are manually specified in the markup.

PPaperpanic
69% match
Loading thumbnail…

Multivariate Choropleth

This example visualizes racial demographics across New York census tracts using a multivariate choropleth. The map blends three color scales—blue for White, green for Black, and red for Asian populations—into a single fill per tract, with hover tooltips showing exact counts. It uses the D3 library’s `geoPath` for rendering TopoJSON geometries and `scaleLinear` for each racial category, while the `colorBlend` library composites the overlapping colors. Data comes from the 2018 American Community Survey, fetched via JSON, and the visualization supports zooming through D3’s `zoom` behavior.

CCurran Kelleher
68% match
Loading thumbnail…

Combined - Version 1.0

This interactive sunburst diagram visualizes the post-high school transitions of different racial groups, allowing users to select from a dropdown menu to compare paths. The central donut chart displays proportions of participants in each state, with mouseover highlighting revealing exact percentages and participant counts for any given path. Built with D3 v4, the visualization employs a hierarchical partition layout, an animated breadcrumb trail for navigation context, and custom coloring to distinguish between the categories of Military, School, Work, and NA. Data is loaded from separate JSON files for each demographic group.

Mmadroscla
67% match