Skip to main content
Log in
S

santhoshdachepally333@gmail.com

@SanthoshDachepally·19 public vizzes

Loading thumbnail…

Creating Tree With Fitness Data Set

This visualization presents a fitness journey as a branching tree, with categories like Nutrition, Workouts, and Progress stemming from a central root. The SVG illustration includes a scenic background with animated clouds, a golden Buddha figure, and a recursively drawn tree. The tree structure is built using the `d3.stratify()` and `d3.tree()` APIs from d3.v7, while React components manage the scene. Rendering uses SVG elements with animation for the drifting clouds, and the fitness data is hardcoded within the script.

Apr 7, 2025
Loading thumbnail…

Fork of Creating Network Graph with Fitness Data Set

This example shows a fitness influence network, mapping how personal factors like protein, calories, and workouts connect to outcomes such as weight and muscle gain. The visualization uses a force-directed graph built with d3.forceSimulation and d3.forceLink, rendering nodes as colored circles and labels in SVG. Node groups are distinguished by d3.schemeCategory10, and the simulation includes charge and centering forces, with drag interaction enabled via d3.drag. Data is defined inline as a static graph object with eight nodes and nine links.

Apr 7, 2025
Loading thumbnail…

Creating Network Graph with Fitness Data Set

This example visualizes a pseudo-network of fitness-related data points using a force-directed layout. Ten nodes, represented as black circles, are connected by lines and arranged through D3’s force simulation, which applies link, charge, center, and x/y positioning forces. The visualization uses `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to compute node positions, while the `d3.drag` API allows interactive node dragging. Rendered as SVG, the nodes and links update on each simulation tick.

Apr 7, 2025
Loading thumbnail…

Fitness Data Area Chart

This area chart displays the total workout duration for each fitness goal, aggregated from a cleaned CSV dataset. The visualization uses D3.js v7 to load the data, compute sums with `d3.rollup`, and render a smooth monotone area path. A point scale positions goals along the x-axis, while a linear scale maps total durations to the y-axis, with axes and labels generated via `d3.axisBottom` and `d3.axisLeft`. The SVG output features a teal filled area, styled with a white background and minimal margins.

Apr 2, 2025
Loading thumbnail…

Fitness Data Pie Chart

This pie chart displays the distribution of fitness goals from a CSV dataset, showing the percentage share of each goal category. The visualization uses D3.js (v7) to load the data, aggregate it with `d3.rollup`, and render the chart as SVG with `d3.pie` and `d3.arc`. A slice label shows the rounded percentage for each segment, while an ordinal color scale (`d3.schemeSet2`) and a custom legend identify the goals. The chart is centered within the SVG, with a white background and stroke separation between slices.

Apr 2, 2025
Loading thumbnail…

Fitness Data Pie Chart

This pie chart visualizes the distribution of fitness goals from a CSV dataset, showing the percentage share of each goal category. D3 v7 loads the data with `d3.csv`, aggregates counts using `d3.rollup`, and generates the pie with `d3.pie` and `d3.arc`. A categorical color scale from `d3.schemeSet2` fills the slices, which are labeled with percentage values. A legend on the right, built with SVG rectangles and text, maps each color to its corresponding goal, making the chart easy to read at a glance.

Apr 2, 2025
Loading thumbnail…

Fitness Data Pie Chart

A pie chart visualizes the distribution of fitness goals from a cleaned CSV dataset, showing the count of each goal category with color-coded slices and an accompanying legend. The D3.js v7 code loads the data via `d3.csv`, aggregates counts using `d3.rollup`, and renders the chart with `d3.pie` and `d3.arc`, applying a `d3.scaleOrdinal` with `d3.schemeSet2` for colors. Labels are placed at arc centroids, and the SVG output includes a legend built with appended rectangles and text.

Apr 2, 2025
Loading thumbnail…

Fitness Data Reusable Scatter Plot

This reusable scatter plot visualizes fitness tracking data, plotting relationships between calorie intake, protein intake, and mental wellbeing scores from a CSV dataset. The chart uses D3 v7 to render SVG circles with configurable axes, margins, and data accessor functions. The code demonstrates a modular chart factory pattern with setters for width, height, and value fields, allowing users to easily swap which metrics appear on each axis. Axis labels update dynamically based on the selected fields, while steelblue semi-transparent points highlight distribution patterns without animation.

Apr 2, 2025
Loading thumbnail…

Fitness Data Line Chart

This line chart shows the average mental wellbeing score across five age groups, from 18–25 to 56+, based on data loaded from a remote CSV file. The visualization uses d3.csv to parse the dataset, then computes group means with d3.mean. A d3.scalePoint maps age groups along the x-axis, while a d3.scaleLinear encodes wellbeing scores on the y-axis. The chart renders an SVG line and circle markers using d3.line, with axes generated via d3.axisBottom and d3.axisLeft.

Apr 2, 2025
Loading thumbnail…

Santhosh Dachepally

A reusable scatter plot displays the relationship between calorie intake and protein intake from a fitness progress dataset, with animated points transitioning from the center and color-coded by a continuous scale. Built with D3 v7, the visualization uses a modular `scatterPlot` function that constructs linear scales, axes, and a color legend. The SVG rendering includes styled circles with hover effects, while CSS handles transitions, and data is loaded via `d3.csv` from a GitHub-hosted source.

Apr 2, 2025
Loading thumbnail…

Fitness Data Scatter Plot

This scatter plot visualizes the relationship between calorie intake and protein intake from a fitness progress dataset loaded via `d3.csv`. It displays individual data points as pink circles, with hover effects that change their color and radius. The visualization uses `d3.scaleLinear` to map both axes, `d3.axisBottom` and `d3.axisLeft` for tick marks, and includes rotated axis labels. The SVG rendering features a gradient background and semi-transparent chart container, with data sourced from a GitHub Gist.

Apr 2, 2025
Loading thumbnail…

Fork of Fitness Data Scatter Plot

This scatter plot visualizes the relationship between students’ math and science marks, with each green circle representing one student’s paired scores. The x-axis maps math marks and the y-axis maps science marks, with axes labeled and a bold title. Built with D3 v6, the code loads a remote CSV, parses numeric values, and uses `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` to render an SVG chart. The data originates from a GitHub-hosted CSV file, and the plot auto-sizes to the browser window.

Apr 2, 2025
Loading thumbnail…

Fitness Data Pie Chart

This pie chart visualizes the distribution of fitness goals from a cleaned CSV dataset, with each slice labeled directly on the chart and accompanied by a color-coded legend. The chart is rendered using D3.js v7 in an SVG container, with the data aggregated via `d3.rollup` to count occurrences per goal. The visualization employs `d3.pie` and `d3.arc` for the layout and shape generation, while `d3.scaleOrdinal` with `schemeCategory10` assigns slice colors. A gradient background and translucent chart container provide stylistic contrast, and the data is fetched asynchronously from a GitHub gist URL.

Apr 2, 2025
Loading thumbnail…

Santhosh Dachepally

This bar chart displays the average calorie intake associated with different fitness goals, with a search for unique goals collapsed into a single domain. Filmed in a non-interactive dashboard style, it computes means from the loaded fitness_progress_dataset_cleaned CSV and renders them as static rectangles. Using D3 v7 scaleBand and scaleLinear, bars are generated with d3.csv, and axes are added with axisBottom and axisLeft. Distinct hover styles change the bar fill and scale, providing basic interaction within the SVG-based visualization.

Mar 26, 2025
Loading thumbnail…

Santhosh Dachepally

This horizontal bar chart displays the top ten countries by sales from a CSV dataset loaded via D3’s `csv` function. The React app renders an SVG with D3’s `scaleBand` for country categories and `scaleLinear` for sales values, drawing green rectangles for each bar. Tick marks and labels are generated using D3’s scale methods, with the chart centered in the viewport. The code uses React hooks (`useState`, `useEffect`) to fetch and process the data, and ReactDOM to mount the visualization.

Mar 24, 2025
Loading thumbnail…

Fork of Fork of Simple Scatter Plot

This scatter plot visualizes the relationship between bill length and flipper length in penguins, using data from the Palmer Penguins dataset. Each circle represents an individual penguin, with a gray interior rectangle framing the plotting area. The visualization is built using D3.js v7, employing `scaleLinear` for axes, `extent` to compute data domains, and `selectAll().join()` patterns for rendering SVG elements. Axes and labels are added via the `@curran/axis-labels` library, while styling parameters such as circle radius and opacity are configured through the main script.

Mar 24, 2025
Loading thumbnail…

Fork of LOADING AND PARSING OF CSV DATA WITH D3.js

A serene SVG scene depicts a golden Buddha statue beneath a recursive fractal tree on a grassy field, with animated clouds drifting across a gradient sky. The visualization loads a fitness dataset from a remote CSV file using `d3.text` and `d3.csvParse`, displaying file size, row count, and column count. The scene is rendered in React with custom components for each element, while cloud movement is driven by React state updated at 50ms intervals.

Mar 19, 2025
Loading thumbnail…

Fork of LOADING AND PARSING OF CSV DATA WITH D3.js

A React-based visualization loads CSV data from a public GitHub Gist using D3.js, displaying file size, row count, and column count as dynamic text. The SVG scene features an animated sky with drifting clouds, a procedurally generated fractal tree, and a golden Buddha statue, all rendered with CSS gradients and React state updates. The background transitions through a series of colors via keyframe animation while cloud positions update every 50 milliseconds.

Mar 18, 2025
Loading thumbnail…

A Code Baked Layered Cake

This example uses D3.js to draw a layered birthday cake in an SVG canvas. It demonstrates fundamental DOM manipulation by appending SVG shapes such as rectangles, ellipses, paths, and circles to create the cake base, icing, cherries, and candles. The cake is constructed from three distinct layers, each with a different height and dripping icing, with decorative elements added through custom functions that calculate positions. The code directly uses `d3.select` and `.append` methods to build the static illustration without any data-driven interaction.

Feb 23, 2025