mogantirudhrani@gmail.com

Fork of (d3.js)Network Graph and Family Tree

(d3.js)Network Graph and Family Tree

Fork of Circles with D3

rudhranilinechart

A line chart tracks population growth over time, using a blue stroke to connect annual data points from a CSV dataset. The visualization relies on D3 v7 to load the external population.csv, parse numeric values for year and total_population, and render an SVG with linear scales for the axes. The code constructs a line generator, applies it to a path element, and adds axis groups with tick labels, with the y-axis scaled from zero to the maximum population value.

rudhranipiechart

This pie chart visualizes population data across regions, with each slice labeled by region name and population in millions. The chart is rendered as an SVG using D3.js v7, which fetches CSV data via `d3.csv` and applies `d3.pie` and `d3.arc` to generate the slices. A color scale (`d3.scaleOrdinal`) assigns distinct colors from `d3.schemeCategory10`, and a legend on the right identifies each region. The labels use `arcGenerator.centroid` for positioning, while the data source is a remote CSV file.

rudhraniarea

This area chart displays population values for multiple regions extracted from a single CSV row, using a light blue filled area to show magnitude across categorical region names on the x-axis. The visualization loads data via `d3.csv` from a remote GitHub gist, then builds an SVG with D3 v7. It uses `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and an `d3.area` generator to create the path. The code appends axes with `d3.axisBottom` and `d3.axisLeft`, styling the chart with margins and centered labels, while handling errors via a catch callback.

rudhraniarea

This animated scatter plot visualizes the Palmer Penguins dataset, cycling through different numerical attributes such as body mass, culmen depth, flipper length, and culmen length. It uses D3.js scales, axes, and SVG path rendering with distinct geometric markers (squares, triangles, circles) to encode species. The chart updates every two seconds, rotating the x-axis variable to reveal patterns across measurements.

rudhrani

This line chart visualizes atmospheric CO2 concentration over time, using a single black line to show the trend across years. The chart includes labeled axes for year and CO2 in parts per million, with a light gray background rectangle framing the plotting area. The visualization is built with d3’s scaleTime, scaleLinear, and line generators, while the axes are rendered via the @curran/responsive-axes helper. Data comes from the @curran/keeling-curve-data package, and the chart adapts responsively to container resizing through observeResize from @curran/responsive-axes.

rudhrani scatterplot

This animated scatter plot from the reusable chart pattern uses D3 version 6 to visualize the Iris dataset, cycling through male, female, urban, and rural population columns every two seconds. It shows the relationship between a selected population metric on the x-axis and total population on the y-axis, with axes scaled linearly via `scaleLinear` and rendered using `axisLeft` and `axisBottom`. The plot updates its x-axis domain and circle positions through `setInterval` and `scatterPlot().xValue()`, while the SVG renders in a full-viewport layout with the Share Tech font.

Rudhrani scatter plot

This animated scatter plot uses D3.js to visualize population data from the Iris Dataset, mapping male population to the x-axis and total population to the y-axis. The reusable chart component, built with D3’s scaleLinear, axisLeft, and axisBottom, renders SVG circles with a fixed radius. Every two seconds, the x-axis dynamically switches among four population columns—male, female, urban, and rural—while the y-axis remains constant, creating a cycling exploration of demographic relationships. The code loads CSV data via d3.csv, applies margin-based scaling, and updates the visualization in place using selection.join.

rudhrani ice-6

This visualization displays employee salary data as a scatter plot, with each circle representing an individual employee positioned by their salary on the x-axis and employee ID on the y-axis. The chart uses d3.csv to load data from an external CSV file, d3.scaleLinear for the salary axis, and d3.scaleBand for the categorical employee ID axis. The SVG rendering includes axes generated with d3.axisLeft and d3.axisBottom, while circles are appended via the d3 join pattern with a fixed radius of five pixels.

Rudhrani ICE-6

This bar chart displays employee salary distribution by department, with each department listed on the vertical axis and its corresponding salary represented by a horizontal bar. The data is loaded from a CSV file using `d3.csv`, sorted in descending order, and rendered as React components within an SVG. It uses `scaleBand` for the y-axis and `scaleLinear` for the x-axis, with grid lines and axis labels generated via D3 scale methods.

rudhrani assignment-5

This example visualizes a small garden of flowers arranged in a grid, with each flower composed of six orange petals and a yellow center. It first loads a CSV dataset of flower data from a remote URL, displaying the file size, row count, and column count in a message below. The garden itself is rendered as SVG using D3.js, where each flower is created programmatically by drawing petal paths with quadratic Bezier curves. The code demonstrates D3’s data binding and path generation, while the CSV summary highlights the library’s file-parsing capabilities.

Fork of creaing a flower with d3.js

This example creates a illustrated house scene using D3.js, showing a brown house with a roof, door, windows, sun, clouds, fence, and palm trees rendered as SVG shapes. The code uses D3 v7 selection methods and attributes to build each element individually, including a d3.line path with curveBasisClosed for cloud shapes and appended SVG primitives like rect, polygon, circle, and line elements. It demonstrates importing D3 from UNPKG and styling the scene with a separate CSS file.

fork creata face

A cartoon landscape scene is drawn using a mix of static SVG elements and D3.js API calls. The visualization shows a yellow smiley face, complete with eyes, a brown house with a roof, door, and windows, plus palm trees, clouds, a sun, and a fence. The code uses D3 selections to append and style each shape, leveraging SVG primitives like circles, rectangles, polygons, lines, and a path generated with `d3.line()` and `curveBasisClosed` for the clouds. The scene is rendered in React and using vanilla SVG markup.