A

anusha.chilkamarri26@gmail.com

@anushachilakamarri·34 public vizzes

Loading thumbnail…

Assignment-2(b)

This area chart visualizes temperature values across different cities, with a light blue filled region spanning from the baseline to each city’s temperature point. The chart uses D3 v7 to fetch a remote CSV file, parse it with `d3.csvParse`, and render the visualization as an SVG. It employs `d3.scaleBand` for the categorical x-axis, `d3.scaleLinear` for the temperature y-axis, and `d3.area` to generate the filled path. Axes are drawn with `d3.axisBottom` and `d3.axisLeft`, including rotated city labels and a y-axis title.

Loading thumbnail…

Fork of assignment -2(a)

This example shows the market share of top shoe brands with a pie chart and a color-coded legend. It loads CSV data from a GitHub Gist and uses D3 v5’s `pie` and `arc` generators to draw the SVG segments, with labels showing percentages. A `scaleOrdinal` maps brand names to a fixed color palette. The legend, rendered with `rect` and `text` elements, identifies each brand alongside its share.

Loading thumbnail…

assignment -2(a)

This visualization shows the market share percentages of major shoe brands in a pie chart, with each slice labeled by its percentage and accompanied by a color-coded legend listing the brand names on the right. The chart is rendered using D3 v5’s `pie`, `arc`, and `scaleOrdinal` APIs, with data loaded from a CSV file via `d3.csv`. The SVG canvas positions the pie chart on the left and the legend on the right, using `arcGenerator.centroid` to place the percentage labels within each slice.

Loading thumbnail…

Fork of Hello VizHub

This example presents an age distribution pie chart built with D3 v7. It fetches CSV data from an online source, counts entries into four age brackets, and visualizes the proportions as pie slices with labels. The chart uses `d3.csvParse`, `d3.pie`, `d3.arc`, and a `d3.schemeCategory10` color scale, rendering arcs and a legend inside an SVG.

Loading thumbnail…

pie chart

This pie chart visualizes temperature distribution across cities from an online food orders dataset, categorizing temperatures into low, medium, and high ranges. The chart uses a standard D3 pie layout with colored arcs and labels, displaying category names directly on the slices. A legend with matching color swatches appears beneath the SVG. The visualization is built with the D3 v7 library, using d3.pie, d3.arc, d3.scaleOrdinal, and d3.csvParse to fetch and process the remote CSV data.

Loading thumbnail…

Fork of activity 6_question

This bubble chart shows the correlation between birthrate, life expectancy, and GDP for 14 countries. The visualization uses animated SVG circles positioned by a linear scale for each axis, with bubble size and color encoding GDP via d3.scaleLinear and d3.scaleOrdinal with interpolateTurbo. A hover tooltip displays each country’s name using D3 event handlers, while a legend explains the GDP scale. The chart is implemented with d3.csv loading, axis generators, and data binding through `join`.

Loading thumbnail…

activity 6_question

This interactive bubble chart visualizes the correlation between birth rate, life expectancy, and GDP for fourteen countries. Each bubble's position encodes life expectancy (x-axis) and birth rate (y-axis), while its size reflects GDP and its color categorizes the country. Hovering over a bubble reveals its name. Built with D3 v7, the visualization uses `d3.scaleLinear` for axes and bubble size, `d3.scaleOrdinal` for color mapping, and `d3.cs` to load the `bubblechart.csv` data. A legend clarifies the GDP scale, and a tooltip appears on mouseover.

Loading thumbnail…

Fork of Activity 6_Task 4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes. Each circle represents a car brand, positioned by its horsepower and torque values, with the circle's radius scaled to highway MPG. Color differentiates car makes using a custom ordinal scale built with `d3.scaleOrdinal` and `d3.interpolateTurbo`. The chart is rendered as an SVG using D3 v7, featuring interactive tooltips on hover, a legend for bubble size, and axis labels. Data comes from a local CSV file.

Loading thumbnail…

Activity 6_Question 2

