S

sowmyakancharla01@gmail.com

@svksowmya·17 public vizzes

Loading thumbnail…

Ice-8_Asignment-8- Network Graph

This network graph visualizes US housing sales across regions and states, with hierarchical data (USA → region → state → metrics like sales, price, and size) rendered as connected nodes. The chart uses a force-directed layout via `d3.forceSimulation` and `d3.forceLink`, with SVG rendering for the links and circles. Node labels display region, state names, and informational statistics, all styled using CSS within an `index.html` file. The data is hardcoded as a JavaScript object, and the visualization updates dynamically based on the simulation forces.

Loading thumbnail…

Fork of Fork of 11702358-ice 8 -Network

This network graph visualizes sales data across three countries—USA, UK, and Canada—using a force-directed layout. A central "Sales Data" node connects to country nodes, which branch to individual salespersons and their associated chocolate products. The SVG implementation uses d3.forceSimulation to position nodes and links, with distinct shapes and colors differentiating countries, salespersons, and product categories. Node labels appear directly on the canvas, and the data is embedded inline within the JavaScript code.

Loading thumbnail…

ICE-8_Assignmnet -8 of Tree structure

This visualization displays a hierarchical tree structure of US housing sales data, organized by geographical regions (West, South, Northeast, Midwest) and states, with leaf nodes showing sales figures, median prices, and square footage for each state. Built with D3 v7, the code uses `d3.hierarchy()` and `d3.tree()` to compute the layout, then renders SVG paths via `d3.linkHorizontal()` for connecting links and SVG groups for nodes, with node shapes differentiated by their type (region, state, or info).

Loading thumbnail…

Fork of Fork of 11702358-ice 8 -Network

This network graph visualizes sales data across the USA, UK, and Canada, showing the relationships between a central "Sales Data" node, country nodes, salespersons, and chocolate products. The d3.v7 library with a force simulation layout positions nodes, with light gray links connecting hierarchical categories. SVG circles and rectangles represent nodes with black borders, while text labels identify each element. The graph uses pinned coordinates for the central node, and the code defines a legend, making the data hierarchy and product-to-salesperson associations explicitly visible.

Loading thumbnail…

ICE-7-Assignmnet-7- Area Chart

This example uses an area chart to display the average US housing price from 2010 to 2022, with values rising from $220,000 to $460,000. The visualization is rendered as an SVG in D3 v6, using the `d3.area` generator with a monotone X curve to create the filled region and `d3.axisBottom` and `d3.axisLeft` for the axes. The code uses hardcoded sample data, and labels the axes "Year" and "Average Price ($)" with steelblue dots marking each data point.

Loading thumbnail…

ICE-7-Assignment-7- Line Chart

This visualization shows the average US housing price rising steadily from 2010 to 2022, from $220,000 to $460,000, using a line chart with circular markers on each data point. The chart is built with D3.js v6, rendering to SVG, and uses `d3.line` to generate the path, `d3.scaleLinear` for both axes, and `d3.axisBottom`/`d3.axisLeft` for tick marks. Data is hardcoded as an array of year-and-price objects, with axis labels added as SVG text elements.

Loading thumbnail…

ICE-7-Assignment-7- Piechart

This pie chart displays the distribution of housing sales across the ten most populous U.S. states, with each slice sized by the number of sales and labeled in a legend showing exact values. The visualization uses D3 v7 to generate an SVG pie chart, applying `d3.pie()` to compute arc angles and `d3.arc()` to render the paths, while `d3.scaleOrdinal` with `d3.schemeCategory10` assigns colors to states. The data consists of hardcoded values for state populations and sales figures, and the chart includes a custom legend positioned to the right of the pie.

Loading thumbnail…

ICE-7-Assignment-7

This scatter plot visualizes the relationship between average housing prices and square footage across 50 randomly generated data points. The visualization uses a blue circle for each data point, positioned along the X-axis for average price and the Y-axis for average square footage. The code constructs the chart using D3.js version 6, employing `d3.scaleLinear` for axis scaling, `d3.axisBottom` and `d3.axisLeft` for tick marks, and `d3.select`/`d3.append` for SVG element creation. Axis labels are added to clarify the data dimensions.

Loading thumbnail…

ICE_7-Assignment-7_ scatter plot

