Kiran Jyothi Bodduluri-11604571

@11604571·14 public vizzes

ICE 8

This interactive tree diagram visualizes a botanical classification hierarchy, from Plants down to Monocots and Dicots. The SVG visualization uses D3.js v3’s `d3.layout.tree` and `d3.svg.diagonal` to render nodes and curved links. Clicking a node toggles its children via a transition, animating the tree’s layout. Circles are colored and stroked based on the `level` and `type` fields in the data, with labels positioned around each node.

Mar 30, 2023

Loading thumbnail…

ICE08 11604571

This example displays a choropleth-style world map rendered as an SVG, with countries shown in a light color against an olive-green sphere background. The visualization uses D3 v5's `geoEquirectangular` projection and `geoPath` to generate the map geometry from TopoJSON data loaded from the world-atlas dataset. Country boundaries are drawn as individual path elements, and hovering highlights the selected country in cyan, using CSS transitions on the fill property. The implementation leverages D3 selections and data joins to bind country features to paths, with a static projection of the globe.

Mar 30, 2023

Loading thumbnail…

Fork of Fork of India map by Praneeth

This visualization displays a choropleth map of India’s states, with each state filled by a categorical color and labeled with its name at the centroid. It uses d3.json to load a TopoJSON file, d3.geoMercator for projection, and d3.geoPath to render state boundaries as SVG paths. State colors come from d3.scaleOrdinal with schemeCategory10, and hover effects are defined in CSS. The map excludes one feature via shift() and positions text labels using pathGenerator.centroid().

Mar 29, 2023

Loading thumbnail…

chocolate sales in india

This visualization shows chocolate sales in India over time, with a smoothed line and filled area chart tracking yearly sales figures. The x-axis displays the year, while the y-axis shows sales values with abbreviated tick labels. Built with D3 v5, the code uses `scaleTime`, `scaleLinear`, and `axisBottom`/`axisLeft` to map data, and `line`/`area` generators with `curveBasis` to create the smooth curve and shaded region. Data is loaded via `csv` from a GitHub gist, with the year parsed using `d3.timeParse` and rendered as SVG elements.

Mar 12, 2023

Loading thumbnail…

Line Chart-ICE7

This line chart shows the price of Amazon stock over time from a CSV file. The x-axis represents the year, using a time scale, and the y-axis shows price values on a linear scale. The visualization is rendered as an SVG using D3 v5, with axes drawn via `d3.axisBottom` and `d3.axisLeft`, and the data line generated with `d3.line`. Grid lines are created via tick marks, and the chart includes labeled axes and a title.

Mar 12, 2023

Loading thumbnail…

Pie Chart

This pie chart displays TV brand sales data, breaking down each brand’s year-to-date (YTD) revenue into proportional slices with corresponding legends showing percentage and value in thousands. The visualization uses d3.pie and d3.arc to generate the SVG path segments, with d3.scaleOrdinal assigning a distinct color to each brand. Data is loaded asynchronously via d3.csv from a GitHub gist, and d3.format is used to present numeric values in a compact format.

Mar 11, 2023

Loading thumbnail…

Fork of Pie Chart

This example shows the 2022 U.S. auto sales distribution by brand as a pie chart with a color-coded legend listing each brand’s percentage and sales volume. It loads CSV data from a GitHub Gist using `d3.csv` and renders the chart with SVG. The chart uses `d3.pie` and `d3.arc` to generate segments, `d3.scaleOrdinal` for colors, and `d3.format` for tick labels, with legends built manually via appended SVG groups.

Mar 11, 2023

Loading thumbnail…

Reusable scatter plot

This example shows a reusable scatter plot of the Iris dataset, encoding petal width on the x-axis, sepal length on the y-axis, and species as symbol shapes. Built with D3.js, it uses a custom `scatterPlot` function that takes data, value accessors, and margin configuration, then renders SVG paths via the `symbol` and `symbols` APIs. It also applies `scaleLinear` for axes, `scaleOrdinal` for categorical mapping, and `axisLeft`/`axisBottom` for tick marks, with data parsed from a CSV URL.

Mar 11, 2023

Loading thumbnail…

Penguin Data set scatter Plot

This scatter plot visualizes penguin data, showing flipper length on the x-axis against body mass on the y-axis, with each point colored by species (Adelie in blue, Gentoo in pink, and Chinstrap in black). The code uses D3 v5 with `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load data from a GitHub Gist, map the quantitative values to pixel coordinates, and render SVG circles with a fixed radius. Additional bill measurements are stored as attributes (`rx`, `ry`) on each circle but are not visually encoded. Axis labels and a title are added as SVG text elements.

Mar 9, 2023

Loading thumbnail…

ICE-6

A bar chart displays yearly sales figures for a company from 2014 to 2021, with values in millions and axes labeled via `d3.axisBottom` and `d3.axisLeft`. The React-based app uses D3 v5 to render an SVG, mapping data onto a band scale and linear scale. It reads its data from a hardcoded array, not the external CSV, and renders black bars with a 0.2 padding.

Mar 9, 2023

Loading thumbnail…

ICE-6

This example shows the basic monthly cost of Netflix plans across 15 countries using a horizontal bar chart. Each bar represents a country, with bar length scaled to the plan price. The visualization is built with React and D3 v5, using `scaleBand` and `scaleLinear` for positioning and encoding values. Data is loaded from a CSV file via `d3.csv`, and rendered as SVG rectangles with manually drawn axes and tick labels.

Mar 9, 2023

Loading thumbnail…

ICE5

This example displays metadata about a student dataset, presenting file size, row count, and column count in a large, bold text overlay. The visualization uses D3.js v7 to fetch and parse a CSV file from a GitHub Gist via `d3.csv`, then formats the data with `d3.csvFormat` to calculate its size in kilobytes. The page’s background features a student-themed SVG image, styled with CSS. Static HTML text and links provide context, while the JavaScript dynamically updates a `<pre>` element with the computed statistics.

Mar 2, 2023

Loading thumbnail…

Fork of Let's make a face with D3.js! by kiran jyothi bodduluri - 11604571

A D3.js visualization constructs a stylized smiley face in SVG, featuring a yellow circular head, eyes, pupils, nose, teeth, ears, eyebrows, blush, glasses, and a beard. The eyebrows are static rotated rectangles; no animation is present, despite the README mentioning movement. The code builds elements using D3 v5 selections, methods like `attr`, the `arc` generator for the nose and mouth, and data binding for the teeth. The fixed SVG canvas is 960 by 480 pixels, with shapes positioned via absolute coordinates and transforms.

Feb 23, 2023

Loading thumbnail…

Fork of Fork of Let's make a face with D3.js! by kiran jyothi bodduluri - 11604571

This D3.js visualization builds a static smiley face from basic SVG shapes, including a yellow head, eyes, pupils, nose, eyebrows, ears, mouth, and teeth. It demonstrates fundamental DOM manipulation using the `select` and `arc` functions from the d3 library, appending elements like circles, rectangles, and paths directly to the SVG. The face is centered with an SVG `g` group, and the mouth is generated using an arc generator with specified radii and angles. No interaction or animation is present; the code renders a fixed cartoon illustration.

Feb 22, 2023