This stacked bar chart shows the percentage distribution of student grades across five rating intervals for different genres, revealing how grade categories vary by genre. The visualization uses D3 v7's stack, scaleLinear, scaleBand, and axis methods to construct the horizontal bars, with SVG rendering. Hovering over a segment triggers a custom tooltip displaying the exact percentage via a mouseover event handler. The data comes from a CSV file containing grade percentages per genre, with total proportions summing to 1. A color scale maps rating intervals to distinct hues.

Loading thumbnail…

Fork of Activity6_Task2

This scatter plot visualizes the Diabetes DataSet, mapping Blood Pressure on the x-axis against Skin Thickness on the y-axis, with black and orange points distinguishing negative and positive outcomes. Each circle's size encodes the number of pregnancies, while its transparency reflects Glucose levels. Built with D3 v6, it uses `csv`, `scaleLinear`, `axisLeft`, and `axisBottom` to render an SVG, loading data from the provided GitHub URL. A legend identifies the outcome colors, and axis labels clarify the variables.

Loading thumbnail…

activity 6_question 4

This example demonstrates a minimal D3.js visualization that renders a message on a web page using ES6 module imports. The code imports the `select` function from D3 and a custom message from a local module, then updates the text content of a `<div>` element using D3’s selection API. Styling is handled through an external CSS file with the `#message` selector. The visualization relies on the D3 v5 library loaded via UNPKG and includes a regular expression and a static variable that do not affect the rendered output.

Loading thumbnail…

Activity 6_Task 4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes. Each circle’s position encodes horsepower (x-axis) and torque (y-axis), while its radius and color represent highway MPG and car make, respectively. Built with D3.js v7, the visualization renders as SVG with interactive tooltips on mouseover, a size legend for MPG values, and a color legend for makes. Data is loaded from a CSV file using `d3.csv`.

Loading thumbnail…

Fork of Activity 6_question 3

This scatter plot visualizes the Diabetes DataSet from a GitHub-hosted CSV, mapping blood pressure on the x-axis and skin thickness on the y-axis. Each point represents a patient, with color indicating the outcome (black for negative, orange for positive) and point size simultaneously encoding the number of pregnancies and glucose level. The visualization is rendered using D3 v6, employing `d3.csv`, `d3.select`, `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` APIs to load, scale, and plot the data as SVG circles with labeled axes.

Loading thumbnail…

Activity 6_question 3