This animated scatter plot explores relationships among US housing market variables, cycling through three attribute pairs every two seconds: average price versus number of sales, then number of sales versus average square footage, and so on. A D3 selection updates the x-scale domain and circle positions via the reusable scatterPlot component. The visualization uses d3-scale’s scaleLinear and extent, d3-axis for labeled axes, and d3-selection for SVG circle joins. Data comes from a CSV file loaded with d3.csv, rendered as an SVG filling the viewport. The code embeds a setInterval timer to swap the x-value accessor, demonstrating dynamic axis rescaling.

Loading thumbnail…

Fork of Fork of D3 Pie chart

This fork of a D3 pie chart displays the distribution of US housing sales by the number of bedrooms in each property. The visualization uses a standard SVG pie chart, with each slice representing a category of bedroom count and colored using a categorical color scheme. The chart loads its data from a remote CSV file, which is parsed using `d3.csv`. The pie geometry is computed with `d3.pie`, and the slices are drawn using `d3.arc`, while `d3.scaleOrdinal` with `d3.schemeCategory10` assigns colors to the different segments.

Loading thumbnail…

ICE Assignment-6

A scatter plot displays the relationship between the number of housing sales and their average price across the United States. Each red circle represents a data point from a CSV file loaded via `d3.csv`. The visualization uses `d3.scaleLinear` for both axes, `d3.axisBottom` and `d3.axisLeft` for tick marks, and SVG circles rendered with `d3.selectAll` and `.enter()`. Titles and axis labels are added as SVG text elements, with the chart styled using a white background and rounded corners.

Loading thumbnail…

Fork of Fork of Fitness Data Scatter Plot

This scatter plot visualizes the relationship between students’ math and science marks, with each green circle representing a student’s scores on the two axes. The data is loaded from a CSV file via `d3.csv`, and the plot is rendered in SVG using `d3.select`, `d3.scaleLinear`, `d3.extent`, and the `axisLeft` and `axisBottom` components from D3 v6. The chart includes labeled axes, a title, and uses a simple point-radius of 6 pixels. The visualization sizes itself to the full browser window.

Loading thumbnail…

ICE Assignment-6

This example shows US housing sales by state as a static bar chart, with each bar’s height representing the number of sales and a rotated x-axis label for each state. The chart is rendered as an SVG using D3 v6, leveraging `d3.csv` to load data from a GitHub Gist, `d3.scaleBand` and `d3.scaleLinear` for scales, and `d3.axisBottom` and `d3.axisLeft` for axes. The visualization includes a title and uses a steelblue fill for the bars.

Loading thumbnail…

Fork of Fork of Barchart with transitions, divergence Values and toolkit changed

This example displays U.S. housing sales volumes as a static bar chart, with regions on the x-axis and sales on the y-axis. It uses the D3.js library (specifically `d3.csv` for data loading, `d3.scaleBand`, `d3.scaleLinear`, and `d3.axisBottom`/`d3.axisLeft` for scales and axes) to render SVG rectangles. The chart is populated from a remote CSV file sourced from a GitHub gist, styled with steelblue bars that turn orange on hover, and includes labeled axes for clarity.

Loading thumbnail…

Loading House sales dataset

This example loads and parses a CSV dataset of U.S. housing sales, displaying a summary of the file size, row count, and column count. It first uses `d3.csv` to parse the remote data, then calculates the number of rows and columns from the parsed objects. A separate `fetch` request retrieves the raw file as a blob to compute its size in kilobytes. The summary updates in the DOM, with an error message shown if loading fails. The data is sourced from a GitHub gist hosted by the author.

Loading thumbnail…

Sandwich 11699876

This example uses D3.js to draw a sandwich centered within an SVG canvas. The visualization is constructed programmatically by appending basic SVG shapes—rectangles, a path, and ellipses—to represent the bread, lettuce, tomato slices, and cheese. The code directly manipulates the SVG DOM using D3 selection and append methods, with hardcoded positions and colors. It demonstrates fundamental D3 v7 syntax for building static graphics, including applying drop-shadow filters to the bread elements for a subtle visual effect.

Loading thumbnail…

Plant

This example shows a stylized pink-frosted donut with rainbow sprinkles and white icing drizzle, rendered on a gray plate against a white background. Using D3.js v5, it demonstrates fundamental SVG DOM manipulation by appending circles, paths, and rectangles to a central group element. The code uses d3-selection methods like `select`, `append`, and `attr`, plus a loop generating random sprinkle positions and a path for the frosting, all with static coordinates rather than data binding.