yvarshachowdary@gmail.com

ICE-8:Network graph

This network graph visualizes the relationships between Amazon Prime titles and their primary genres. Red genre nodes connect to blue title nodes through a force-directed layout, with node positions determined by a physics simulation. The visualization uses D3 v5 with the `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` APIs to manage attraction and repulsion forces. Data is loaded via `d3.csv` from a GitHub gist, and nodes are rendered as SVG circles with text labels, supporting interactive dragging through D3's drag handlers.

ICE8-Tree graph

ICE 7

This example shows a reusable scatter plot of age versus salary, with triangular markers colored blue or green depending on whether each salary falls above or below the dataset’s median. The visualization uses D3 v6 with `d3.csv` for loading external data, `d3.scaleLinear` for axes, and `d3.symbol` with `d3.symbolTriangle` for point shapes. The reusable `createScatterPlot` function allows customization of colors, symbols, and titles. The plot renders as SVG, with axes labeled and styled via standard D3 transitions and selections.

ICE - 7 Pie Chart

This pie chart displays the top 10 countries by global CO2 emissions in 2018, using a dataset fetched via d3.csv from a remote gist. Each slice is labeled with the country name and colored using d3.scaleOrdinal with a predefined palette, while a legend on the right maps colors to countries. The visualization is rendered as an SVG using d3.pie and d3.arc, with the chart centered and scaled to fit the 960x500 canvas. The code filters and sorts the data to show only the largest emitters.

ICE-7 Area Chart

This area chart displays projected CO2 emissions for 2024 across different countries, with each country spaced evenly along the x-axis and emission values plotted on the y-axis. The chart uses a light green fill with a green stroke to emphasize emission levels, with country labels rotated for readability. Built with D3.js v7, the visualization fetches a CSV dataset, parses it with `d3.csvParse`, and renders an SVG area chart using `d3.area` and linear scales via `d3.scaleLinear`.

ICE-7 Line Chat

This line chart visualizes CO2 emissions for different countries in 2024, with each country placed along the x-axis and its corresponding emission value plotted on the y-axis. The chart uses d3.csvParse to load data from a remote CSV file and d3.scaleLinear to map country indices and emission values to pixel coordinates. A green path is drawn using d3.line, with rotated tick labels for country names and labeled axes using d3.axisBottom and d3.axisLeft. The SVG rendering includes custom margins and rotated text elements for readability.

ICE 7 Line Chart

This line chart shows India’s CO2 emissions over time, with a single steelblue line tracing annual values on a time-scaled x-axis and a linear y-axis labeled in MtCO₂e. The code uses d3.csv to load data, d3.timeParse to convert year strings into dates, and d3.scaleTime, d3.scaleLinear, d3.axisLeft, d3.axisBottom, and d3.line to render the SVG chart. The visualization filters out invalid data points before drawing, and the axes are labeled directly within the SVG group elements.

ICE - 7 Reusable D3 Scatter Plot