A scatter plot visualizes the Diabetes DataSet, mapping blood pressure on the x-axis against skin thickness on the y-axis. Each point is colored black or orange based on the outcome, and the circle radius is constant. The visualization is built with D3 v6, using `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `select` to load CSV data from GitHub and render SVG circles, with axis labels styled via CSS.

Loading thumbnail…

Fork of activity 6_tutorial 3.2

This scatter plot visualizes the Iris dataset, showing sepal length against petal length, with species distinguished by different d3 symbol shapes. A shape legend identifies the three species categories, while labeled axes display the quantitative measurements. Built with D3 v7, the visualization uses modular JavaScript functions including `scaleLinear`, `scaleOrdinal`, `symbolGenerator`, and custom axis and legend components. The data is loaded asynchronously from a remote CSV file and parsed using `csvParse`, with the plot rendering across the full browser window.

Loading thumbnail…

activity 6_tutorial 3.2

This example shows the classic Iris dataset as a scatter plot of sepal length against petal length, with each species distinguished by a unique symbol shape. A legend identifies the three species by their corresponding shapes. The visualization uses D3 v7 to load and parse the CSV data, then renders marks using d3.symbol and d3.symbolsFill. Axes are drawn with d3.axisBottom and d3.axisLeft, while scales for position and shape are created with d3.scaleLinear and d3.scaleOrdinal.

Loading thumbnail…

Fork of Activity 6_Task 3

This scatterplot visualizes the Iris dataset, mapping petal length and width for individual flowers, with points colored by species (setosa, versicolor, virginica). D3 v6 loads the CSV data, then uses scaleLinear and extent to set the x and y axes, while axisLeft and axisBottom add labels. The SVG circles receive computed coordinates and colors based on the parsed species field. The chart’s red title and green axis labels, positioned via rotation and translate, highlight the custom styling and data-derived encoding.

Loading thumbnail…

Activity 6_Task 3

This scatterplot displays the Iris dataset’s petal length against petal width for all samples, with each point’s fill color indicating its species (setosa, versicolor, or virginica). The visualization also captures sepal dimensions as supplemental attributes on the circles, though they do not affect the positions. Using D3 v6, the code loads CSV data via `d3.csv`, applies `d3.scaleLinear` for both axes, renders SVG circles through a data join, and adds axes with `d3.axisLeft` and `d3.axisBottom`. Axis labels are drawn as rotated text, and the chart resizes to the window dimensions.

Loading thumbnail…

6 buddhas

Six abstract buddha silhouettes overlap in a grid, with each figure rendered as a translucent green path atop a floral background image. The visualization uses React and ReactDOM with inline SVG paths, mapping over a numeric array to generate random colored null elements, though the primary composition relies on six repeated `<path>` definitions. The SVG is scaled and translated, with opacity set to 0.8 to create layered depth. The code references the raw SVG path data directly, without external charting libraries.

Loading thumbnail…

6 buddhas

Six abstract buddha silhouettes overlap in a grid, with each figure rendered as a translucent green path atop a floral background image. The visualization uses React and ReactDOM with inline SVG paths, mapping over a numeric array to generate random colored null elements, though the primary composition relies on six repeated `<path>` definitions. The SVG is scaled and translated, with opacity set to 0.8 to create layered depth. The code references the raw SVG path data directly, without external charting libraries.

Loading thumbnail…

6 Buddhas

Six Buddhas overlays three nested spatial loops, mapping a numeric array to shimmering fields of small, translucent circles on top of a hand-coded SVG path of a buddha figure. The React application uses `ReactDOM` with `A.map` to generate the circles, each with random coordinates and `fill` colors, against a fixed flower-background image. The rendering combines procedural randomness with a deterministic, static vector path for a meditative contrast.

Loading thumbnail…

Fork of Activity 6_Task 2

A stacked horizontal bar chart displays IMDb rating percentages across six genres, with each bar segmented by five rating ranges from below 5.0 to above 8.5. The visualization uses D3 v7 with `d3.stack()` to generate the stacked series and `d3.scaleOrdinal` for color encoding. A custom tooltip, configured on mouse events, reveals the exact percentage for each genre-rating combination, while axes are rendered using `d3.axisLeft` and `d3.axisBottom`. The data comes from a CSV file with precomputed proportions.

Loading thumbnail…

Activity 6_Task 2

This stacked bar chart shows the distribution of IMDb movie ratings across six genres, with each bar divided into five rating categories from “below 5.0” to “above 8.5.” The chart reads the proportions of each rating bracket per genre from a CSV file using d3.csv, then applies d3.stack to create the layered segments and d3.scaleOrdinal for color encoding. Each segment is rendered as an SVG rect with d3.axisBottom and d3.scaleBand for the genre categories, and hovering over a segment reveals its exact percentage via a tooltip.

Loading thumbnail…

Fork of Fork of Activity 6_Question 1

A horizontal bar chart displays the top 10 countries by population in the year 2000, using a green fill for each bar. The chart is built with React and D3 v5, with `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. Population values are parsed from a CSV file hosted on GitHub, formatted with D3's `format('.2s')` to show values in billions, and tooltips expose exact population figures. The SVG is rendered with reusable components for the axes and marks.

Loading thumbnail…

Fork of Activity 6_Question 1

This visualization shows the top 10 countries by population in the year 2000 as horizontal bars, with country names on the y-axis and population values on the x-axis. It is built with React and D3 v5, using `scaleBand` and `scaleLinear` to position the marks. The SVG rectangles render the data, which is loaded via `csv` from a GitHub-hosted dataset, and tooltips display formatted population values using D3’s `format`. The custom `AxisBottom` and `AxisLeft` components generate the tick marks and labels.

Loading thumbnail…

Fork of Fork of Activity 6_Question1b

