Skip to main content
Log in
S

sandyman2109@gmail.com

@sandyman2109-commits·16 public vizzes

Loading thumbnail…

ICE-8 2b Sandeep Babu

This interactive network visualization shows collaboration between three students and three projects, with students colored blue and projects orange. Using D3.js v7, the graph applies a force-directed layout via `d3.forceSimulation` with link, charge, and centering forces to position nodes. Users can drag nodes, which triggers the simulation to restart and adjust positions. The SVG render includes labeled circles connected by gray lines, with all layout updates occurring on each simulation tick.

Nov 1, 2025
Loading thumbnail…

ICE-8 2a Sandeep Babu

A three-level family tree is rendered as an SVG visualization, showing the hierarchical relationships from grandparents down to children. The tree uses d3.stratify to convert flat parent-child data into a hierarchical structure, with d3.tree handling the layout. Nodes are color-coded by depth: yellow for the root, teal for the parents, and blue for children. Links between nodes are drawn using d3.linkHorizontal, and each node is labeled with its family role, all within a D3 v7 framework.

Nov 1, 2025
Loading thumbnail…

ICE-8 1b Sandeep Babu

This choropleth map of the United States displays the number of universities per state, with darker orange shades indicating higher counts, based on hard-coded sample data for a subset of states. The visualization uses D3 v7 with the `geoAlbersUsa()` projection and the TopoJSON library to convert US state boundaries from a remote `us-atlas@3` TopoJSON file via `d3.json`. State regions are rendered as SVG paths styled with `d3.geoPath`, and their fill is determined by a sequential color scale. A custom tooltip, positioned on mouseover events, reveals precise university counts for each state.

Nov 1, 2025
Loading thumbnail…

Fork of React Starter

This choropleth map shows the number of universities per U.S. state, using an orange sequential color scale on an Albers projection via `d3.geoAlbersUsa`. The map renders SVG paths for states loaded from a TopoJSON source (`us-atlas`), converted to GeoJSON with the `topojson@3` library. State data is embedded in the page, and hovering displays a tooltip with the state name and university count, powered by D3 v7's selection and event handling. States without data appear gray.

Nov 1, 2025
Loading thumbnail…

Fork of Fork of Blank Slate with Hot Reloading

This choropleth shows the number of universities per U.S. state, with darker orange shades indicating higher counts and gray for states without data. Hovering over a state reveals a tooltip with its name and university total. The visualization uses d3.geoPath with a geoAlbersUsa projection to render TopoJSON state boundaries from us-atlas, and d3.scaleSequential with an interpolateOranges color scheme to encode values. State data is provided via a hardcoded array in USA.html, while the separate usa.js version loads the same values from a CSV file.

Nov 1, 2025
Loading thumbnail…

ICE-8 1a Sandeep Babu

This choropleth map displays the global distribution of universities, using a blue sequential color scale where darker shades represent higher counts and gray indicates missing data. Built with D3 v7, it projects country boundaries from a TopoJSON world atlas onto an SVG canvas using `geoNaturalEarth1()` and `geoPath`. University counts from a local CSV file populate a lookup table, mapping country names to values that drive the fill color. Interactive tooltips appear on mouseover, revealing the country name and its university count via `d3.select` and DOM manipulation.

Nov 1, 2025
Loading thumbnail…

Fork of Fork of Blank Slate with Hot Reloading

This choropleth map shows the number of universities per U.S. state, with darker orange shades representing higher counts and gray for states without data. It uses d3.json to load TopoJSON from the us-atlas package, converts it to GeoJSON via topojson.feature, and projects it with d3.geoPath and d3.geoAlbersUsa. A d3.scaleSequential with d3.interpolateOranges maps values to colors. Hovering over a state triggers a tooltip that displays the state name and its university count. The example uses embedded data but also includes a CSV variant.

Nov 1, 2025
Loading thumbnail…

Fork of Fork of Blank Slate with Hot Reloading

This world map visualizes the number of universities in 24 countries, using a choropleth color scale from light to dark blue on a natural Earth projection. The D3.js v7 code loads country boundaries from a TopoJSON file via `d3.json`, converts them with `topojson.feature`, and renders them as SVG paths using `d3.geoPath`. A color scale is created with `d3.scaleSequential` and an `interpolateBlues` interpolator. Hovering over a country triggers a mousemove event that displays a tooltip showing the country name and its university count, with data sourced from a CSV file.

Nov 1, 2025
Loading thumbnail…

Fork of Fork of Blank Slate with Hot Reloading

