medurisk7@gmail.com

ICE-8 Network graph

ICE-8 Tree structure

Fork of ICE-7 Area chart SKM

This area chart displays the top 40 Test cricket players by total runs, drawn as a single steelblue path over a categorical x-axis of player names and a linear y-axis of runs. The code loads data from a CSV via `d3.csv`, sorts and slices the dataset, then uses `d3.scaleBand` and `d3.scaleLinear` with `d3.area` to generate the SVG path. Rotated x-axis labels and an SVG text element for the y-axis title accompany the chart, all rendered client-side in D3 v7.

ICE-7 Line chart SKM

This line chart displays the runs scored by the top 40 Test cricket players, sorted from highest to lowest, and uses a rotated x-axis to fit player names. The chart is built with D3.js (v7) and rendered as an SVG, fetching data from a remote CSV file via `d3.csv`. The visualization employs `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the continuous y-axis, with a line path created using `d3.line` and configured with `d3.axisBottom` and `d3.axisLeft` for the axes.

ICE-7 Line chart SKM

This line chart visualizes the relationship between two variables across a dataset, rendered as a yellow background with a dark line plot. The chart uses D3.js to draw the axes and line path, with data loaded from an external source. The visualization demonstrates basic D3 scale functions and SVG path generation for plotting sequential data points. The minimal styling focuses on the line’s trajectory, making trends immediately visible.

ICE-7 Pie chart SKM

A pie chart displays the number of test cricket players per country from a CSV dataset, using rounded labels for player counts and a legend with color-coded entries. The chart is rendered with D3 v5, using `d3.pie` and `d3.arc` to generate the slices and `d3.scaleOrdinal` for colors. Data is fetched asynchronously via `d3.csv` and aggregated client-side by country. Labels are positioned using the arc centroid, and the SVG output includes a fixed set of ten distinct section colors.

ICE-7 Scatter plot

This example visualizes Test Cricket player statistics with a scatter plot that maps runs against batting averages, animating through different data fields every three seconds to explore relationships between metrics like strike rate and innings played. The visualization uses D3.js version 6.7.0, employing the `scaleLinear` and `scaleOrdinal` functions for positioning and color encoding, while SVG symbols represent player types. Data from a CSV file hosted on GitHub Gist is loaded asynchronously, with circles colored by country and shaped by player role. The reusable chart module implements a configurable API, cycling through four quantitative fields on the x-axis.

ICE-6 Marks and Channels

This visualization presents two charts examining Test cricket records. The bar chart displays the top 10 players by number of centuries scored, using horizontal bars colored with d3.scaleOrdinal and d3.schemeCategory10. The scatter plot below explores the correlation between matches played and runs scored, though the scatter plot code is incomplete. Both charts load data from a CSV file containing Test cricket statistics, using D3.js v7 to render SVG elements with axes for the quantitative comparisons.

Scatter Plot ICE-6

This example visualizes Test Cricket records with a horizontal bar chart showing the top 10 players by number of centuries scored, using a categorical color scale from `d3.scaleOrdinal` and `d3.schemeCategory10`. The chart loads a CSV dataset via `d3.csv`, sorts players by century count, and renders SVG rectangles with axes from `d3.axisLeft` and `d3.axisBottom`. A companion scatter plot is also included, though its data mapping is not detailed in the visible code. The visualization uses D3 v7 and SVG rendering, with the data sourced from a public GitHub gist.

ICE-5 M sai krishna

This visualization presents a summary of Test cricket batting records for 83 top batsmen over the last 25 years, displayed with a cricket-themed SVG showing a red ball on a green field. The page uses D3.js v7 to load a CSV file from a GitHub Gist, calculating and displaying the file size in kilobytes and bytes, row count, and column count in a text container. The embedded SVG replicates the ball design from the separate ball.svg file, while custom CSS styles the page with green headings and white background.

Fork of Meduri Sai Krishna | Creating a Scene

This example shows a static natural landscape with a sky, sun, mountains, grass, a lake, a tree, and two stick figures, all drawn with SVG shapes. It also layers an animated smiling face on top using D3.js, where the eyebrows move up and down via chained transitions. The visualization pairs declarative SVG markup with D3’s selection and transition API to animate the face, while the surrounding scene remains static. The code uses `d3.select`, `transition.duration`, and `arc()` to construct and animate the facial features. The scene serves as a playful demonstration of combining hand-coded SVG with D3's data-joining and animation capabilities.

Meduri Sai Krishna | Creating a Scene

This example uses D3.js to construct an animated SVG scene of a face. The visualization first renders the static elements—a sky, sun, mountains, grass, lake, and trees—directly in the HTML. It then layers a separate, animated face built with D3 selections, using the `arc` generator for the mouth and chained transitions to raise and lower the eyebrows. The scene draws entirely from hardcoded SVG shapes rather than external data.