Skip to main content
Log in
S

s_cural@coloradocollege.edu

@scural·11 public vizzes

Loading thumbnail…

Fork of Fork of Fork of Fork of AirBNB Price Prediction Latest Draft again

A US state map shows AirBNB pricing predictions by filling predicted states in green, highlighting Colorado, California, and Illinois as active regions. Clicking a state triggers a zoom animation using the Albers USA projection and d3.geo.path, though city-level maps remain unimplemented. Hovering displays tooltips with state names or messages indicating missing predictions. The visualization uses TopoJSON, d3.v3, SVG paths, and d3.behavior.zoom to enable interactive state exploration and animated transitions.

May 14, 2024
Loading thumbnail…

Fork of Choropleth again

This example shows the spatial distribution of Airbnb listings across Chicago neighborhoods by overlaying red point markers onto a light blue choropleth map. A Mercator projection is created with `d3.geoMercator` and fitted to the map data using `fitSize`, while `d3.geoPath` renders the GeoJSON neighborhood boundaries. The listings are loaded from a CSV file and plotted as SVG circles, with their positions computed via the projection function. The visualization uses D3 v6 and relies on `Promise.all` to load both the GeoJSON and CSV data concurrently.

May 13, 2024
Loading thumbnail…

Fork of Fork of AirBNB Price Prediction Latest Draft

This visualization presents an interactive United States map highlighting states with AirBNB price predictions in green, alongside a secondary map for Denver neighborhood listings. Users can hover over states to view names and prediction availability, and click to zoom into city-level data. Built with D3.js v3, the implementation uses `d3.geo.albersUsa` projections, `d3.geo.path`, and `d3.behavior.zoom` for map interactions. It loads TopoJSON state boundaries and GeoJSON neighborhood data, with CSV listing prices overlaid on the Denver map. The interface includes tooltips and a return button for navigating between map views.

May 13, 2024
Loading thumbnail…

AirBNB Price Prediction Viz

This interactive map visualizes AirBNB price predictions across U.S. states, with Colorado, California, and New York highlighted in green to indicate available prediction data. Clicking a highlighted state triggers a transition to a second map of Denver’s neighborhoods, where individual listings appear as red circles. Using d3.geo.albersUsa and d3.geo.mercator projections, the visualization employs d3.json and d3.csv to load TopoJSON state boundaries and GeoJSON neighborhood data alongside listing coordinates. The code uses d3 transitions for zooming and SVG elements for rendering, though city-map display currently replaces the state view rather than layering over it.

May 10, 2024
Loading thumbnail…

Fork of AirBNB Price Prediction TEST

This example displays a choropleth of U.S. states, with select states colored green to indicate AirBNB price predictions. Clicking a state triggers a zoom animation via `d3.geo.path` and a `transition.attr` transform, revealing a second SVG map of Denver neighborhoods with listing data from a CSV file. The visualization uses TopoJSON for state boundaries and GeoJSON for the city map, rendered with SVG paths.

May 9, 2024
Loading thumbnail…

Fork of State Zoom

This interactive map of the United States allows users to click on individual states to zoom in, using the Albers USA projection via `d3.geo.albersUsa()` and rendering state boundaries as SVG paths from TopoJSON data. Clicking a state triggers an animated transition that scales and translates the view, while toggling an “active” state class; clicking Colorado, identified by its ID, removes the entire SVG as a special case. The map distinguishes certain states with a green color, and uses `d3.json()` to load geographic data.

May 9, 2024
Loading thumbnail…

Fork of Fork of State Zoom

This interactive map visualizes Airbnb listings in Denver overlaid on a zoomable map of the United States. Clicking on Colorado triggers an animation that transitions to a detailed view of Denver neighborhoods, with red dots marking individual listings. The visualization uses D3.js v3’s `d3.geoPath` for map projections and `d3.transition` for smooth zooming, sourcing geographic data from a GeoJSON file and listings from a CSV file.

May 8, 2024
Loading thumbnail…

Fork of Fork of State Zoom

This interactive map displays US states as clickable regions. Clicking a state smoothly zooms and centers the map on that state, highlighting it in orange, while Colorado is always shown in green. The visualization uses d3.geo.albersUsa projection, topojson for state geometries, React for the interface, and SVG with CSS transitions for animation.

May 7, 2024
Loading thumbnail…

State Zoom

This example combines a choropleth map and a scatter plot to explore country statistics. The map displays the urban population rate using a linear color scale, while the scatter plot positions life expectancy against GDP per capita, with point size encoding population and color encoding continent. Users can compare spatial and numerical patterns across countries. The visualization uses D3 v7’s `geoEqualEarth` projection, `geoPath`, `scaleLinear`, and `scaleOrdinal`, rendering as SVG with a tooltip on hover.

May 6, 2024
Loading thumbnail…

Fork of Chloropleth

This example renders a simplified choropleth of the United States using a static grayscale fill for each state. It loads TopoJSON data from the `us-10m.v1.json` file and converts it to GeoJSON features with `topojson.feature`. The map is drawn as SVG paths using a `d3.geoAlbersUsa` projection and a `d3.geoPath` generator, with each state assigned a light gray class. No interactivity or zoom behavior is implemented, despite the README noting an unsuccessful attempt at state zooming.

May 5, 2024
Loading thumbnail…

Fork of Spinning Globe

A spinning globe animation uses an orthographic projection to display world country boundaries from a TopoJSON dataset loaded from unpkg. The d3-geo projection rotates continuously via requestAnimationFrame, updating the globe’s rotation state each frame. A graticule and sphere outline are drawn using d3.geoPath, while country polygons are rendered with distinct strokes, creating a clear, animated visualization of Earth’s geography.

May 5, 2024