satishbabuNalajala

@satishbabuNalajala·4 public vizzes

Iris Dataset Scatter Plot

This example visualizes the Iris dataset as a scatter plot, mapping petal length on the x-axis and petal width on the y-axis, with points colored by species (setosa, versicolor, and virginica). Each circle’s radius is fixed, while its horizontal and vertical offsets correspond to the raw sepal measurements via the `rx` and `ry` attributes. The SVG renders using D3 v6, with `scaleLinear` and `extent` for scaling, `axisLeft` and `axisBottom` for axes, and `csv` to load the external data file.

Jun 26, 2022

Loading thumbnail…

Satish Rendering Bar chart with React & D3

This example shows a horizontal bar chart displaying the number of lost games for 10 teams, loaded from a CSV file hosted on GitHub. The visualization combines React and D3 by using React hooks to fetch and store the data, then rendering SVG elements created with JSX. D3’s `d3.csv`, `scaleBand`, and `scaleLinear` are used for data loading and scaling, while React manages the component state and SVG output. Blue vertical grid lines and axis tick labels are generated for the numeric scale, with team names labeled on the left.

Jun 26, 2022

Loading thumbnail…

ICE-5: Welcome to Satish Data visualization

ICE-5: Welcome to Satish Data visualization presents a single-page D3.js v7 example. It displays a bold heading and a large pre-formatted text block summarizing a remote CSV file's size, row count, and column count. The page prominently features a full-width bike SVG image loaded directly from a GitHub URL. The visualization uses the `d3.csv` and `d3.csvFormat` APIs to fetch and analyze the Sathish.csv dataset, rendering the summary statistics in a styled `pre` element alongside the imported bike graphic.

Jun 24, 2022

Loading thumbnail…

Satish

A smiling face built with SVG shapes demonstrates D3.js DOM manipulation and animation. Yellow circles form the head and eyes, while rectangular eyebrows and an arc-based mouth complete the figure. The code uses D3 v5 selections and transitions, with `transition.attr` moving the eyebrow group upward and back over two 2-second intervals. The `arc` generator from the d3-shape module creates the mouth path, and explicit SVG attributes position each element relative to a centered group.

Jun 24, 2022