A

anirudhrao345@gmail.com

@senpaisolos·16 public vizzes

Loading thumbnail…

Ice 8-4

A small co-authorship network shows six fictional authors as nodes and seven collaboration links as edges. Bob, highlighted in red and enlarged, is visually emphasized as the central figure, with thicker links connecting to his co-authors. The example demonstrates a force-directed layout using d3.forceSimulation, d3.forceLink, and d3.forceManyBody for physics-based positioning, while d3.drag enables interactive node manipulation. Node positions update continuously via the simulation's 'tick' event, and SVG circles and lines render the graph.

Loading thumbnail…

ICE 8-3

This radial tree example visualizes a three-level hierarchy of programming languages, categorized first by paradigm (Compiled, Interpreted, Functional) and then by individual language names. Built with D3.js v7, it uses the `d3.hierarchy`, `d3.tree`, and `d3.linkRadial` APIs to compute the layout, with each node’s shape and color (circle, square, triangle; black, blue, green) varying by depth. Custom SVG paths are drawn for links and nodes, and text labels are positioned according to the node’s angle.

Loading thumbnail…

ICE 8-2

A choropleth map of the United States displays population density in people per square kilometer, using a yellow-to-red sequential color scale for each state. The map uses an Albers USA projection with `d3.geoPath`, loading state boundaries as TopoJSON from the us-atlas package. State names and density values appear as labels for the most densely populated regions, and a gradient legend at the bottom right maps color to density values. Tooltips on each state show its name and population density on hover.

Loading thumbnail…

ICE 8-1

This visualization displays a world map using the Natural Earth projection, with countries filled in pastel green and separated by white borders. The map loads country boundaries from the world-atlas TopoJSON dataset via d3.json, then converts them to GeoJSON features using topojson.feature. Each country path is rendered as an SVG element through d3.geoPath, and hovering reveals the country name through an appended SVG title tooltip. The code relies on d3.v7 and the topojson library for geographic data handling.

Loading thumbnail…

ICE 8 - 1

This visualization displays a choropleth world map highlighting population distribution across selected countries using a red sequential color scale. The SVG-based map uses the Mercator projection via `d3.geoMercator` and renders country boundaries from TopoJSON world-atlas data with `d3.geoPath`. Population values for five nations, including India and China, are mapped through `d3.scaleSequential` with `d3.interpolateReds`; countries without data appear gray.

Loading thumbnail…

ICE 7 - 1

A reusable scatter plot displays tree height against trunk circumference, with points colored by species. Built as a custom D3.js chart function, it loads CSV data from a GitHub repository and renders an SVG visualization with axes and labels. The implementation uses D3's scaleLinear, extent, axisBottom, and axisLeft APIs, plus a color scheme, to create an interactive, configurable plot.

Loading thumbnail…

ICE 7 Q1

This example presents a reusable scatter plot that explores the relationship between tree height and circumference, with points colored and shaped by species. Built with D3 v7, it renders SVG symbols and includes interactive tooltips that display species, height, and circumference values on hover. The chart leverages a custom `scatterPlot` function with getter/setter methods for configurability, and uses `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.axisBottom`, and `d3.axisLeft` to construct the visualization. Data is loaded asynchronously from a remote CSV file.

Loading thumbnail…

ICE 7 Q4

This visualization shows tree height over time as a smooth area chart, with a blue filled region and a dark blue line tracing the trend across planting years. It uses D3 v7 to load a CSV dataset from a GitHub repository, parse the numeric values, and render the chart as SVG. The code applies d3.area and d3.line with curveMonotoneX for smooth transitions, plus d3.axisBottom and d3.axisLeft for the axes. The x-axis displays the year planted, while the y-axis measures height in meters.

Loading thumbnail…

ICE 7 Q3

