S

srujana reddy

@ReddySrujana·18 public vizzes

Loading thumbnail…

ICE9 Multi page website

This multi-page visualization site presents a series of charts that explore encoding techniques and temporal trends in shipment data. The pages demonstrate how color and size encode categorical variables, how grouped and stacked bar charts analyze shipment weights, and how stacked area and line charts reveal delivery time variations. Built with static HTML and CSS, the site uses image files for each chart, such as `Chart4.png`, `Chart5.png`, and `Chart6.png`. The interface provides navigation cards for exploring the different visualization types, and the charts display data from shipment records by origin city and shipping method.

Loading thumbnail…

Ice8_Question2

This example presents two side-by-side visualizations: a hierarchical tree of food categories and a force-directed network of named individuals. The tree displays Food, Fruits, Vegetables, and Grains as colored nodes connected by vertical links, with each layer assigned a distinct fill color. The network employs d3.forceSimulation with forceLink, forceManyBody, and forceCenter to position six people nodes and their relational links. Both SVG outputs are built using D3 v7, with the tree using d3.tree and d3.linkVertical for layout.

Loading thumbnail…

Ice8_Question1

This choropleth map visualizes world population by country, with countries colored according to their population values and tooltips revealing exact figures on hover. The visualization uses D3 v7's `d3.geoNaturalEarth1` projection and `d3.geoPath` to render TopoJSON world geography, while population data is joined to country shapes via a mapping between numeric IDs and ISO3 codes. A legend and interactive tooltip enhance readability of the population distribution.

Loading thumbnail…

Ice7Q4

This interactive area chart visualizes Microsoft’s monthly revenue across product categories, with each category rendered as a semi-transparent filled region outlined by a colored line. The chart uses D3 v3’s `d3.svg.area()`, `d3.svg.line()`, and ordinal/linear scales, with axes labeled for month and revenue in dollars. A legend identifies categories, and hovering over an area triggers a tooltip showing the category name. Data is loaded from a remote CSV file via `d3.csv`.

Loading thumbnail…

Ice7Q3

This line chart shows monthly revenue by product category for Microsoft sales, using a multi-series display with dots, lines, and a legend to differentiate categories. The visualization loads data from a CSV file via `d3.csv`, sorts months manually, and renders the chart with SVG paths and circles. It uses `d3.svg.line`, `d3.scale.ordinal`, `d3.scale.linear`, and `d3.svg.axis`, with a tooltip that appears on circle mouseover. The code applies a category color scale and nests the data by category to draw separate lines.

Loading thumbnail…

Ice7Q2

This example presents a pie chart that visualizes the distribution of total shipping weight by shipping method. The chart is rendered using scalable vector graphics and includes an interactive tooltip that appears on hover, displaying the method and its aggregated weight. The data is loaded from a CSV file and aggregated using `d3.nest()` and `d3.sum()`. The visualization uses `d3.layout.pie()` for the pie layout, `d3.svg.arc()` for the slices, and `d3.scale.category10()` for coloring. A legend is generated from the aggregated data, and all elements are drawn within an SVG container.

Loading thumbnail…

Ice7Q1

This interactive scatter plot visualizes Microsoft sales data, plotting revenue against profit for different product categories and scaling each point’s radius by order count. Hovering reveals a tooltip with category, revenue, and profit details. Built with D3.js v3, it uses `d3.svg.axis`, linear scales, and `d3.scale.category10` for coloring. Data loads from an external CSV file, and the chart is rendered as an SVG with mouseover transitions controlling tooltip opacity. The reusable `scatterPlot` function configures dimensions, margins, and accessor functions.

Loading thumbnail…

Fork of Ice6_Question 3

This interactive D3.js visualization presents daily weather data across five months, using two complementary charts. The first chart is a multi-series line chart showing maximum and minimum temperature trends with red and blue lines, revealing a seasonal warming pattern from January to May. The second combines bar and line glyphs to compare rainfall with average temperature, using dual y-axes to display both measurements. The visualization is rendered as SVG using d3.v7, with gridlines, hover effects, and annotations that highlight the inverse relationship between precipitation and temperature as the seasons transition.

Loading thumbnail…

ice6_Question3

