Skip to main content
Log in
B

Bala Sai Krishna

@SaiBala07·17 public vizzes

Loading thumbnail…

network

This example visualizes a social network as a force-directed graph, showing eight people and their friend relationships with links labeled by relationship type. Nodes are rendered as grey circles with names, and lines with arrowheads indicate directed connections based on a JSON data file. The graph uses d3.forceSimulation with forceLink, forceManyBody, forceCollide, and forceCenter to position nodes, while drag interactions let viewers move nodes. Hovering highlights nodes with a green stroke via CSS class toggling.

Mar 30, 2023
Loading thumbnail…

tree animals

This example displays a hierarchical classification of animals as an interactive tree diagram. The visualization organizes animals into branches such as Vertebrates and Invertebrates, with child nodes for specific groups like Mammals, Birds, and Arthropods. Using D3.js version 3.5.17, the code employs the `d3.layout.tree` and `d3.svg.diagonal` APIs to create the structure, with SVG rendering and smooth animations on updates. Node colors are coded by category level, while strokes remain grey, and the diagram can be expanded or collapsed through user interaction.

Mar 30, 2023
Loading thumbnail…

Austrailia

This visualization displays Australia's electoral districts as colored SVG paths, each filled with a categorical color based on its `Elect_div` property and labeled with the state name centered via `d3.geoPath` centroids. Using `d3.geoMercator` projection and `topojson.feature`, the code loads a TopoJSON file and renders the geometry. State labels are appended as SVG text elements, and the color scale uses `d3.scaleOrdinal` with `schemeCategory10`.

Mar 30, 2023
Loading thumbnail…

tree of animals

This interactive tree diagram depicts a biological classification of animals, starting from a root "Animals" node and branching into vertebrates and invertebrates, then further into subgroups like mammals, birds, and arthropods. The visualization uses the D3.js library (version 3) with a tree layout, SVG rendering for nodes and links, and a diagonal path generator for curved connections. Node and link styles are defined via CSS, while the layout animates with a 750-millisecond transition, although the data itself is static and embedded directly in the code.

Mar 30, 2023
Loading thumbnail…

world map projection

This example presents a world map projection using the Natural Earth projection. It visualizes country boundaries and graticules, with landmasses filled in teal and a light gray sphere backdrop. The map is built with d3.geoPath and d3.geoNaturalEarth1, using TopoJSON data from the world-atlas package. React manages the SVG rendering, while the topojson library’s `feature` and `mesh` functions prepare the geographic data for display.

Mar 30, 2023
Loading thumbnail…

Fork of Jeevani ICE8

An animated collapsible tree diagram maps the hierarchical classification of animals, from the root "Animals" down through Vertebrates and Invertebrates to specific phyla and classes. Using D3.js v3, the SVG renders nodes as circles with colored strokes and labels, while curved diagonal links connect parent-child relationships. The tree layout organizes data from a hardcoded JSON array, with interactive node clicks triggering smooth transitions that expand or collapse branches. Level-based colors distinguish taxonomic depth, and the visualization updates dynamically via D3's tree layout and diagonal path generators.

Mar 29, 2023
Loading thumbnail…

Fork of ICE-8 state map

This example displays a choropleth map of the Andhra Pradesh state boundaries, rendered as green SVG paths with white strokes that turn red on hover. It uses the `geoMercator` projection and `geoPath` from d3.v5 to draw the TopoJSON features fetched from a GitHub-hosted Indian district boundary dataset. The React component loads the data with `useEffect` and `d3.json`, processing it through `topojson.feature` and `topojson.mesh`.

Mar 28, 2023
Loading thumbnail…

Fork of Line Chart

This fork of a line chart visualizes US auto sales from 2005 to 2022, plotting annual sales figures against time. The chart uses D3 v5’s `scaleTime` and `scaleLinear` to map the date and sales data, with `axisBottom` and `axisLeft` generating the labeled axes. A red path, created with the `line` generator, traces the sales trend. The code loads CSV data from a GitHub gist and renders the visualization as an SVG, with styling controlled by external CSS.

Mar 13, 2023
Loading thumbnail…

Fork of Pie Chart

This example presents a monthly expenditures dataset as a pie chart, with each slice labeled by department and accompanied by a legend listing exact dollar amounts. Built with D3 v5, the visualization uses `d3.pie()` and `d3.arc()` to generate the slices, `d3.scaleOrdinal` for color mapping, and SVG `<path>` elements for rendering. Data is loaded asynchronously from a CSV URL via `d3.csv`, and the legend is constructed with appended rectangles and text elements.

