panduvik99@gmail.com

Vikas Network

Vikas Tree

This interactive tree diagram visualizes the classification of cardiovascular diseases, with a root node branching into major conditions like coronary artery disease, heart failure, and stroke, each with specific subtypes. The visualization uses a hierarchical layout created with D3.js version 3.5.17, rendering nodes and links as SVG elements with animated transitions. Distinct color coding by disease level and type is applied through stroke and fill attributes. Hovering over links highlights them in steel blue, and the diagram includes static data for disease relationships, built with React and CSS styling.

trial network graph

This network graph visualizes relationships among cardiovascular diseases, distinguishing broader categories from specific subcategories through connected nodes. A central hub represents Cardiovascular Diseases, with related conditions attached, while links labeled "Subcategory of" connect conditions to their parent categories like Arrhythmias and Aneurysms. The visualization uses D3.js v6 with d3.forceSimulation to position nodes, d3.forceLink for connections, and forceCollide to prevent overlap. Data is loaded from a JSON file, with nodes rendered as blue circles and text labels, plus drag-and-drop interactivity for exploration.

Vikas Area Chart

This area chart displays the protein content in grams for various Taco Bell menu items, with data loaded from a CSV file hosted on GitHub. The visualization uses D3 v5 APIs including `scaleBand` for the categorical x-axis, `scaleLinear` for the y-axis, and `area` to generate the filled path. Individual data points are marked with red circles, and the chart includes rotated x-axis labels for readability. The SVG rendering includes styled axes and a bold title, with data loaded via the `csv` function.

vikas Line chart

This line chart visualizes the protein content of various Taco Bell menu items, sourced from a CSV file. It uses D3 v5's `scaleBand`, `scaleLinear`, `axisLeft`, and `axisBottom` to construct the plot, with a blue line and circular markers representing the data points. The chart features rotated x-axis labels, a title, and axis labels, all rendered as an SVG. Custom CSS styling adjusts the font and colors of the axes and text.

Vikas Scatter Plot

This scatter plot visualizes an Iris dataset, dynamically cycling through four different measured features (leaf width, trunk diameter, leaf length, and height) every two seconds to reveal changing relationships. Built with D3.js v6, the visualization uses `scaleLinear` and `extent` to compute axes, `axisLeft` and `axisBottom` for tick marks, and color-codes each point by species (Maple, Oak, Pine, Birch, Cedar). The SVG animation updates positions smoothly via a `setInterval` callback that reassigns the x-value mapping and re-renders the plot.

vikas Pie chart

This pie chart visualizes estimated phone usage by brand and model worldwide, with each slice representing the number of users in millions. The chart displays a legend on the right listing each phone model alongside its corresponding user count. Built with D3 v5, the visualization uses `d3.pie()` to compute the arc data, `d3.arc()` for the SVG path generation, and `d3.scaleOrdinal` with the category10 color scheme for slice coloring. The data is loaded from a remote CSV file using `d3.csv()`, with mouseover events logging the user values to the console.

Vikas Pie Chart

This pie chart visualizes the cost of various phones, displaying each model as a proportional slice of a circle. The chart uses D3 v5 with SVG rendering, loading data from a CSV file via the `csv` function and processing it through `pie` and `arc` generators. Segments are colored using a `scaleOrdinal` palette, with a legend on the right listing each phone name and its price in dollars, formatted with `d3.format`. The data is sourced from a GitHub Gist and rendered entirely in the browser.

Fork of [TEST] Pie Chart

This example shows the cost of ten different phones as a pie chart, with a color-coded legend on the right side that lists each phone’s name and its price in dollars. The data is loaded from a CSV file hosted on a GitHub gist, sorted by descending price, and then rendered as SVG paths using `d3.pie` and `d3.arc`. Colors come from `d3.scaleOrdinal` with `schemeCategory10`, and mouseover events log price data to the console. The chart uses D3 v5.

Vikas Pie Chart

This visualization uses a pie chart to show the cost of different phones, displaying the top 10 items by price. The chart is rendered as an SVG, with each slice color-coded and accompanied by a legend listing phone names and prices in dollars. Built with D3 v5, the code utilizes `d3.pie`, `d3.arc`, `d3.scaleOrdinal`, and `d3.schemeCategory10` to generate the segments and colors. Data is loaded from a CSV file via `d3.csv` and sorted before rendering, with interactive mouseover events logging prices to the console.

Vikas Pie Chart

This example visualizes the cost of ten different phone models using a pie chart, with each slice representing a phone’s price in dollars. The chart is rendered as an SVG using D3 v5 within a React application, leveraging the `pie` and `arc` generators to compute and draw the slices, while `scaleOrdinal` with `schemeCategory10` assigns distinct colors. The data is loaded from a CSV file via `d3.csv`, sorted by price, and displayed alongside a legend that pairs each phone’s name with its price. Hovering over a slice logs the price to the console, though no other interactive behavior is implemented.

Vikas Pie Chart

This example visualizes the cost of different phone models as a pie chart, with a legend listing each phone and its price in dollars. The chart is rendered using D3.js v5 with SVG, and the data is loaded from a CSV file. The code uses `d3.pie` and `d3.arc` to generate the pie segments, `d3.scaleOrdinal` with `schemeCategory10` for colors, and event listeners for mouseover interactions that log the price data to the console.

Vikas Pie Chart

