ms.himabinduchalla@gmail.com

@Hima-Challa·14 public vizzes

ICE VIII - Tree Map

This tree map visualizes a hierarchical dataset using D3.js, displaying named nodes connected by curved links from a root node, with each node color-coded and labeled. The visualization uses D3 v2’s `d3.layout.tree` and `d3.svg.diagonal` to compute node positions and draw paths, while circles and text are appended to an SVG canvas. Interactive tooltips appear on mouseover via a styled `div`, revealing each node’s “info” property. The static layout renders with a light background and fixed dimensions of 800 by 300 pixels.

Apr 13, 2023

Loading thumbnail…

ICE-VIII- Network Graph

This example visualizes a small social network of nine people grouped into four clusters, using a force-directed layout to position nodes and links. Node labels are red, circles are green, and links are purple, with link thickness scaled by the square root of a weight value. The visualization is rendered as SVG using D3 v4’s `d3.layout.force`, with drag interaction via `force.drag`, and data loaded from a local JSON file.

Apr 12, 2023

Loading thumbnail…

ICE VIII - World Map using Topojson

This example displays a two-dimensional world map titled “World Map,” rendered as an SVG using the Natural Earth projection. Countries are filled with orange, differentiated by crimson strokes, while the sphere background is aqua. The visualization loads geographic data from the `world-atlas@1` TopoJSON file, converts it to GeoJSON with the TopoJSON `feature` API, and draws paths using `d3.geoPath` and `d3.geoNaturalEarth1`. The page includes a custom CSS stylesheet with a yellow background.

Apr 12, 2023

Loading thumbnail…

ICE8 - Country map

This interactive map of India displays state and district boundaries, with districts color-coded based on their state and hovering over a district highlighting it in black. Built with D3.js and the d3-geo-projection library, it uses the d3.geoMercator projection with zoom functionality. State and district GeoJSON data are converted to SVG paths using d3.geoPath, while d3.scaleOrdinal and schemeCategory10 assign distinct district colors.

Apr 12, 2023

Loading thumbnail…

Bonus ICE - 3D Bar chart

This 3D bar chart visualizes pet dog sales data across ten breeds, with four stacked series representing sales channels: on-store, adoption, breeder, and online purchases. Built with the Highcharts library and its highcharts-3d module, the chart uses column series with stacking enabled and grouping disabled, set within a perspective view defined by alpha, beta, and depth parameters. The data consists of static arrays for each series, plotted along categorical X and numerical Y axes, with the Z-axis labeled as “Sources” and a grey page background.

Apr 6, 2023

Loading thumbnail…

Bonus ICE - 3D Scatter plot

This 3D scatter plot visualizes the Dolphin Species dataset, showing the relationship between body height, depth ability, and length of flipping for different dolphin species. The plot uses Plotly's `scatter3d` type via the `Plotly.newPlot` function, with data loaded through D3's `csv` method. Each data point is rendered as a semi-transparent circular marker, with crimson, green, and aqua axis labels for the three measured variables. The visualization is presented on a pink background with a green centered heading, and margins are configured to maximize the plot area.

Apr 4, 2023

Loading thumbnail…

AP State Crime Convicts for the years from 2001 to 2012

This area chart displays the number of crime convicts in Andhra Pradesh from 2001 to 2012, with the x-axis representing time and the y-axis showing convict counts. Using D3 version 5, the visualization loads data from a GitHub gist via `d3.csv`, parses the year and convict fields, and renders an SVG area path with a basis curve (`d3.area` with `curveBasis`). The chart includes axes, labels, and a title, with styling applied through CSS classes defined in `index.css`.

Mar 30, 2023

Loading thumbnail…

ICE-7 Line Chart

This line chart displays the number of convicts recorded in Andhra Pradesh, India, from 2001 to 2012. The visualization uses D3 v5 with an SVG rendering approach. It employs d3.scaleLinear for both axes, d3.extent to set the domain, and d3.axisBottom and d3.axisLeft for axis generation. The data is loaded from a CSV file using d3.csv, with the line path generated via d3.line. Styling includes a red stroke on the line path.

Mar 30, 2023

Loading thumbnail…

ICE - VII Reusable Scatter Plot

This interactive scatter plot animates a dolphin dataset, cycling through four physical attributes on the x-axis while keeping body length on the y-axis. The visualization uses a reusable `scatterPlot` component built with D3 v6, employing `scaleLinear`, `axisLeft`, and `axisBottom` to render axes. The code applies a color legend based on dolphin species, with a `setInterval` function triggering transitions between the x-axis attributes. The visualization also includes CSS-styled text and SVG circle elements with variable radii, showcasing a clean example of animated data exploration.

Mar 30, 2023

Loading thumbnail…

ICE 7 - Pie Chart

This pie chart displays the income of the top 10 Indian states for the financial year 2011–12, with each slice colored via d3.scaleOrdinal and d3.schemeCategory10. The data is loaded from a CSV using d3.csv, sorted, and sliced before being rendered with d3.pie and d3.arc. A custom legend, built with SVG rectangles and text, shows each state’s name and income value alongside its color. Mouseover events log the corresponding income value to the console.

Mar 30, 2023

Loading thumbnail…

In Class Excercise: 6 (BAR Chart)

This horizontal bar chart displays the year built and number of bedrooms for the first 15 houses sold in the Kansas City area. Each bar’s length encodes bedroom count, while the y-axis shows construction year. Built with React and D3 v5, the visualization uses `scaleBand` and `scaleLinear` for positioning, with data loaded via `d3.csv`. SVG rectangles render the bars, with axes and gridlines drawn using `axisBottom`, `axisLeft`, and D3’s tick methods.

Mar 23, 2023

Loading thumbnail…

ICE - VI (Scatter Plot)

This scatter plot compares medical charges with body mass index, coloring each point by the number of children. The chart uses D3 v5’s `csv` loader to parse the MedicalExpensesPredictors dataset, then maps BMI to the x-axis and charges to the y-axis via `scaleLinear` and `extent`. Points are rendered as SVG circles with `selectAll` and `join`, while `axisLeft` and `axisBottom` create the axes. Labels for both axes and a title are added as SVG text.

Mar 23, 2023

Loading thumbnail…

In Class Exercise - V

This example visualizes housing sales data for the King County (KC) area in the United States using D3 version 5 and an SVG rendering approach. The code uses inline SVG elements with embedded data, URL patterns, and CSS background images to display the dataset. It applies D3’s minified library from unpkg to manipulate the DOM and render the visualization, while the HTML structure includes custom styling and headings. The visualization integrates a raster image within an SVG pattern, demonstrating basic D3 integration with Vue framework conventions.

Mar 9, 2023

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

A dense, colorful overlapping composition fills an SVG canvas with hundreds of randomly positioned and rotated squares and diamond polygons, created by triple-nested map loops over an array of numbers. Each polygon uses random RGB fill colors, opacity, and transforms, producing a layered, chaotic visual texture. The piece also overlays a large, complex SVG path drawing of a Buddha figure on top, rendered in red against a red background. The example uses React to generate SVG elements programmatically, with the Buddha path embedded as static SVG path data.

Mar 6, 2023