srividyamadas@gmail.com

Tree

Ice-8

Network Graph

Fork of Network Graph

ICE-8

Fork of MY Tree ICE-8

Fork of Scatter Plot Using Different Data Set

This scatter plot visualizes the relationship between state-level values for the years 2020 and 2024, with each circle representing a state. The chart compares economic or demographic metrics across these two time points, revealing correlations or shifts over the period. Built with D3 v6, the visualization uses reusable module patterns via `scatterPlot.js`, employing `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` for scales and axes. Data is loaded from a CSV file using `d3.csv` and parsed with a custom `parseRow` function, then rendered as SVG circles with steelblue fill and 0.7 opacity. The example demonstrates a modular, data-driven approach to scatter plot construction.

Fork of Electric Bar Chart Using d3.stack

This visualization displays the revenue of ten selected Indian states from 2020 to 2024 as an overlapping area chart, with each state’s trend represented by a semi-transparent colored band. The code loads CSV data via `d3.text`, filters it to the desired states, and constructs the chart using the D3 v7 `d3.area()` generator with `d3.scaleLinear` for both axes. SVG rendering includes `d3.axisBottom` and `d3.axisLeft` for the year and revenue scales, while a legend lists each state with its matching color from `d3.scaleOrdinal(d3.schemeCategory10)`. The chart sources data from a GitHub gist and is rendered entirely in SVG.

Fork of Fork of Line Chart - US Airline Traffic - Number of Flight

This line chart displays the revenue of ten Indian states from 2020 to 2024, with each state represented by a distinct colored line and a legend. The data is loaded from a remote text file and parsed to extract only the selected states. Using D3.js v7, the code defines linear scales for the x-axis (years) and y-axis (revenue), then draws paths with the `d3.line` generator and applies the `d3.scaleOrdinal` color scheme. Axes are rendered with `d3.axisBottom` and `d3.axisLeft`, while SVG text elements provide the chart title and axis labels.

Fork of Line Chart - US Airline Traffic - Number of Flight

This example visualizes population trends for five selected countries—India, the United States, China, Japan, and Germany—from 2011 to 2021, using a multi-line chart where each line is color-coded by country. It reads a CSV file from a GitHub gist and parses the text with `d3.text`, then builds the chart with D3 v3. The visualization uses `scaleLinear` for both axes, `d3.line` for path generation, and `d3.axisBottom` and `d3.axisLeft` for the year and population scales, with a legend and title added as SVG text.

Fork of linechart

This line chart displays the population of five selected countries—India, the United States, China, Japan, and Germany—from 2011 to 2021. It loads comma-separated data via `d3.text`, parses it, and renders multiple lines using `d3.line` with `d3.curveLinear`. Axes are generated with `d3.axisBottom` and `d3.axisLeft`, and a legend lists each country’s color from `d3.scaleOrdinal` with `d3.schemeCategory10`. The visualization uses an SVG rendering approach within a fixed-width container, labeling the y-axis in billions.

Fork of Reusable Canvas

A reusable scatter plot displays the relationship between two numeric variables from a CSV file, with steel-blue semi-transparent circles plotted against labeled axes. Built with D3 v6, the example demonstrates a modular architecture where the `scatterPlot` function encapsulates the chart logic, while `branding.js` handles data loading via `d3.csv` and passes parsed values to the plot. The SVG canvas resizes to 80% of the window width, and the plot is instantiated with configurable accessors for x and y values, margins, and point radius.

Fork of D3 scatterplot

This example presents three pie charts showing tourist visitor numbers for 2019, 2020, and 2021, with each chart displaying the distribution of visitors across different tourist places. It uses Chart.js to render the charts onto canvas elements, fetching the dataset from a remote text file and parsing the comma-separated values to extract yearly visitor counts. The code creates a separate chart for each year, assigning random background colors to each slice and placing the legend on the right side. The visualization highlights the relative popularity of tourist destinations across the three years.

Srividya Bargraph

This example visualizes the population of Indian states in 2011 as a bar chart. The chart uses a vertical bar for each state, with the height encoding the population value, and includes labeled axes for states and population. The code utilizes D3 v7’s `scaleBand`, `scaleLinear`, `axisBottom`, and `axisLeft` APIs to render the SVG, with bars colored steelblue and a hover effect. Population data is loaded from a CSV file via `d3.csv` with `d3.autoType`, and the chart is displayed alongside an analysis section.

Srividya Scatter Plot

This scatter plot displays the relationship between state area and 2011 population for U.S. states, with population on the y-axis and area on the x-axis, showing a positive correlation. Using D3.js v7 (d3.v7), the visualization applies d3.scaleLinear for both axes, d3.axisBottom and d3.axisLeft for ticks, and renders data points as SVG circles. The data is loaded from a CSV file via d3.csv, with each dot representing a state.

Vidya Bar graph

This bar chart displays the top 10 countries by total population, with each bar representing a country’s population in thousands. It uses D3.js to sort the data in descending order and render the bars, while the `@curran/responsive-axes` library handles the responsive axes and labels. The visualization adapts to container resizing via `observeResize`, and data comes from the UN population estimates 2024 dataset. A gray inner rectangle highlights the plot area, with bars and axis labels positioned using scales for band and linear mappings.

Fork of Let's make a Bar Graph with D3.js

This fork of a D3.js bar chart example visualizes population data for ten countries, with China and India leading in size. The chart is rendered using the `d3.v7` library, which scales bar heights according to the CSV dataset. The visualization is built with a simple HTML layout, styled with CSS, and loads data from a `data.csv` file. The code demonstrates a straightforward bar graph implementation using D3's scaling and SVG rendering capabilities.