This example visualizes the cost of ten phone models from a CSV dataset, displaying each phone’s price as a pie slice with a legend on the right. It uses D3 v5’s `pie`, `arc`, and `scaleOrdinal` with `schemeCategory10` to generate and color the SVG paths, while `csv` loads the data from a gist URL. Hovering over a slice logs its price to the console. The legend pairs colored rectangles with phone names and formatted dollar values, sorted descending by price.

Vikas Reusable D3 Scatter Plot

This interactive scatter plot visualizes the Iris dataset, cycling through four feature pairs as its axes every few seconds. Built with reusable D3 v6 code, it uses animated transitions to rotate between sepal length/width and petal length/width, rendering species in orange, blue, and black circles. The SVG visualization includes a color-coded legend, axis labels, and a title, with the animation driven by setInterval to update the x-scale.

Bar graph

This example shows a horizontal bar graph that compares the protein content of various food items, with each item’s name on the y-axis and protein grams on the x-axis. The visualization uses React to manage the component state and D3 v6 scales (`scaleBand`, `scaleLinear`) and axes (`axisBottom`, `axisLeft`) to render the SVG chart. Data is loaded asynchronously from a CSV file using D3’s `csv` method, and bars are drawn as SVG rectangles with a fixed color.

Scater plot vikas

This scatter plot visualizes Taco Bell menu items by comparing their fat and carbohydrate content in grams. Each circle represents a menu item, positioned along the x-axis for fat and the y-axis for carbs, with colors differentiating item types like breakfast, lunch, or snacks. The visualization uses d3.csv to load the data, d3.scaleLinear for axes, d3.scaleOrdinal with d3.schemeCategory10 for color encoding, and SVG circles with opacity for readability. Axes, labels, and a legend are added via d3.axisBottom, d3.axisLeft, and custom SVG groups, making nutritional comparisons intuitive.

Vikas ICE5

This example visualizes the ICE-5 scientific dataset by summarizing its contents through colorful, car-shaped icons. It shows the data’s basic properties—file size, row count, and column count—alongside a legend of four categorical colors (Han Purple, Green, Harvest Gold, and Hanasa Yellow). The visualization uses d3.csv to fetch and parse the remote CSV file, then computes and displays the summary statistics in a text container. The page combines static SVG graphics for the color-coded cars with D3’s data-loading API to present both the dataset’s structure and its visual palette.

Fork of Fork of Fork of Vikas Fork of Fork of Fork of Fork of HTML Starter

This example demonstrates a scientific data visualization of the ICE-5 dataset, showing summary statistics about the data's size and structure in a text container. It also includes an embedded SVG image and a custom color legend rendered as four simple car graphics, each labeled with a specific color name. The visualization uses D3.js v7 to load and parse a remote CSV file via `d3.csv`, then displays the number of rows, columns, and file size in kilobytes. The SVG elements are drawn manually with basic shapes like `rect` and `circle` to illustrate the color palette.

Fork of Fork of Vikas Fork of Fork of Fork of Fork of HTML Starter

This example visualizes scientific data about ICE-5, displaying a summary of a CSV dataset alongside a set of SVG color swatches with labels such as Han Purple and Harvest Gold. It uses D3 v7 to fetch and parse the remote CSV via `d3.csv`, then calculates the file size, row count, and column count to display in a pre-formatted text block. The rendering is done entirely in SVG, with static circles and text elements embedded directly in the HTML. The page also includes an external SVG image, though its content is not programmatically processed.

Fork of Vikas Fork of Fork of Fork of Fork of HTML Starter

This example visualizes the ICE-5 dataset by displaying its summary statistics and color-coded circles, each representing a distinct hue like Han Purple or Harvest Gold. It uses D3.js v7 to fetch and parse CSV data, then computes and displays the data size, row count, and column count in the DOM. The visualization combines static SVG circles with inline text labels, while an external SVG image is embedded via an `<img>` tag, demonstrating a straightforward approach to scientific data presentation.

Vikas Fork of Fork of Fork of Fork of HTML Starter

This example visualizes the ICE-5 dataset by displaying a summary of its structure, including row count, column count, and file size, alongside an accompanying SVG image. The code uses the D3.js v7 library to fetch a CSV file via `d3.csv` and dynamically updates the page’s message container with computed statistics. A static SVG image is embedded directly in the HTML, while the script formats the data metrics using `d3.csvFormat` and `Math.round` to present the information clearly. The visualization focuses on communicating dataset dimensions rather than plotting the data itself.

Fork of Fork of Fork of HTML Starter

This example displays a static welcome page for ICE-5 data visualization, featuring a title, an embedded SVG image, and a text summary of a loaded CSV dataset. The page uses d3.csv to fetch and parse the remote CSV file, then computes and displays the dataset’s size in kilobytes, row count, and column count. D3 v7 is loaded via unpkg, and the summary updates dynamically in a <pre> element. The visualization does not include charts or interactive graphics; it focuses on presenting metadata about the CSV source.

ICE 4 xmass Santa God

This example renders Santa Claus’s face as a stylized SVG composition using React and D3 v6. It shows a circular face with eyes, iris, pupils, nose, ears, a curved mouth via `arc()`, and a white beard path, alongside a red hat and pom-pom shapes. The code imports `select` and `arc` from D3, defines geometric constants for radii and offsets, and constructs nested `<g>` groups with circles and paths. The rendering relies on SVG elements within a React component, with styling defined in CSS.