K

kblikitha22@gmail.com

@LikithaKolluruBalaji·17 public vizzes

Loading thumbnail…

area chart

This area chart visualizes the monthly trend of average AQI values, with a teal filled area beneath the line and labeled data points. Built with D3 v7, it loads a CSV dataset from a GitHub gist, parses month names using `d3.timeParse`, and renders the chart as an SVG. The visualization uses a `d3.area` generator to create the shaded region, with time-based x-scale via `d3.scaleTime` and linear y-scale via `d3.scaleLinear`, plus axes from `d3.axisBottom` and `d3.axisLeft`.

Loading thumbnail…

piechart

This pie chart visualizes the top 10 countries by average Air Quality Index (AQI) from a CSV file. Each slice represents a country, with its name labeled inside. A legend on the left lists each country with its corresponding AQI value, using colors from the `d3.scaleOrdinal` and `d3.schemeSet3` palette. The chart is rendered as an SVG using `d3.pie` and `d3.arc` to compute slice geometries, and `d3.csv` to load and parse the data.

Loading thumbnail…

PieChart-D3

A pie chart displays the distribution of fruit categories from a CSV file, with each slice labeled and a corresponding color legend. The chart is rendered as SVG using D3 v7, with the pie layout created via `d3.pie` and `d3.arc`, and colors assigned through `d3.scaleOrdinal` with `d3.schemeCategory10`. Data is loaded asynchronously with `d3.csv`, and slice labels are positioned using `arc.centroid`. The legend is built manually by appending colored rectangles and text elements.

Loading thumbnail…

Activity 7

This animated scatter plot displays the Iris flower dataset, cycling through different feature pairs on the x-axis while the y-axis remains sepal length. The visualization uses D3's `scaleLinear`, `axisLeft`, and `axisBottom` APIs to render axes and circles. Species are color-coded (skyblue, lightgreen, orange) with a legend, and a `setInterval` timer drives the animation, updating the plot’s x-value binding every few seconds. The SVG is rendered full-window with styled text labels for axis titles and species names.

Loading thumbnail…

Activity 6_Task4_Likitha

This bubble chart shows the relationship between average horsepower, torque, and highway fuel efficiency across different car makes, with each circle’s position encoding horsepower and torque while its size represents fuel efficiency. The visualization uses D3 v7 APIs including d3.scaleLinear, d3.scaleSqrt, d3.scaleOrdinal, and d3.schemeCategory10, rendering circles as SVG elements. Interactive tooltips appear on mouseover, displaying make, horsepower, torque, and MPG values. Data is loaded from a GitHub-hosted CSV file, with color coding by car brand and a legend showing selected manufacturers.

Loading thumbnail…

Activity 6_Task 3_Likitha_2

This interactive scatter plot visualizes the classic Iris dataset, plotting sepal length against petal length for three species of iris flowers. Each species—setosa, versicolor, and virginica—is represented by a distinct geometric shape (circle, cross, and diamond) to differentiate data points, with a legend identifying the mapping. The visualization uses D3 v7 APIs including `d3.symbol`, `d3.symbolCircle`, `d3.symbolCross`, and `d3.symbolDiamond` to render markers, while `d3.scaleLinear` and `d3.axisBottom`/`d3.axisLeft` handle scaling and axes. Hovering over a point triggers a tooltip with species details and scales the marker using SVG transitions. Data is loaded remotely as CSV and parsed with `d3.csv`.

Loading thumbnail…

Activity 6_Task 3_Likitha

This scatter plot visualizes the Iris dataset, comparing sepal length against petal length. Each dot represents an individual flower, with its color mapped to the species (`Iris-setosa`, `Iris-versicolor`, `Iris-virginica`) via a `d3.scaleOrdinal` color scale and its position determined by `d3.scaleLinear` scales for both axes. The visualization is rendered as an SVG using D3 v7, loading the CSV data via `d3.csv`. An interactive tooltip and subtle size/opacity changes appear on `mouseover`, providing a species detail and enhancing point readability. The chart includes labeled axes and a legend, while a static encoding uses a uniform dot radius.

Loading thumbnail…

Activity 6_Task 2

