Akhil Charugulla

Tree Structure - Akhil

Scatter Plot Cyber attacks

Pie plot cyber attacks protocols

Akhil- Cyber Attack Elements Network Graph

Area Chart Akhil

This example visualizes textile sales data as an area chart, showing total sales trends over time with a smooth curved baseline. The chart includes labeled axes for year and sales, gridlines, and circular markers highlighting individual data points. Built with D3 v5, it uses `scaleTime`, `scaleLinear`, `area`, and `curveBasis` to generate the SVG path, while `axisBottom` and `axisLeft` render the axes. Data is loaded from a remote CSV file via `csv`, with the year parsed as a date and sales as numeric values.

Akhil Line Chart

This line chart displays US Textile Total Sales from 2004 to 2024, with each point marked by a dot and connected by a blue line to show trends over time. It uses d3.scaleTime for the x-axis and d3.scaleLinear for the y-axis, along with d3.line to generate the path and d3.axisBottom and d3.axisLeft for tick marks. Data is loaded as CSV from a remote source, with years parsed into Date objects and sales converted to numbers before rendering.

Akhil Pie Chart -Cars

This pie chart displays the aggregated selling price of cars grouped by make, with a legend and a data table alongside the visualization. The chart uses D3.js v7 to compute the pie layout and arc paths, while a sequential color scale maps each car make to a distinct color. The code loads CSV data, groups it by car make, and sums the prices using d3.group and d3.sum. Hovering over a segment reveals a tooltip with the make and total price. The SVG rendering includes an interactive legend and a styled HTML table, all set against a light blue background.

Reusable Scatter Plot- Akhil

This reusable scatter plot visualizes the relationship between math and science scores from a school dataset. The visualization uses D3 scales and axes to map scores to positions, with circles representing individual data points. Every two seconds, the plot cycles through different subject pairs, updating the x-axis to show English or history scores while keeping science on the y-axis. Built with D3’s `scaleLinear`, `axisBottom`, and `axisLeft` APIs, the SVG chart animates transitions between datasets using JavaScript’s `setInterval` to call the custom scatter plot function.

Akhil- vizhub scatterplot

This scatterplot displays the relationship between car safety ratings and car makes, using a D3.js v7 bar-based layout where each circle’s vertical position corresponds to a specific make and horizontal position maps to its safety score. The visualization encodes data from a cleaned CSV dataset, with hover effects highlighting individual points. The code uses D3’s `scaleLinear` for the x-axis, `scaleBand` for the categorical y-axis, and `d3.axisBottom` and `d3.axisLeft` to render axes. The SVG circles are colored blue with a green hover state, and the chart includes labeled axes for clarity.

Akhil -vizhub assignment bat-scatter

This bar chart displays the total price of vehicles aggregated by vehicle type, showing that SUVs and hatchbacks have the highest sales values. The visualization uses D3.js v5 within a React component to load CSV data from a GitHub gist, aggregate prices by type using JavaScript’s reduce, and render horizontal bars via SVG rect elements. Axes are created with d3.axisBottom and d3.axisLeft, while scales from d3.scaleBand and d3.scaleLinear map vehicle types to bar positions and lengths. The chart includes labeled axes for “Average Price” and “Vehicle Type,” with hover effects defined in CSS.

Fork of cat

This React and D3.js visualization displays a cartoon cat face rendered as an SVG, with a separate text section showing metadata about a CSV file it fetches. The graphic uses primitive shapes like circles and ellipses to form the cat’s hair, ears, eyes, glasses, cheeks, and a mustache, with a mouth generated by the `d3.arc()` path generator. The page opens by loading car data from a GitHub Gist, computing the row and column counts, and displaying the file size, row count, and column count in plain text above the animated SVG drawing.

Fork of Fork of Circles with D3 - Akhil Charugulla

This visualization uses D3.js to render a cartoonish sad face with pink hair, cheeks, and a tooth, constructed from a series of overlapping circles and rectangles arranged on a green background. The code defines static position, radius, and fill color data for each facial feature, then binds this data to SVG circle elements via D3’s `selectAll().data().join()` pattern. The rendering relies on D3’s `select` and `attr` methods to set coordinates and styling, with no animation or interaction.