sarathlingareddy754@gmail.com

@SarathL754·11 public vizzes

Network_ICE8_SarathL

This interactive force-directed graph visualizes a city transportation network, showing direct connections between eight U.S. cities as labeled nodes and links. Built with D3 v7 and rendered as SVG, it uses d3.forceSimulation with forceLink, forceManyBody, and forceCenter to position the nodes. Drag behavior, implemented via d3.drag, allows users to reposition nodes. A legend identifies the single "City Node" category, and all elements update dynamically on each simulation tick.

Nov 9, 2025

Loading thumbnail…

Tree_ICE8_SarathL

This example shows a vertical family tree of programming languages, tracing relationships from roots like C and Lisp down to descendants such as Python, Rust, and Clojure. It uses d3.stratify to convert flat parent-child data into a hierarchy, then d3.tree with d3.linkVertical to position nodes and draw curved links. Circles are colored by depth, with labels placed above each node, rendered as SVG in a static layout.

Nov 8, 2025

Loading thumbnail…

ICE8_SarathL

This example renders a world map with a blue sequential color scale encoding 2022 population estimates for 20 selected countries. The visualization uses D3 v7 with a Natural Earth projection and TopoJSON world-atlas data, applying `d3.geoPath` to draw country boundaries and `d3.scaleSequential` with `d3.interpolateBlues` for the choropleth fill. Hover tooltips, created via SVG `<title>` elements, display each country’s name and population, while unmatched countries appear gray. The code includes a name-correction mapping to align the dataset with TopoJSON’s country names.

Nov 8, 2025

Loading thumbnail…

ICE7-Areachart-SarathL

This area chart visualizes gene expression levels across a dataset, plotting Gene X Expression on the horizontal axis and Gene Y Expression on the vertical axis. The code uses d3.csv to load the data, d3.scaleLinear for both scales, and d3.area with a curveMonotoneX interpolation to create the filled shape. The SVG rendering includes axes via d3.axisBottom and d3.axisLeft, with a celadon blue fill and darker stroke for the area path. The chart is built with D3 v7 and includes labeled axes and a title.

Oct 25, 2025

Loading thumbnail…

ICE7-linechart-SarathL

This line chart visualizes the relationship between Gene X and Gene Y expression levels across a dataset, using a smooth monotone curve to show the trend. The D3.js v7 code loads CSV data, sorts it by Gene X expression, and maps the values to linear scales for the x- and y-axes. It renders an SVG line path with labeled axes and a title, employing `d3.scaleLinear`, `d3.line`, and `d3.curveMonotoneX`. The chart is styled with a white background, rounded corners, and a soft shadow.

Oct 25, 2025

Loading thumbnail…

ICE7-PieChart-SarathL

This pie chart visualizes the distribution of average Gene_Y_Expression across different disease statuses (Healthy, Stage 1, Stage 2) from an ICE-7 dataset. The D3.v7 code groups CSV data by DiseaseStatus, computes mean expression values, and renders slices using `d3.pie()` and `d3.arc()`, with a legend showing the color-coded categories. The SVG output includes slice labels and a legend, all styled within a rounded card layout.

Oct 25, 2025

Loading thumbnail…

ICE7-ReusableScatterplot-SarathL

This interactive scatter plot visualizes gene expression data, showing relationships between gene expression levels and patient attributes. The plot cycles through different x-axis variables every 2.5 seconds, rotating among gene expression and age measurements while markers change shape based on disease status. The visualization uses D3.js APIs including scaleLinear, axisBottom, axisLeft, and symbol generators to render SVG elements. Data is loaded from a CSV file, and the reusable chart component updates smoothly through a setInterval loop.

Oct 25, 2025

Loading thumbnail…

Assignment6_SarathL_multiserieslinechart

This multi-series line chart visualizes gene expression trends across patient IDs, comparing three variables: Gene X Expression, Gene Y Expression, and Age. Using D3.js v7’s `d3.line()` and `d3.scaleLinear()`, the visualization renders three colored paths with circles marking every twentieth data point. The code loads CSV data via `d3.csv()` with `d3.autoType`, displays axes with `d3.axisBottom` and `d3.axisLeft`, and includes a custom legend. Styled with SVG and CSS, the chart applies a white background, rounded corners, and a subtle shadow.

Oct 17, 2025

Loading thumbnail…

Assignment6_SarathL_scatterplot

This scatter plot compares gene expression levels across samples, plotting Gene X expression on the horizontal axis and Gene Y expression on the vertical axis to reveal potential correlations between the two variables. Each circle represents a sample, with hover interactions highlighting individual points in orange. The visualization loads CSV data via d3.csv, uses d3.scaleLinear for both axes, and renders circles, axes, and labels as SVG elements using D3 v7. A summary line displays the total sample count.

Oct 17, 2025

Loading thumbnail…

Assignment6_SarathL_barchart

This bar chart displays average expression levels for two genes, Gene X and Gene Y, computed from a CSV dataset loaded via d3.csv. It summarizes the data by showing the mean expression value for each gene as a pair of steel-blue bars that turn orange on hover. The visualization uses D3 v7 scaleBand and scaleLinear to position the bars and axes, with d3.axisBottom and d3.axisLeft generating the scales. A summary paragraph above the chart reports the sample count and computed averages, using d3.mean for calculations. The SVG rendering includes axis labels for both dimensions.

Oct 17, 2025

Loading thumbnail…

Fork of HTML Starter

This visualization summarizes gene expression data from a CSV file by computing the average expression levels of Gene X and Gene Y across all patients and displaying them as a two-bar bar chart. The chart renders in SVG, with axes and bars created using D3.js v7 methods such as `d3.scaleBand`, `d3.scaleLinear`, and `d3.axisBottom`. A summary line above the chart reports patient count and average values, and the SVG includes a decorative DNA helix illustration.

Oct 4, 2025