R

Rahmoon Shamdeed Kabir

@shamdeed30·16 public vizzes

Loading thumbnail…

Fork of Fork of Fork of AirBNB Price Prediction Latest Draft - Sham

This visualization presents a choropleth map of the United States showing AirBNB price prediction availability, with Colorado, California, and Illinois highlighted in green to indicate states where prediction data exists. A clickable state triggers a zoom transition using `d3.behavior.zoom` and `d3.geo.path` with the AlbersUSA projection, though the city-level map interaction remains incomplete. The interface includes hover tooltips displaying state names from a mapping file, and a return button to navigate back to the national view. The visualization uses D3 v3 with TopoJSON for geographic data and features SVG rendering with animated transitions.

Loading thumbnail…

Fork of Fork of Fork of AirBNB Price Prediction sandbox - sham

This interactive map visualizes AirBNB price prediction data across U.S. states, with Colorado, California, and New York highlighted in green to indicate available predictions. Clicking a highlighted state triggers a zoom transition using `d3.geo.path` with an Albers USA projection, and selecting Colorado replaces the map with a detailed Denver neighborhood map rendered via `d3.geo.mercator`. The visualization uses `d3.json` to load TopoJSON state boundaries and GeoJSON city data, alongside a CSV of Denver listings and predictions. The code includes placeholder logic for return navigation and tooltip features that remain unimplemented.

Loading thumbnail…

Fork of Fork of State Zoom - sham - single map

This example displays a static choropleth map of the United States using the Albers USA projection, with each state rendered as a gray SVG path. The map is created with React and D3.js v7 APIs, including `d3.geoAlbersUsa`, `d3.geoPath`, and `d3.json` to load GeoJSON topology data from a remote URL. State boundaries are highlighted with white strokes, and each path has a CSS class for potential interactivity, though no click behavior is implemented here.

Loading thumbnail…

Fork of Fork of AirBNB Price Prediction TEST - sham

This interactive D3.js map visualizes AirBNB pricing predictions across U.S. states, highlighting Colorado, California, and New York in green as special regions. Clicking a state triggers a zoom animation using `d3.geo.albersUsa()` and `d3.geo.path()`, while clicking Colorado replaces the map with a Denver neighborhood visualization using `d3.geo.mercator()`. The SVG rendering displays city listings overlaid on the neighborhood boundaries, sourced from local GeoJSON and CSV files. The transition between state and city maps is animated via `d3.transition()` with a duration of 750ms, though pending features include tooltips and color-coded pricing markers.

Loading thumbnail…

Fork of AirBNB Price Prediction Viz - Sham

This visualization shows a choropleth map of the United States with three states highlighted in green, representing AirBNB pricing predictions. Clicking a state triggers a zoom transition using d3.geo.path and d3.geo.albersUsa projection. The code includes a commented-out function to load Denver neighborhood boundaries from GeoJSON and overlay listing points colored by overpricing status. Data comes from TopoJSON US states and Denver listing CSV files. The visualization uses d3.v3 and SVG with animated transitions, though city map popping and tooltips remain unimplemented.

Loading thumbnail…

AirBnbStarter

This visualization displays Airbnb listings in Denver, Colorado, on a map, with each listing represented by a colored circle. Red circles indicate overpriced listings, green circles indicate not overpriced, and gray represents unknown status, based on the `overpriced` column from the CSV data. The map is drawn using `d3.geoMercator` projection and `d3.geoPath` from D3 v6, with the SVG rendered in React. The code fetches Denver boundary GeoJSON and listing data, then plots the points using the `projection` function to convert latitude and longitude to pixel coordinates.

Loading thumbnail…

bnb Test

This visualization shows a choropleth-style map of U.S. states, with three states highlighted in green to indicate the availability of AirBNB pricing predictions. Clicking a highlighted state triggers a zoom transition using D3’s `d3.geo.path` and `transition.attr`; selecting Colorado also logs data to the console. The map uses TopoJSON state boundaries from a remote gist, while listing data is loaded from a CSV file, though no city-level popups are yet implemented. The SVG rendering employs `d3.geo.albersUsa` projection and D3 v3 event handlers.