This line chart displays tree height in meters against the year planted, using data from a CSV file hosted on GitHub. The visualization loads the dataset with `d3.csv`, sorts it chronologically, and draws a monotone-smoothed line with `d3.line` and `curveMonotoneX`. Axes are generated via `d3.axisBottom` and `d3.axisLeft`, with labels for both variables. The SVG rendering is configured with fixed dimensions and margins, encoding the quantitative relationship between planting year and growth outcome.

Loading thumbnail…

ICE 7 Q2

This visualization combines a scatter plot and a pie chart to explore a dataset of 100 trees, using D3.js v7 to render both as SVGs. The pie chart, constructed with `d3.pie()` and `d3.arc()`, shows the distribution of tree species, with each slice colored via a categorical scale and labeled with its species name. A manually built HTML legend maps colors to species names, while the accompanying scatter plot (from a separate script) provides an additional view of the raw data. The pie chart’s data is aggregated from a CSV file using `d3.rollup()` to count trees per species, and the rendering relies on SVG `path` and `text` elements.

Loading thumbnail…

PART 3B

This combined bar and line chart visualizes monthly sales and profit for Product A from 2018 to 2022, with semi-transparent green bars representing sales (right axis) and a red line with dots representing profit (left axis). Interactive hover effects increase bar opacity and dot radius, while grid lines and axis labels clarify the dual-scale comparison. The example loads CSV data from GitHub using d3.csv, filters it for Product A, and builds the SVG scene with d3.scaleTime, d3.scaleLinear, d3.axisLeft, d3.axisRight, and d3.axisBottom, all within the D3 v7 framework.

Loading thumbnail…

part 3A

This chart shows Product A's monthly sales, profit, and expenses from 2018 to 2022 as a multi-series line chart. Three colored lines (red, blue, and green) are drawn using `d3.line` and plotted on shared time and linear axes, with gridlines and axis labels. The data is loaded from a remote CSV using `d3.csv`, parsed with `d3.timeParse`, and filtered to Product A. The SVG rendering includes interactive hover effects on lines and data points, with a legend and ordinal color scale.

Loading thumbnail…

ICE part 2

This interactive scatter plot visualizes the Iris dataset, mapping sepal length against petal length to reveal species clusters. The visualization uses D3.js v7 to create circles whose radius starts at zero, expanding to full size, with hover interactions that enlarge points. It employs `d3.scaleLinear` for both axes, `d3.scaleOrdinal` for species color mapping, and grid lines via `d3.axisLeft` and `d3.axisBottom`. Data is loaded from a CSV URL using `d3.csv`.

Loading thumbnail…

ICE 6 part 2

This scatter plot uses a D3.js v7 SVG animation to explore the relationship between tree height and circumference, with each circle representing a tree from a CSV dataset, colored by borough. The visualization begins with all points at radius zero, then animates them to their full size using SVG circle elements and D3's `.selectAll`, `.enter`, and `.attr` methods. Interactive mouseover and mouseout events enlarge individual dots and highlight them with a contrasting stroke. The chart uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` for color mapping, and `d3.axisBottom` and `d3.axisLeft` for gridlines and tick labels.

Loading thumbnail…

Fork of HTML Starter

This interactive bar chart visualizes the distribution of tree species from a CSV dataset, displaying the count of each species alongside tooltips that reveal average height and circumference. Built with D3 v7, the visualization employs `d3.csv` for data loading, `d3.rollups` for aggregation, and `d3.scaleBand` and `d3.scaleLinear` for axes. Bars animate upward on load, use a green sequential color scale, and respond to hover with opacity changes. The SVG rendering includes rotated x-axis labels and a styled title.

Loading thumbnail…

ICE5

This bar chart displays tree heights for different species from an urban trees dataset. Each bar’s height corresponds to the measured height in meters. Built with D3 v7, the visualization loads data from a CSV file using `d3.csv`, maps species to the x-axis with `d3.scaleBand`, and maps heights to the y-axis with `d3.scaleLinear`. The SVG renders bars with a blue fill, rotated x-axis labels, and axes generated via `d3.axisBottom` and `d3.axisLeft`.