A minimal Observable notebook demonstrates hot reloading by displaying a large, centered “Hello World!” message. The example uses vanilla JavaScript to set the container’s inner HTML with an inline style for a font size of 217 pixels. It highlights a simple interaction where alt-dragging the number changes the font size, though the code shows only the static render. The visualization relies on the Observable runtime’s `main` function and standard DOM manipulation, with no external charting libraries or data sources.

Nov 1, 2025
Loading thumbnail…

ICE-7 Area Chart Sandeep Babu 11821337

This area chart visualizes the average number of goals or points scored by professional athletes at each age, based on data from the included SportsData.csv file. The visualization aggregates the raw data by age and plots the resulting mean values as a filled area, using a blue line to trace the trend. Built with D3 v7, the chart employs `d3.group` and `d3.mean` for data aggregation, `d3.scaleLinear` for axes, and the `d3.area` and `d3.line` generators to render the SVG path. A dark themed interface with light-colored axes labels and a semi-transparent fill provides a clear visual representation of performance across age groups.

Oct 26, 2025
Loading thumbnail…

ICE-7 Line Chart Sandeep Babu 11821337

This line chart visualizes the average Goals/Points for professional athletes across different ages, derived from a CSV dataset of sports statistics. The visualization groups athletes by age, calculates the mean performance metric for each age group, and plots these averages as a continuous trend line. The chart uses D3 v7 with the `d3.csv` and `d3.autoType` functions to load and parse the data, followed by `d3.group` to aggregate values, `d3.scaleLinear` for axis scaling, and `d3.axisBottom`/`d3.axisLeft` for the axes. The line itself is drawn using the `d3.line` interpolation method, rendered as an SVG path with a blue stroke on a dark background.

Oct 26, 2025
Loading thumbnail…

ICE-7 Pie Chart Sandeep Babu 11821337

This pie chart visualizes the share of total goals or points contributed by each sport—football, basketball, and cricket—using data from SportsData.csv. The chart aggregates player statistics via `d3.rollup` and `d3.sum`, then renders slices with `d3.pie` and `d3.arc`, using a Tableau10 color scale from `d3.scaleOrdinal`. Labels appear on each slice using `labelArc.centroid`, and a legend lists the sports. The visualization is built with D3 v7 and rendered as SVG, with dark-themed styling applied.

Oct 26, 2025
Loading thumbnail…

ICE-7 Reusable Scatter plot Sandeep Babu-11821337

This scatter plot visualizes sports statistics from a CSV dataset, showing assists against goals or points for professional athletes. Points are sized by matches played and colored by sport (football, basketball, or cricket). Hovering over a point reveals a tooltip with player details. The visualization uses a reusable D3 v7 chart factory pattern with `d3.scaleLinear`, `d3.scaleSqrt`, and `d3.scaleOrdinal`, rendering to SVG with configurable margins, axes, and labels.

Oct 26, 2025
Loading thumbnail…

Fork of Vanilla D3 Vibecoding Template

This interactive dashboard displays sports statistics from a CSV file, offering four switchable D3 v7 visualizations. A scatter plot compares athletes' goals or points against their assists, color-coded by sport, while a pie chart shows the proportional share of players per sport. Line and area charts plot matches played against goals or points, with the area chart filling the space beneath the line. All charts are rendered as SVG and include interactive tooltips on data points, using d3.csv for data loading and d3.rollups for aggregation.

Oct 26, 2025
Loading thumbnail…

Sports dataset ICE-5 Assignment

This visualization presents a sports dataset summary with a preview table of the first five rows and dynamic SVG bar charts. The page loads data from a raw Gist CSV file using `d3.csv` and automatically detects numeric columns for statistical analysis. Using D3 v7, it renders horizontal bars scaled with `d3.scaleLinear`, positioned within an SVG viewBox, while CSS styles the accompanying tables and decorative shapes. The interface provides column names, data types, and descriptive statistics like mean, min, and max for each numeric field.

Oct 6, 2025
Loading thumbnail…

Fork of Vanilla D3 Vibecoding Template

This interactive scatter plot examines Fisher’s Iris dataset, mapping sepal length against sepal width for three species. Points are colored by species using a BBC-inspired palette, with a legend enabling hover highlighting that fades non-selected points. Built with D3 v7, the visualization uses `scaleLinear`, `scaleOrdinal`, `axisBottom`, `axisLeft`, and a `ResizeObserver` for responsive dimensions. All styling and layout parameters are configured centrally in `config.js`, and data loads asynchronously from a CSV via `d3.csv`.

Oct 5, 2025