This example shows a reusable scatter plot that displays sales figures over time, with each circle representing a data point. It uses D3.js version 7 to render the visualization as SVG elements, with a band scale on the x-axis for categorical years and a linear scale on the y-axis for continuous sales values. The code leverages `scaleBand`, `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes, while interactive tooltips appear on mouseover using D3 event handlers. Data is loaded from a CSV file using `d3.csv`, and the plot includes animated transitions for tooltip visibility.

ICE-6 -Rendering Marks and Channels with React & D3

This example demonstrates how to integrate D3’s data-joining and animation capabilities with React’s component lifecycle to render dynamic bar charts. Using SVG for scalable, resolution-independent graphics, the visualization shows bars that animate in height while displaying numeric labels. The chart leverages D3 v6 scales and axes to map data to positions, with smooth transitions triggered by state changes in React. Marks such as rectangles and text are bound to data via keys, while channels like position, length, and color encode the dataset. The animation uses D3 transitions inside React’s render cycle, highlighting how the two libraries can work together for interactive, web-based visualizations.

Creating Scatter plot using D3.js

This example shows a scatter plot of age against salary, where each dot represents an individual data point from a CSV file. The code uses D3.js v6 to load and parse the data, then applies `d3.scaleLinear` to map the values. Axes are generated with `d3.axisBottom` and `d3.axisLeft` for the x- and y-axes, respectively, and circles are appended to an SVG container. The data comes from a remote CSV hosted on GitHub, and the plot is styled with a green fill and labeled axes.

Scatter plot using d3.js

This scatter plot visualizes the relationship between years of experience and salary, with each circle representing a data point from a CSV file loaded via d3.csv. The example uses d3.scaleLinear to map the data to x and y axes, with axis labels for both variables. Circles are appended to an SVG container with a fixed radius of 5 pixels and a teal fill, positioned using the scales. Axes are rendered with d3.axisBottom and d3.axisLeft, and the visualization uses d3.v6 in a simple HTML page.

Fork of ICE-6: Rendering Marks and Channels with React & D3

This example visualizes the first 20 rows of a COVID-19 dataset, comparing countries by their population using a horizontal bar chart rendered with React and D3. It shows population values as the bar length and country names as the categorical y-axis labels, with a linear x-axis for the population scale. The code uses React hooks like `useState` and `useEffect` to fetch and parse the CSV data via `d3.csv`, then applies `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis. Grid lines are drawn as SVG elements, and bars are rendered as `rect` marks, with axes and ticks manually positioned using D3’s scale methods.

Loading and Parsing CSV Data

This example demonstrates how to load and parse an external CSV file using D3.js (v7) and render the data as an interactive SVG visualization. The code fetches a comma-separated dataset asynchronously, uses d3.csv to parse it into JavaScript objects, and then binds the resulting array to SVG elements for display. The rendering emphasizes the pipeline from raw data to visual marks, with axes, scales, and gridlines derived from the parsed values. The example is minimal and instructional, showing the complete flow from file loading to DOM generation in an SVG context.

Fork of Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3.js v7, rendering the resulting dataset as an SVG visualization. The author, VarshaYarragunta, illustrates a practical workflow for ingesting tabular data and binding it to visual elements. The chart encodes the parsed rows into SVG shapes, with positioning and styling driven by the data values. A subtle grid and axis structure supports interpretation, while the minimal color palette keeps focus on the data itself. This example serves as a clear reference for handling external data files and rendering them dynamically in D3.

Loading and Parsing CSV Dataset

This example demonstrates loading and parsing a CSV dataset to display a summary of its contents. The visualization shows the number of rows, number of columns, and estimated file size in kilobytes. The code uses D3.js v7's `d3.csv` method to fetch and parse the data asynchronously, then updates the DOM with a summary using `d3.select` and `.html()`. The file size is estimated by converting the JSON stringified data length from bytes to kilobytes. The data source is a local CSV file, and the interface displays text-based summary information rather than graphical charts.

LOAN PREDICTION

This example demonstrates how to load and parse an external CSV dataset using D3.js v7, displaying the data's size, row count, and column count in a styled HTML page. The visualization first shows the parsed data summary in a prominent text block, then renders a static SVG smiley face as a decorative element. The code uses `d3.csv` to fetch the data from a GitHub Gist URL and `d3.csvFormat` to calculate the byte size, while plain JavaScript updates the `textContent` of the message container. The page includes custom CSS for the title, message, and centered SVG layout.

d3 project fork

This example shows a colorful SVG scene of a rabbit in a grassy field with a sky, sun, and clouds, built entirely with D3.js version 7 selections. It demonstrates how to use `d3.select` to append and style primitive shapes like `ellipse`, `circle`, and `rect` directly to an SVG canvas. The code uses local ES6 module imports from the `d3` package loaded via UNPKG, and relies on D3’s attribute-chaining API to position and style each element. The static scene is rendered without data binding or transitions, focusing purely on manual drawing with SVG.