Loading thumbnail…

denver barchart - trial

This example shows a horizontal bar chart of feature importance values for a Denver-related dataset, ranking countries by population-like numeric values. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear` for the x-axis, `scaleBand` for categorical y-axis placement, and `axisLeft`/`axisBottom` for ticks. It loads external CSV data from a GitHub URL, converts the `Value` column to numbers, and draws steelblue rectangles with padded band heights. The left margin is set to 300 pixels to accommodate long country labels.

Loading thumbnail…

Fork of Fork of State Zoom - sham

This interactive map of the United States lets users click on individual states to zoom in and explore them. The visualization highlights specific states like Colorado, California, and New York in green, and clicking Colorado triggers a transition that enlarges a pre-existing Denver map element. It renders geographic boundaries using d3.geoPath with TopoJSON data, while a CSV of Denver Airbnb listings is loaded to populate the city-level map. The code uses d3.v3’s geo projection, topojson.feature, and transition methods to animate the zoom effect.

Loading thumbnail…

bar chart parctice

This horizontal bar chart displays population estimates for five countries, with bar lengths encoding each value. The visualization uses D3 v5 APIs including `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to load data, map values, and render axes. SVG rectangles are appended to a grouped element with margins, while the bar fill color comes from a stylesheet. The chart updates dynamically after parsing the CSV and converting population strings to numbers.

Loading thumbnail…

map practice

This map practice example displays a simple world map using SVG paths. It renders country boundaries from the world-atlas TopoJSON dataset, projecting them with a d3.geoMercator projection and d3.geoPath generator. The code loads data via d3.json, converts TopoJSON features with topojson.feature, and binds them to path elements using D3’s data join and enter selection. The map fills the viewport without styling, showing raw geographic outlines in black against a white background.

Loading thumbnail…

prac1

This example shows a blank slate starting point for the VizHub V3 runtime, displaying a single fixed circle on an SVG canvas. The code uses `d3.select` and `selectAll` with a data join to create an SVG element sized to the container's dimensions, then binds a one-element dataset to render a circle at coordinates (316, 231) with a radius of 86. The static visualization demonstrates the minimal setup required for the runtime, which supports hot reloading and interactive widget adjustments.

Loading thumbnail…

prac

This example renders a static, centered text display reading “Practice Title” at a large font size inside the provided container. It uses an inline HTML string with inline CSS styling to achieve the typographic layout. The code demonstrates how to set up a basic VizHub module by importing D3 from UNPKG and defining a `main` export function, though it does not load any data or utilize D3-specific visualization APIs beyond this setup.

Loading thumbnail…

Test Fork of Chloropleth

This example pairs a choropleth map with a scatterplot to explore global demographic data. The map colors each country by birth rate using `d3.geoEqualEarth` and `d3.geoPath`, while the scatterplot plots fertility rate against life expectancy, with circle size encoding population and color indicating continent. Hovering over a country on the map highlights it in red; hovering over a scatterplot point also turns it red. The code loads GeoJSON map boundaries, a CSV of country statistics, and a JSON continent mapping, processing the data into a `Map` for lookup.

Loading thumbnail…

Fork of Q2

This example demonstrates a minimal D3.js setup with a static SVG canvas, where the entire SVG element is given a red background using a single selection and style assignment. It serves as a blank starting point for the VizHub V3 runtime, illustrating how to select an SVG element and apply basic styling with D3 v5. The code uses `d3.select` to target the SVG and `svg.style` to modify its CSS properties directly.

Loading thumbnail…

Fork of Fork of Scatterplot for peng bird dataset

This is a scatter plot of penguin data displaying the relationship between flipper length and body mass. Each point’s color encodes the penguin species, while the point’s rx and ry attributes are set to the culmen length and depth values, though these do not affect the circle’s rendering since the radius remains constant. The visualization uses D3 v6 to load the CSV data, create linear scales with `scaleLinear`, and render the plot as an SVG. Axis labels and a title are added manually, and the chart resizes to the browser window dimensions.