praveennayak1702@gmail.com

ICE -8 Network Graph

Fork of D3 Starter

MOBILE TREE GRAPH

Fork of Line Chart

Fork of Fork of Simple Bar Chart

Fork of Fork of Create a face with d3.js!

This example visualizes team performance with a reusable scatter plot, showing wins per year as individual circles. The D3.js v7 code loads CSV data from a GitHub gist using `d3.csv` with `d3.autoType` for type inference, then renders an SVG chart. Axes are generated with `d3.axisBottom` and `d3.axisLeft` on a 800x500 pixel canvas, with circles positioned via `d3.scaleLinear` scales for the x (Year) and y (Wins) values. The plot uses steelblue circles with 70% opacity, styled with a clean sans-serif layout.

Fork of Create a face with d3.js!

This visualization displays the win counts of multiple teams across years using layered area paths in an SVG, with each team distinguished by a color from the `d3.schemeCategory10` palette and a legend identifying them. The code loads CSV data via `d3.csv` with `d3.autoType`, then applies `d3.area()`, `d3.scaleLinear` for the axes, and `d3.axisBottom`/`d3.axisLeft` for the ticks. The chart emphasizes trend comparison through semi-transparent fills, sourced from a gist-hosted dataset, while relying on D3 v7 for all rendering.

Fork of Fork of Create a face with d3.js!

This example visualizes the win records of multiple sports teams over a series of years, with each team represented by a separate colored line. The chart uses D3.js v7 to load CSV data from a remote Gist and render an SVG line chart with axes, labels, and a legend. The code specifically uses `d3.csv` with `d3.autoType` for data parsing, `d3.scaleLinear` and `d3.scaleOrdinal` for scales, `d3.line` for path generation, and `d3.axisBottom`/`d3.axisLeft` for the axes, with `d3.schemeCategory10` providing the line colors.

Fork of Responsive Scatter Plot

This example visualizes the distribution of wins and losses across different teams for a specific year, using a pie chart to show each team’s share of total wins. The chart is generated from a CSV dataset loaded via `d3.csv`, with data filtered for the year 2020. Using D3.js v7, the code computes win percentages per team, applies a `d3.scaleOrdinal` color scheme, and renders the arcs with `d3.pie` and `d3.arc`. A legend, built with SVG rectangles and text, identifies each team’s color, while the layout is fixed at 400x400 pixels with a responsive margin.

Fork of Fork of Circles with D3

This example visualizes the distribution of wins and losses for a specific year (2022) using a pie chart, with green representing wins and red representing losses. The chart is rendered as an SVG using D3.js v7, loading data from a CSV file hosted on GitHub Gists. The code employs d3.pie and d3.arc to compute and draw the arcs, while d3.scaleOrdinal maps outcomes to colors. A legend and title are appended to clarify the categories and the year, with the data filtered by the target year before visualization.

Fork of Simple Bar Chart

This example shows a line chart of year-one match wins plotted against results, with a steelblue line traced through the data. It loads a CSV dataset from a GitHub gist using d3.csv and d3.autoType, then renders an SVG with D3 v7. The chart uses d3.scaleLinear for both axes, d3.axisBottom and d3.axisLeft for ticks, and a d3.line generator to create the path. Axis labels are added via appended text elements.

Bar graph-Praveen

This bar graph visualization displays cricket team wins across three years, with each team represented by a colored bar and the bar height indicating the number of wins for Year 3. The code uses D3.js v7 to load CSV data from a GitHub gist and render an SVG chart with d3.scaleBand for the x-axis, d3.scaleLinear for the y-axis, and d3.scaleOrdinal with d3.schemeCategory10 to assign distinct colors to each bar. Axes include labels for "Team Name" and "Wins", with hover effects on the bars.

Fork of Fork of Random Squares and circles

This scatter plot visualizes the relationship between Year 1 and Year 2 wins for different teams, with each point representing a team’s performance across two consecutive years. The chart uses D3 v7 to load CSV data from a remote gist and render circles with steelblue fill at reduced opacity, allowing overlapping points to be distinguished. Axes are generated using D3’s `axisBottom` and `axisLeft`, with labels added via SVG text elements. The plot highlights outliers and patterns in team consistency over time, as described in the accompanying analysis text.