This example presents two charts analyzing Microsoft product sales data for the Azure category across 2023. The first chart is a multi-series line chart comparing Revenue and Profit over time, while the second combines bar and line encodings to show Orders alongside a Rating scale. Both visualizations are rendered as SVG elements using d3.v7, with the CSV data loaded via d3.csv and scales constructed using d3.scalePoint, d3.scaleBand, and d3.scaleLinear. Axes are generated with d3.axisBottom and d3.axisLeft for interactive comparison.

Loading thumbnail…

Fork of Ice6_Question 2

This scatter plot visualizes the Iris flower dataset, showing sepal length and width for 150 samples, with color encoding distinguishing the three species (Setosa, Versicolor, Virginica) as labeled clusters. Built with D3 v7, it uses `d3.scaleLinear` for positioning points, `d3.scaleOrdinal` for species-based coloring, and SVG circles with hover interactions that increase opacity and stroke width. The data is loaded from a remote CSV via `d3.csv`, and axes plus a legend are rendered using D3’s SVG components.

Loading thumbnail…

Ice6_question2

This scatter plot visualizes the relationship between passenger age and fare price in the Titanic dataset, with each circle representing a passenger and colored by survival status (green for survived, red for did not survive). The visualization uses D3.js v7 with SVG rendering, loading data asynchronously via `d3.csv` from the public Titanic dataset on GitHub. D3 scales (`d3.scaleLinear` for axes and `d3.scaleOrdinal` for colors) map data values to pixel positions, while `d3.axisBottom` and `d3.axisLeft` generate the axes. Hover effects increase point opacity, and a legend distinguishes survival outcomes.

Loading thumbnail…

Ice6_Question 1

This bar chart compares average delivery times across shipping methods using data loaded from a CSV file. The visualization combines rectangular bars, a gray line connecting category averages, and circular point markers. D3 v7 handles the data processing, including grouping values with `d3.group` and calculating means, while SVG scales and axes render the marks. The chart is styled with interactive hover effects that change bar colors.

Loading thumbnail…

Fork of Fork of Sruj 2

This animated scatter plot shows the relationship between GDP per capita and life expectancy for 156 countries, with each dot colored by region and sized by population. The visualization uses D3.js version 7.8.5 to render an SVG chart with smooth hover transitions, axis labels, grid lines, and a tooltip that displays country details. The chart is presented on a gradient background with a clean white card container, emphasizing the global health and economics dataset.

Loading thumbnail…

Fork of Sruj

A scatter plot of 156 countries maps life expectancy against GDP per capita, with each dot colored by region and sized by population. The interactive SVG visualization, built with D3.js 7.8.5, uses linear axes with dashed grid lines, a tooltip that appears on hover, and a smooth transition effect that enlarges the dot’s stroke and radius. The chart is embedded in a styled container set against a gradient background, with data drawn from a static JavaScript array.

Loading thumbnail…

Sruj

A bar chart visualizes aggregated annual sales across ten product categories, with data derived from 120 synthetic samples spanning twelve months. The visualization sorts categories by total sales and includes axes, gridlines, and a tooltip for interactivity. Built with D3.js v7, it uses `d3.rollup` to aggregate monthly data, `scaleBand` and `scaleLinear` for positioning, and SVG transitions for hover effects.

Loading thumbnail…

Fork of HTML Starter

This example displays a single, centered HTML message with large text. It serves as a minimal web page starter template, showing static styled content without any interactive or dynamic elements. The page structure is defined in `index.html`, with visual formatting handled by the `styles.css` file, which sets the font size and alignment. The accompanying `index.js` script logs a simple console message upon page load, demonstrating the basic integration of JavaScript into the document.

Loading thumbnail…

Fork of HTML Starter

This example shows the average delivery time by shipping method (Air, Sea, Ground) as a simple bar chart rendered in SVG. The chart uses d3.scaleBand and d3.scaleLinear to map shipping methods and delivery times to positions, with d3.axisBottom and d3.axisLeft providing the axes. Bars are colored steelblue and turn darkorange on hover via CSS. The data is hardcoded in the script, and the chart includes labeled axes for context.

Loading thumbnail…

ICE 5_Assignment

This example analyzes a shipping dataset from a Gist CSV and presents a multi-view dashboard. It displays a table of the first ten records, a text summary of key statistics, a bar chart of shipments by shipping method, and a scatter plot of weight versus delivery time. The visualizations are built with D3.js v7, using `d3.csv` for data loading and the `scaleBand`, `scaleLinear`, and axis APIs to generate SVGs. A decorative SVG cargo ship illustration is also included, with the page styled using custom CSS.