sivaniammisetti2002@gmail.com

@SivaniAmmisetti·11 public vizzes

ICE-7-Area

This area chart displays health scores over five years (2019–2023), with a light blue filled region beneath a steel-blue line and dark blue circles marking each data point. The chart is built with D3 v7, using `d3.scaleLinear` for X and Y axes, `d3.area` for the area path, and `d3.axisBottom`/`d3.axisLeft` for labeled axes. Data is loaded from a local CSV file (`line_data.csv`), and the SVG rendering includes a bold title and axis labels for year and health score.

Mar 30, 2026

Loading thumbnail…

ICE7-Line-Sivani

A line chart displays health scores across years from 2019 to 2023, with a steelblue line connecting red circular markers for each data point. The visualization uses D3.js v7 with an SVG rendering approach, employing `d3.scaleLinear` for both axes, `d3.line` to generate the path, and `d3.axisBottom`/`d3.axisLeft` for tick marks. Data is loaded asynchronously from a local CSV file via `d3.csv`, with the x-axis formatted as integers and axes labeled "Year" and "Health Score".

Mar 30, 2026

Loading thumbnail…

ICE7_Pie

This example visualizes the distribution of exercise levels as a pie chart, with slices labeled directly on the chart and a legend showing each category’s count. It loads data from a CSV file using d3.csv, converts values to numbers, and renders the pie using d3.pie and d3.arc in an SVG. The chart applies a categorical color scheme via d3.scaleOrdinal with d3.schemeCategory10, and positions labels using arc centroid calculations. The visualization is built entirely with D3 v7, rendering to SVG with a centered chart group and a right-side legend.

Mar 30, 2026

Loading thumbnail…

ICE7-Scatter-Sivani

This animated scatter plot cycles through pairs of health metrics from a CSV dataset, showing relationships between age, BMI, health score, and steps per day. Each dot updates its position every two seconds as the axes shift to new variables. The visualization uses d3.csv for data loading, d3.scaleLinear for scaling, and d3.axisBottom/axisLeft with reusable scatterPlot function. SVG circles animate through the setInterval-driven updates, while axis labels dynamically change to reflect the current metrics.

Mar 30, 2026

Loading thumbnail…

Combined Chart

This combined chart displays daily steps, calories burned, and heart rate data for a fitness tracking scenario. Bars show raw step counts, while a red line represents calories burned and a green line shows heart rate, using separate scaling factors to align these different magnitudes on a shared axis. The visualization is built with the D3.js v7 library using a CSV dataset loaded from a GitHub gist. It combines an SVG bar chart with two line charts, utilizing D3’s scaleBand, scaleLinear, axis, and line generators to render the layered graphic.

Mar 9, 2026

Loading thumbnail…

Multi Line Plot

This multi-line chart visualizes daily fitness trends—steps, calories burned, and average heart rate—over a 150-day period. The data is loaded from a CSV via `d3.csv` and rendered as three overlaid lines, each scaled to a common y-axis using fixed multipliers. The visualization uses D3 v7's `scaleLinear`, `axisBottom`, `axisLeft`, and `line` generators, with an SVG grid and legend, to compare the metrics' daily evolution.

Mar 9, 2026

Loading thumbnail…

Fork as scatter plot

This scatter plot visualizes the relationship between daily step counts and calories burned, using a dataset loaded from a gist CSV. The chart, built with D3 v7, maps steps to the x-axis and calories to the y-axis via linear scales, rendering each data point as a small circle. It uses `d3.csv` to parse the data, `d3.scaleLinear` for axis scaling, and `d3.axisBottom` and `d3.axisLeft` to generate the axes, with a title and axis labels added as SVG text elements.

Mar 9, 2026

Loading thumbnail…

Scatter Chart HTML

This scatter plot visualizes the relationship between daily steps and calories burned over a 120-day period. The visualization uses a card-based layout with an SVG canvas, plotting each day as a circle positioned by linear scales for both variables. The chart loads data from a remote CSV file using `d3.csv`, then maps the parsed numeric fields to x and y coordinates. It employs `d3.scaleLinear` with `d3.extent` and `.nice()` for axis scaling, and renders the points as SVG circles with a radius of 4 pixels. Axis labels and a chart title are added as SVG text elements, with the bottom x-axis and left y-axis generated through `d3.axisBottom` and `d3.axisLeft`.

Mar 9, 2026

Loading thumbnail…

Fork of Fork of Hello HTML

This bar chart visualizes daily step counts over a 120-day period, with each bar representing one day and its height corresponding to the number of steps taken. The chart includes labeled axes for day and steps, plus a title, and uses axis ticks only for every tenth day to reduce clutter. The visualization loads CSV data via `d3.csv` from a GitHub gist, then uses `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis. Bars are drawn as SVG rectangles using D3 v7's data join, with axes generated by `d3.axisBottom` and `d3.axisLeft`.

Mar 9, 2026

Loading thumbnail…

Fork of Fork of HTML Starter

This example displays a static “Hello HTML!” message in the center of the page, rendered with a font size of 12em. The interface consists of a single `div` element styled via an external CSS file, while a separate JavaScript module logs “hello world” to the console on load. Using the standard HTML5 boilerplate, it demonstrates a minimal setup with plain text styling and a basic script import.

Mar 2, 2026

Loading thumbnail…

Fork of Fork of Hello HTML

This example loads a fitness activity CSV file using the Fetch API and parses it with `d3.csvParse`. It displays file size, row and column counts as badges, previews the first five rows in an HTML table, and renders a simple bar chart of Calories Burned by Day in an SVG element using D3 v7. The visualization summarizes the dataset’s structure and offers a basic visual comparison of activity values.

Mar 2, 2026