Shridhar Kshirsagar

@cosmos225·14 public vizzes

Social Network Graph ICE-8

A force-directed social network graph shows nine people arranged in groups, with links weighted by thickness to indicate connection strength. The visualization uses D3.js v4 with the legacy `d3.layout.force` API, rendering nodes as blue circles with green strokes and black labels via SVG. Data comes from a local `graph.json` file, and nodes are draggable through the force drag behavior, updating positions on each tick event.

Apr 13, 2023

Loading thumbnail…

Family Tree ICE-8

This example presents a family tree using a hierarchical layout rendered as an SVG. It stratifies flat parent-child data with `d3.stratify` and computes node positions via `d3.tree`. Nodes are color-coded by generation depth (red, blue, green), while cubic Bezier paths connect parents to children. The code also labels each person with `text` elements, offset slightly from their corresponding circles. The visualization demonstrates a clean, minimal approach to displaying genealogical relationships with D3 v5 in a React environment.

Apr 13, 2023

Loading thumbnail…

Country map of India - ICE8

This example displays an interactive choropleth map of India, showing district-level subdivisions with distinct colors and state boundaries. Users can zoom and pan the visualization. The map renders district and state features from TopoJSON files using the `d3.geoMercator` projection and `d3.geoPath` generator. Hovering over a district reveals a tooltip with its name and state, while the `d3.zoom` behavior enables view manipulation. The project uses the D3 library, TopoJSON for geographic data, and React as the rendering framework.

Apr 12, 2023

Loading thumbnail…

World Map :- ICE-8

This example displays a world map using an equal-earth projection on an SVG canvas. The visualization renders ocean and landmasses as distinct shaded regions, with country boundaries outlined in black. The code loads geographic data from the World Atlas TopoJSON dataset and converts it to GeoJSON using the `feature` function from topojson. It relies on d3’s `geoEqualEarth` projection and `geoPath` to draw the sphere and country shapes.

Apr 12, 2023

Loading thumbnail…

ICE-7 Reusable scatter

This reusable D3 scatter plot visualizes the Iris dataset, mapping petal width against sepal length with distinct symbol shapes for each species. Built with d3.scaleLinear, d3.scaleOrdinal, and d3.symbol, it encodes species categories through different symbol types. The chart renders as an SVG, filling the viewport, and includes axis labels via d3.axisLeft and d3.axisBottom. The implementation uses a custom scatterPlot function called with a fluent interface to set dimensions, margins, data accessors, and symbol size.

Mar 25, 2023

Loading thumbnail…

ICE-7 Resuable scatterplot

This reusable scatter plot visualizes the Iris dataset, mapping petal width against sepal length and encoding species with distinct D3 symbol shapes (circles, crosses, and diamonds). Built with the reusable chart pattern, the `scatterPlot()` function configures scales, axes, and symbol generators via chained accessor methods. The visualization renders as animated SVG, with axes created using `axisLeft` and `axisBottom`, while `scaleOrdinal` and `symbol` map categorical data to geometric marks. Data loads asynchronously via `d3.csv` and updates smoothly through D3’s data join.

Mar 24, 2023

Loading thumbnail…

ICE 6 : Penguin dataset scatterplot

A scatterplot of the Penguin dataset plots Flipper Length (mm) against Body Mass (g), with each circle colored by species: yellow for Adelie, green for Gentoo, and red for Chinstrap penguins. It uses d3.csv to load the data, d3.scaleLinear, d3.extent, d3.axisLeft, and d3.axisBottom to render an SVG chart. The code appends circles via selection joins, sets bold axis labels, and includes a title, with margins and window-sized dimensions.

Mar 11, 2023

Loading thumbnail…

ICE-6 : Penguins scatterplot

This scatterplot uses D3 v5 to visualize the relationship between culmen length and culmen depth in penguins. The SVG chart displays data points as colored circles, with linear scales mapping the measurements to x and y axes. The code employs `scaleLinear`, `extent`, and `axisBottom`/`axisLeft` functions to construct the axes and plot. Data is loaded as CSV from a GitHub gist, with numeric values parsed before rendering. The chart includes axis labels and a title, styled through external CSS.

Mar 10, 2023

Loading thumbnail…

ice6

This visualization shows the effect of parental education level on students' math scores using a horizontal bar chart, with green rectangles encoding score magnitudes. The chart displays average math scores across different parental education categories, using a linear scale for the x-axis and a band scale for the y-axis. The code uses d3.csv to load the data, d3.scaleLinear and d3.scaleBand for scaling, and d3.axisLeft and d3.axisBottom for axes, rendering the visualization as SVG.

Mar 10, 2023

Loading thumbnail…

ICE 6 : bar chart for parental level of education vs math score

This bar chart visualizes the relationship between parental level of education and student math scores, with each bar representing a category of parental education. The bars are colored using a green color scale via `d3.scaleQuantize` and `colorbrewer.Greens`, with a color legend created using `d3.legendColor`. The visualization is built with D3 v7, rendering to an SVG, and reads data from a CSV file loaded via `d3.csv`. It uses `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis, with axis labels and a title added via SVG text elements.

Mar 10, 2023

Loading thumbnail…

ICE 6: Bar chart showing math scores over parental level of education.

This bar chart displays math scores as they relate to parental level of education, using data loaded via `d3.csv` from a GitHub gist. The visualization employs `d3.scaleBand` and `d3.scaleLinear` for positioning, with a `d3.scaleQuantize` color scale based on the score values to encode magnitude. Each bar’s height and fill are determined by the corresponding salary data, despite the chart’s title referencing the original dataset. Axes are rendered with `d3.axisBottom` and `d3.axisLeft`, and a categorical color legend is included via the `d3.legendColor` API.

Mar 9, 2023

Loading thumbnail…

ICE 6 - Bar

This stacked bar chart displays the estimated 2010 religious breakdown of the 20 most populous countries, with each bar segmented by religion proportion. Hovering over bars reveals tooltips with exact population counts, while hovering over the color legend highlights the corresponding religious group in the foreground layer. The visualization uses D3.js version 3.5.5 for rendering SVG and animation, with d3-legend for the interactive color key and d3-tip for tooltips. Data originates from Pew Research’s Global Religious Landscape, processed via a custom script.

Mar 9, 2023

Loading thumbnail…

ICE 5:Loading and Parsing csv data with D3.js

This example displays summary statistics from the Students Performance in Exams CSV dataset, showing the file size in kilobytes, row count, and column count as text on a webpage. It loads the remote CSV file using D3.js v5’s `d3.csv()` method, which returns a promise, and then formats the data with `d3.csvFormat()` to calculate its byte size. The page also includes a descriptive overview of the dataset’s features, such as gender, parental education, and test scores, with a styled interface built using custom CSS.

Mar 2, 2023

Loading thumbnail…

Shridhar Kshirsagar's Fork.js!

This example demonstrates fundamental DOM manipulation with D3.js by constructing a smiley face with animated eyebrows, hair, ears, a beard, and a nose, all rendered as SVG elements. The code imports `select` and `arc` from D3 v5, uses `transition().duration()` to move the eyebrows up and down, and employs `arc()` to create the mouth. SVG attributes such as `cx`, `cy`, `x`, `y`, `width`, and `height` position each shape, while the face is centered using a group translation based on the viewport dimensions.

Feb 24, 2023