kpavithrasai@gmail.com

@pavithra571·14 public vizzes

A2-2-ASSIGN-8

This visualization shows a network of social media influencers, with nine nodes representing creators from YouTube, TikTok, and Instagram, connected by collaboration links. Nodes are pinned in rows by platform and use distinct shapes—circles, squares, and diamonds—to encode platform membership, while colors reinforce the grouping. Built with D3 v7, the example uses `d3.forceSimulation`, `forceLink`, and `forceManyBody` to position elements, though fixed coordinates (`fx`, `fy`) keep nodes in place. SVG rendering draws all links and node shapes, with a legend in the upper-left corner explaining the shape-color mapping.

Apr 13, 2026

Loading thumbnail…

Q2-1-ASSIGN-8

This example displays a hierarchical tree of movie genres, from major categories like Action and Drama down to specific films such as Star Wars and Parasite. Each node is drawn as a colored circle with a text label, using a vertical layout with straight links. Built with D3 v7, it applies `d3.stratify` to construct the hierarchy from flat parent-child data and `d3.tree` to compute node positions, rendering the SVG output with unique colors from `d3.scaleOrdinal` and a custom legend.

Apr 13, 2026

Loading thumbnail…

Q1-ASSIGN-8

This choropleth map displays 2023 US unemployment rates by state using a purple sequential color scale and an Albers USA projection. It employs `d3.geoPath` with the `topojson` library to render state boundaries from the us-atlas TopoJSON, while a custom tooltip shows state names and exact percentages. Data originates from the Bureau of Labor Statistics, rendered as SVG with a gradient legend indicating relative unemployment levels.

Apr 13, 2026

Loading thumbnail…

ice7-linechart

This visualization shows the average maximum temperature in Seattle from 2012 to 2015, with a single line connecting yearly data points and value labels above each dot. The chart aggregates daily temperature records from a CSV file, calculating yearly means and plotting them against a linear year scale. Built with React and D3 v7, it uses `d3.rollup` for data aggregation, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and `d3.line` for rendering, with the SVG output filling the browser window.

Mar 29, 2026

Loading thumbnail…

ICE7-SCATTERPLOT

This scatterplot visualizes Seattle weather data, plotting daily maximum temperature against precipitation and encoding weather type by color. Built with D3 v7 and React, it uses `d3.scaleLinear` for axes, `d3.scaleOrdinal` with `schemeTableau10` for categorical colors, and `d3.axisBottom`/`d3.axisLeft` for labeled scales. The SVG renders circles with fixed radius and opacity, includes a weather legend, and loads data from a CSV file.

Mar 29, 2026

Loading thumbnail…

ice7-area chart

This area chart displays the average maximum temperature in Seattle from 2012 to 2015, with each year plotted as a data point connected by a line and a semi-transparent filled area. The chart includes labeled circles for each year’s value, axes with tick labels, and a title, using data from a CSV file. The visualization is built with D3 v7 within a React application, leveraging the `scaleLinear`, `area`, `line`, `axisBottom`, and `axisLeft` APIs to construct the SVG rendering.

Mar 29, 2026

Loading thumbnail…

ice7- area chart

This example shows an area chart where five data points from a CSV file are displayed as a smooth, filled curve. Each point is also rendered as a clickable circle; selecting one highlights it in the visualization. Built with React and D3 v7, the SVG chart uses a custom `viz` function to handle the rendering, while the container’s dimensions are tracked via a custom hook. The chart’s area path is generated from the dataset’s x and y coordinates.

Mar 29, 2026

Loading thumbnail…

ICE7-PIECHART

This visualization shows the distribution of weather conditions in Seattle across a multi-year period, displaying the count of each weather type as pie slices with a legend annotating each category's total days. Built with React and D3 v7, it loads the CSV dataset via `d3.csv`, and the `pieChart` function uses D3's `pie`, `arc`, `scaleOrdinal`, `schemeTableau10`, and `rollup` APIs to aggregate counts, render SVG paths, and generate colored slices with labels. The chart is rendered as an SVG canvas sized to the browser window.

Mar 29, 2026

Loading thumbnail…

ICE7

This interactive scatter plot uses D3.js (v7) to visualize monthly U.S. unemployment rates against the size of the labor force from 2015 to 2020, with each year assigned a distinct color in the legend. The chart encodes the relationship between the two variables, revealing the dramatic spike in unemployment in spring 2020 alongside the corresponding drop in the labor force. Data points are rendered as circles, positioned using linear scales for both axes, with axis labels and a title. The implementation relies on D3's `scaleLinear`, `extent`, `axisBottom`, and `axisLeft` methods, and reads data from a CSV file.

Mar 29, 2026

Loading thumbnail…

ICE7

This example displays a scatter plot of the Iris dataset, mapping sepal length to the x-axis and sepal width to the y-axis. Each of the 150 data points is rendered as a circle, colored by species. The visualization is built with React, using D3 v7’s selection and data join methods to render SVG circles and axes, with linear scales created via `d3.scaleLinear`. Clicking a circle highlights it with a white fill and black stroke, demonstrating interactive selection within the chart.

Mar 29, 2026

Loading thumbnail…

sdv_ice_7

This scatter plot shows the relationship between U.S. unemployment rate and labor force size from 2015 to 2020, with each point colored by year and a legend distinguishing the six years. The visualization highlights the dramatic spike in unemployment in early 2020 alongside the corresponding drop in labor force. Built with D3 v7, the code uses `scaleLinear` from the Skypack CDN for axes, `axisBottom` and `axisLeft` for ticks, and the `.join()` operator to render circles. Data is loaded via `d3.csv` from a local CSV file.

Mar 29, 2026

Loading thumbnail…

ice_7

This animated scatter plot visualizes daily weather measurements from Seattle, cycling through different quantitative variables on the x-axis every two seconds to reveal relationships between temperature, precipitation, and wind. Built with D3.js version 6.7.0, the visualization uses `scaleLinear`, `extent`, and `axisBottom` to render axes and smooth transitions via `transition().duration(1000)` to animate points as they reposition. Data is loaded from a CSV file using `d3.csv` with row parsing that converts string values to numbers. The reusable `scatterPlot` component pattern demonstrates how accessor functions can dynamically update axis mappings.

Mar 29, 2026

Loading thumbnail…

ICE6-Visualizations

This visualization presents three interactive weather charts for Seattle, displaying weekly maximum temperatures across the first 100 days, a scatter plot of temperature versus wind speed, and a combined line chart of daily temperature ranges with precipitation bars. Built with React and D3 v5, the example uses `scaleBand`, `scaleLinear`, and `line` with `curveMonotoneX` to render SVG elements from CSV data. The code processes the weather dataset into weekly aggregates and daily records, with responsive axes, gridlines, and labeled scales.

Mar 11, 2026

Loading thumbnail…

index.html

This bar chart visualization summarizes food nutrition data from a CSV file fetched via d3.csv, displaying calories per food item. It provides a summary box with total item count, average calories, and the highest-calorie food. The SVG chart uses d3.scaleBand and d3.scaleLinear to render seagreen bars with rotated x-axis labels and a centered title.

Feb 26, 2026