Top 150 US School Data

100%

Top 150 US School Data

✓ Published2🌍 Public

Last edited Sep 16, 2019

Created on Sep 16, 2019

This visualization maps the top 150 US schools by their geographic location, using circle size to represent acceptance rate and color to encode net price. It layers geoshape data from the US 10m TopoJSON API with a point layer positioned via longitude and latitude fields. Built with the Vega-Lite API, it combines the map and scatter plot into a single layered view. The data is loaded from a CSV containing school rankings, with the map rendered using an Albers USA projection.

AI-generated description

A visualization constructed using the vega-lite-api. A scatter plot with D3. 2017 style.

This visualization shows The top 150 US School Data.

It's designed to show top 150 school price and their acceptance rate, and locate them geographically on US map.

From this visualization, I leanrned how to use layer. That is load 2 dataset into on visualization. Also, I leanrned to use api to load US map, using the US map url api dataset to create a layer of US map. It's a json file referenced in this visualization.

Questions I can't figure:

The circles in my map aren't very clear, I can't make it bigger.
The default color from light blue to dark blue showing the price is also not very clear. I wonder if I can make it from blue(low price) to red(high price).
Also, I wonder if I can make price ranges and throw them into bins, then the price can be an ordered catogory.

MIT Licensed

Similar vizzes

Loading thumbnail…

Top 150 US School Data

A scatter plot of the top 150 US schools overlays geographic points onto a map of the United States, encoding each school’s net price through a blue color gradient and its acceptance rate through point size. The visualization layers a GeoJSON map of US states with the school data using the vega-lite-api, pulling location coordinates from the CSV and rendering the map from a Vega US‑10m topology file. It relies on the Albers projection and the vega-lite-api’s `markGeoshape` and `markPoint` marks to combine both datasets in one view.

GGeniXiong

93% match

Loading thumbnail…

Fork of Top 150 US School Data

This visualization maps the top 150 US schools by their geographical location, using a scatter plot overlaid on a US map. The color of each point encodes the school’s net price, while the point size represents its acceptance rate. Tooltips reveal the institution’s name. Built with the Vega-Lite API and D3, it layers a `markGeoshape` US map (loaded from a TopoJSON file of states) with a `markPoint` layer positioned by latitude and longitude.

Mmoslem-tg

90% match

Loading thumbnail…

Scatter Plot of US TOP 150 Universities

The visualization is a scatter plot of the top 150 US universities, showing the relationship between rank on the x-axis and acceptance rate percentage on the y-axis. Circle size encodes the annual price divided by 1000. The plot uses React for component composition and d3.v5 for scale construction and CSV data loading from a GitHub gist. SVG rendering includes custom axis components and marks, with interactive-free static display of the dataset.

GGeniXiong

77% match

Loading thumbnail…

US MAP

This interactive visualization displays a choropleth-style map of the United States, rendered as an SVG using React and D3 v5. The map shows state boundaries through purple interior lines, with land areas filled in green against a dark blue sphere background. The code employs `d3.geoAlbers` for the Albers equal-area projection, `d3.geoPath` to generate SVG paths, and `d3.geoGraticule` for grid lines. Geographic data comes from the `us-atlas` TopoJSON file, processed through `feature` and `mesh` from topojson library.

Ssiddu7147

70% match

Loading thumbnail…

USA Country Map

This visualization displays a choropleth map of the 50 US states using a green fill, with white state borders and a purple hover highlight for individual states. It renders geographic data from a TopoJSON file using React and D3's `geoPath` with the `geoAlbersUsaTerritories` projection. The `feature` and `mesh` functions from TopoJSON extract land and interior boundary data, which are drawn as SVG paths within a React component.

BBhavanaGIrni

69% match

Loading thumbnail…

Centered US Choropleths Map

This visualization displays a centered choropleth map of the United States, with each state colored according to a rate value from a TSV data file. The map uses an Albers projection and renders state boundaries, interior meshes, and a graticule. Built with React and D3 v5, the code loads TopoJSON and TSV data via `Promise.all`, then applies a threshold color scale (`d3.scaleThreshold`) with `d3.schemeGreens` to encode the rates. The map data originates from the US Atlas TopoJSON repository.

SSagarikaS

69% match

Loading thumbnail…

Centered US Map

This visualization renders a centered choropleth map of the United States, coloring each state by a numeric rate loaded from a TSV file. The map displays state boundaries, graticules, and a sphere outline. Built with React and d3.v5, it uses `d3.geoAlbers` and `d3.geoPath` to project TopoJSON data from the US Atlas, while a `d3.scaleLinear` maps rate values to colors for the SVG paths.

Yyuzhang21

69% match

Loading thumbnail…

USA Country Map

This choropleth-style map displays the 50 United States using an Albers equal-area conic projection, with each state filled in green and white borders defining state boundaries. Hovering over a state changes its fill to orange. The visualization is built with React, D3.js v5, and TopoJSON, using `d3.geoPath()` to render geographic shapes and the `geoAlbersUsaTerritories()` projection. State geometry is loaded from a US Atlas TopoJSON file, and the map is rendered as SVG.

SSonuSriN

68% match