Mar 12, 2023
Loading thumbnail…

Fork of ICE 7 Area Chart

This area chart depicts annual car sales in India from 2009 to 2019, with a bold orange fill beneath a black curved line. The visualization uses D3 v5 APIs including `d3.csv`, `d3.scaleTime`, `d3.scaleLinear`, `d3.area`, `d3.line`, and `d3.curveBasis` to generate the SVG paths. Data is parsed from a remote CSV file, with yearly timestamps converted via `d3.timeParse`. The chart includes labeled axes, gridlines, and a formatted y-axis using `d3.format`.

Mar 12, 2023
Loading thumbnail…

Fork of Reusable scatter plot with different symbols

This scatter plot visualizes the Iris Dataset, mapping petal width to the x-axis and sepal length to the y-axis. Each data point uses a distinct D3 symbol—circle, cross, diamond, square, star, triangle, or wye—determined by the iris species through a `scaleOrdinal` and the `symbol` generator. The visualization is rendered as SVG using D3 version 6.7.0, with axes created via `axisBottom` and `axisLeft`. The code is organized as a reusable `scatterPlot` function, accepting configurable accessor functions and margin settings, and loads data from a GitHub Gist using `d3.csv`.

Mar 12, 2023
Loading thumbnail…

scatter Plot

This scatter plot visualizes penguin data showing flipper length against body mass, with each point colored by species. It also encodes bill dimensions through circle position attributes, though these are not visually distinct. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to map data to coordinates. Data is loaded via `csv` from a GitHub gist, and points are rendered as circles with species-based fill colors.

Mar 8, 2023
Loading thumbnail…

Religions of Largest 20 Countries

This visualization displays the population and predominant religion of the world's 20 largest countries using horizontal stacked bars. The chart uses a color legend to allow interactive filtering, where hovering over a religion highlights the corresponding segments of each bar while dimming the rest. Built with React, the visualization leverages D3.js for data binding, scales, and layout, while employing the `d3.layout.stack` API to create the stacked bar structure and `d3-tip` for custom tooltips showing exact values. The data is formatted with a custom SI tick formatter that abbreviates billions as "B".

Mar 8, 2023
Loading thumbnail…

Penguin Data set scatter Plot

This scatter plot visualizes the Palmer Penguins dataset, showing the relationship between flipper length and body mass for three penguin species, with each species color-coded (yellow, green, brown) using d3.scaleLinear for both axes. The chart renders as SVG circles with variable radii, where the radius is set to a constant 5 pixels, though the code also computes bill length and depth for each point. Data is loaded via d3.csv from a GitHub Gist, with axes rendered using d3.axisLeft and d3.axisBottom, and the visualization uses a margin-based layout scaled to the window size.

Mar 8, 2023
Loading thumbnail…

ICE-5

This example presents a summary of a dataset containing blood pressure and heart-related measurements, highlighting its file size and row count. The visualization uses a background image and displays the dataset information in a web page. Built with React and D3 v7, the code employs `d3.csv` to fetch and parse the dataset from a GitHub URL, and `d3.csvFormat` to calculate the file size. The SVG background and the page layout are styled using CSS, and the final output is rendered using both SVG and WebGL.

Mar 2, 2023
Loading thumbnail…

buddh

This example renders a stylized Buddhist figure using hand-authored SVG path data. The visualization layers nested loops that generate small rectangles in the background, while the main figure is drawn with a detailed path element. The code uses React to create the SVG elements, with static data arrays and transformation functions like `translate` and `scale` to position and resize the image. The figure is rendered with both filled and stroked paths, creating a two-tone effect against a black background.

Mar 1, 2023
Loading thumbnail…

funn face

This example renders a stylized "funny face" using React and SVG, assembling a gradient-filled background circle, two elliptical eyes, a curved mouth, and a set of teeth as separate components. The face is constructed from parametric parts like `BackgroundCircle`, `Eyes`, `Mouth`, and `Teeth`, with each accepting dimensions and offsets passed from a central `Face` component. The mouth and teeth utilize D3’s `arc` generator to create their paths, while teeth lines are drawn with hardcoded `line` elements. A linear gradient defined in `FaceContainer` fills the face’s background, and all parts are grouped and translated to the center of an SVG canvas.

Feb 23, 2023