Fork of Bird's Landscape

This bar chart visualizes cricket match scores from a text file, displaying paired team names and their respective scores as grouped blue and red bars. Built with the Chart.js library, the code fetches the data, parses the comma-separated values, and renders the visualization on an HTML5 canvas element. The chart includes labeled axes and a legend positioned at the top, with both teams’ scores plotted for comparison across matches.

Fork of Bird's Landscape

This example displays a procedurally generated SVG landscape featuring a sun, sky, land, and stylized birds. The scene is animated over a 24-second cycle, with the sky and sun colors transitioning to simulate a day-night cycle. The visualization is built using the Document Object Model (DOM) API to create SVG elements, with CSS animations for the sun's movement and JavaScript to generate the scene elements.

Fork of HTML Starter

This example visualizes Cricket World Cup 2023 match data by rendering match results in an HTML table and displaying win counts for each team. It also includes an SVG cricket field with animated elements such as fielders, a cricket ball, wickets, and a bat. The visualization uses JavaScript to fetch CSV data from a GitHub gist, parse it, and dynamically update the DOM. The table displays match details, while the analysis section provides a summary of total matches and wins for each team. The SVG cricket elements provide a static, thematic illustration of the sport. The project is built with React, though the core logic uses plain JavaScript and SVG. The data is loaded via the Fetch API from a remote CSV file.

Fork of Rising-Setting Sun

This example, titled "Fork of Rising-Setting Sun," is a fully self-contained SVG animation that depicts a dynamic landscape with a sun, rolling hills, a river, trees, ducks, birds, and an airplane, all set against a sky that cycles through colors. The scene's gradients, including the sky and land, animate their color stops over a 15-second loop, while the sun, ducks, birds, and airplane follow predefined motion paths using SVG's `<animateMotion>` and `<mpath>` elements. The artwork is built entirely with basic SVG shapes and paths, with no external JavaScript libraries, and is rendered directly in the browser via inline SVG markup, as shown in the provided `index.html` file.

Fork of Let's make a face: part 3 tweaks

A stylized smiley face assembled from SVG shapes appears centered on a wide canvas. The face uses a horizontal linear-gradient fill and contrasting stroke, with khaki-colored details for eyes, mouth, ears, and a triangular nose. Red geometric elements form a cap atop the head. The visualization is built using React and D3.js, utilizing the `d3.arc` function to generate the mouth path and defining custom SVG gradients for the face and accent colors.

Fork of Solar System

This example displays the solar system with planets shown to scale in size but not in distance, set against a stylized landscape with a lake, path, trees, and deer. The planets are drawn as circles using D3’s `select`, `append`, and `attr` methods, with the Sun positioned in the corner. The code renders a light blue sky and a blue lake as background rectangles. Data comes from Wikipedia’s list of gravitationally rounded objects, though the visualization omits explicit planet labels or orbits. The scene uses simple geometric shapes without SVG gradients, leaving the planets as flat fills.

Fork of Flowers

A garden of stylized flowers fills the screen, each rendered as a complex SVG path with a drop-shadow filter, colored dynamically by combining random and index-based RGB values. The flowers are positioned randomly across the canvas using JavaScript's `Math.random()` within a React component, while a yellow sun and a gradient background complete the scene. The code uses React 16.10, conditional rendering to skip certain flowers, and SVG elements like `<path>`, `<circle>`, and `<filter>` with `feDropShadow`.

Fork of Fork of Ellipse flower - image

This visualization displays a stylized cosmic scene featuring a yellow sun at the center against a green-to-black gradient background, surrounded by 50 randomly positioned white stars. Approximately 100 ellipses and circles are scattered across the canvas, each rotated and colored dynamically based on their index. The graphic is rendered as an SVG using React, with each ellipse and circle pair positioned via random translation, rotated by 50 times their index, and filled with RGB colors derived from their proportional position.