This example shows a horizontal bar chart of population for twenty countries, using a log-like linear scale where each bar’s length encodes the 2010 population value. The visualization is built with React and D3 v5, using `scaleBand` for the categorical y-axis and `scaleLinear` for the continuous x-axis. Axes are rendered as SVG components, with tick formatting converting values to billions and a tooltip showing the precise figure. The data is loaded via D3’s `csv` from a GitHub repository, sliced to the top twenty entries.

Loading thumbnail…

Fork of Activity 6_Question1b

This bar chart displays the population of 20 countries in 2010, ordered along the vertical axis with horizontal bars extending to represent each country’s population. The visualization is built with React and D3 v5, using `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis, with bars rendered as SVG rectangles via the `Marks` component. Data is loaded asynchronously from a CSV file using `d3.csv`, and axis ticks are formatted with `d3.format` to abbreviate large numbers (e.g., converting billions).

Loading thumbnail…

Activity 6_Question1b

This bar chart displays the population of 20 countries in 2020, sorted alphabetically by country name. The visualization is built with React and D3 v5, using SVG rendering. The code defines `AxisBottom`, `AxisLeft`, and `Marks` components that leverage `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the population x-axis. Data is loaded from a CSV file via `d3.csv`, with population values calculated by multiplying 2010 figures by 1000.

Loading thumbnail…

Activity 6_Question 1

A horizontal bar chart displays the populations of the top ten countries in 2020, ranked by country name. The chart uses D3 v5 scales, including `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis, with values formatted to billions using `d3.format`. React renders the SVG elements, while D3’s `csv` loads and parses the population data from a GitHub-hosted CSV file. Each bar includes a native SVG `<title>` element for tooltips.

Loading thumbnail…

Fork of Activity 6_Task 1

This horizontal bar chart displays the population of 30 countries in 2020, using green bars sorted by country name on the y-axis and population on the x-axis. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis and `scaleLinear` for the continuous x-axis. The `format` function from D3 converts tick labels to abbreviated form (e.g., "1.2B"). Data is loaded asynchronously from a CSV file hosted on GitHub using D3's `csv` function, with bars rendered as SVG rectangles and tooltips showing the precise value.

Loading thumbnail…

Activity 6_Task 1

This horizontal bar chart displays the 2020 population estimates for the top 30 countries, ranked by country name on the y-axis. Built with React and D3 v5, the visualization uses `scaleBand` for the categorical axis and `scaleLinear` for the population values, rendering SVG rectangles whose lengths encode the data. Tooltips show formatted population numbers via the `title` element. The x-axis uses `format('.2s')` to abbreviate values in billions, while the data is fetched from a CSV file.

Loading thumbnail…

Fork of 5 Buddhas

This visualization displays a chaotic, colorful pattern of rotated polygons overlaid on a detailed Buddha silhouette, rendered on a black background. It uses React to construct an SVG scene, with the `index.js` file generating nested arrays to create hundreds of semi-transparent diamond shapes at random positions and colors. The Buddha figure is drawn using a complex SVG path element, scaled and translated into place, while the polygon colors are determined by `Math.random()`. The result is an abstract, overlapping composition that blends geometric noise with the recognizable spiritual icon.

Loading thumbnail…

5 Buddhas

Five overlapping Buddha silhouettes form a cascading, colorful composition against a black background. The piece layers five distorted, path-based Buddha shapes with varying scales and opacities, creating a sense of depth and multiplicity. Built with React and rendered as SVG, the visualization generates a dense field of random polygon primitives, each with a randomized fill and rotation, produced through nested loops. The entire composition is static, with the overlapping figures and algorithmic noise contributing to a chaotic, multi-hued visual experience.

Loading thumbnail…

5 Buddhas

Five overlapping Buddha silhouettes are rendered in black, purple, blue, and red tones. Each Buddha is drawn as an SVG path with a thick stroke, and the overlapping creates layered, semi-transparent color blending. The visualization starts by scattering small, randomly positioned circles across the canvas, and then draws one Buddha path inside each group. The React application generates the random SVG circles and positions each