This stacked horizontal bar chart shows the percentage breakdown of energy sources—fossil fuels, nuclear, hydroelectric, solar, wind, and other renewables—for eight countries, with each bar segment colored by source and an interactive tooltip revealing exact values. The visualization uses D3 v7's `d3.stack()` to compute layered series, `d3.scaleBand()` and `d3.scaleLinear()` for axes, and `d3.scaleOrdinal()` for color mapping. Data is loaded from `data.csv` and rendered as SVG rectangles, with a custom mouseover tooltip built via D3 selections and a legend generated dynamically from the column headers.

Loading thumbnail…

Activity 6_Task1_LikithaQ2

This is a horizontal bar chart displaying the population of 20 countries in 2010. The chart uses a light green for bars and blue axis ticks, rendering as an SVG within a React application that leverages the d3.v5 library for data processing and scaling. The bars are created via a `Marks` component that maps data to `rect` elements, with axes built by `AxisBottom` and `AxisLeft`. Population values are formatted using D3's `format` function, converting large numbers to a compact "B" suffix. Data is loaded from a CSV file hosted on GitHub.

Loading thumbnail…

Activity 6_Task1_LikithaQ1

This example shows the ten most populous countries in 2000 as a horizontal bar chart, using a light green fill and blue axis ticks. The chart is built with React and D3 v5, rendering as an SVG. The data is fetched as CSV, with the population column converted from thousands. A linear scale maps population to bar width, while a band scale positions each country.

Loading thumbnail…

Activity_6 Task 1

This example shows a horizontal bar chart of the top 30 countries by 2020 population, with the y-axis listing country names and the x-axis displaying population values in billions. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis, rendering SVG rectangles via the `Marks` component. The data is loaded asynchronously from a CSV file using `d3.csv`, and axis ticks are generated with `xScale.ticks()`, formatted with the `d3.format` SI prefix to abbreviate large numbers.

Loading thumbnail…

Activity 6

This horizontal bar chart ranks the 20 most populous countries in 2010, using a React and D3-based SVG visualization. The chart employs `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the quantitative x-axis, with population values formatted using `toLocaleString`. Data is loaded asynchronously from a CSV file via D3’s `csv` function, then sorted and filtered to the top 20 entries. Each bar includes a native SVG `<title>` tooltip, with axes and labels rendered from custom React components.

Loading thumbnail…

Activity_6_Task 1

A grouped bar chart displays categorical data across two dimensions, with blue tick lines marking the y-axis and light green bars representing values. The visualization uses React to render SVG elements, with `d3.scaleBand` and `d3.scaleLinear` handling axis scales, while custom `AxisBottom` and `AxisLeft` components generate tick marks and labels. The data appears to be sourced from a static dataset loaded via D3 v5.

Loading thumbnail…

Fork of Activity_6_Task 1

This fork of “Activity_6_Task 1” displays the message “Hello VizHub!” centered on the page. The visualization uses D3 v6’s `select` API to target the `#message` div and set its text content. Styling is applied via an external CSS file, with the font-size set to an enormous 12em for emphasis. The page loads D3 from a CDN and imports a local ES6 module, `myMessage.js`, to supply the string. Data comes from a Gist-hosted CSV URL, though the code shown does not yet process it.

Loading thumbnail…

Activity_6_Task 1

This example displays a simple text message, "Hello VizHub!", centered on the page with large font styling. The visualization demonstrates a basic setup using the D3.js library (version 6) to select an HTML element and set its text content. The code imports the `select` function from D3 and uses it to target the `#message` div, while the text itself comes from a separate ES6 module. The page structure is defined in the HTML file, with styles applied via CSS.

Loading thumbnail…

activity 6_Task 1

This example presents a horizontal bar chart visualizing the population of 30 countries for the year 2020. It uses D3 v7 with an SVG rendering approach, employing `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the y-axis. The data is loaded asynchronously from a CSV file using `d3.csv` and rendered with custom `Marks`, `AxisBottom`, and `AxisLeft` components, which utilize `d3.axisBottom` and `d3.axisLeft` for tick generation.

Loading thumbnail…

activity 6_Task 1

This horizontal bar chart displays the population of countries in 2020, sorted by country name, with the x-axis scaled linearly from zero to the maximum population value. The visualization uses D3 v7 to load CSV data, create a band scale for the y-axis and a linear scale for the x-axis, and render SVG rectangles. The bottom axis includes horizontal grid lines via tickSize, and the chart includes axis labels for both dimensions.