krishna444battula@gmail.com

Activity-7.1.Q-2

This example demonstrates a minimal D3.js setup that renders a static text message into a web page. It shows how to import functions from the D3 library and a local ES6 module, using `select` from `d3` to target a div by its ID and set its text content. The code also includes basic styling via CSS and relies on an external `bundle.js`, with the data being a hardcoded string constant. The rendering approach is simple DOM manipulation rather than data visualization.

activity-7.1

A line chart visualizes car prices by brand, with the area beneath the curve filled in a translucent blue to emphasize price variation across brands. The chart is rendered using Chart.js within an HTML5 canvas, fetching comma-separated data from an external gist URL via the Fetch API. D3.v6 is loaded in the page but not directly used for rendering; instead, Chart.js handles the axes, tooltips, and responsive scaling, with the x-axis labeled "Brand" and the y-axis labeled "Price."

Activity-7.1-Q-2

This area chart visualizes data loaded from a remote text file, plotting date values over time using a blue filled area. The chart uses D3.js v7 with an SVG rendering, employing `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.area` to generate the area path. Data is parsed with `d3.csvParse` after downloading via `d3.text`, with dates converted using `d3.timeParse` and value strings cast to numbers. Axes are created with `d3.axisBottom` and `d3.axisLeft`, and the chart includes labels for both axes.

Activity-7-Q-1(Gopala Krishna Battula)

This pie chart shows the distribution of calories across various food items, with each slice representing a food’s caloric contribution. The visualization uses Chart.js on a canvas element to render the chart, while d3.csv fetches the dataset from a remote gist file. The code maps parsed food names and calorie values to labels and data points, applying a repeating color palette and enabling hover offsets, tooltips, and a legend for interactivity.

Fork of Activity 6_T-1 Q-2

This visualization displays the top 20 countries by 2010 population using a horizontal bar chart rendered with React and SVG. D3’s scaleBand and scaleLinear position the bars, while custom React components generate axes and marks. Population values from the CSV are formatted with d3.format (e.g., “1.2B”). The chart includes a title, axis labels, and hover tooltips showing formatted values.

Activity_6-Q-6

This scatter plot visualizes the caloric content of ten different fruits, with each fruit represented as a point on the chart. The x-axis displays fruit names while the y-axis shows calories per 100 grams, and each point is assigned a unique color to distinguish between fruits. The visualization uses Chart.js with a Canvas rendering context, mapping fruit indices to x-coordinates and calorie values to y-coordinates. The data comes from a static CSV file containing fruit names and their caloric values, hardcoded into the script.

Activity_6-Task-4-Q-9

This bubble chart visualizes the nutritional profiles of ten common snacks, plotting sugar content on the x-axis, calories on the y-axis, and encoding fat content through bubble radius. The SVG visualization uses D3.js v7 with `d3.scaleLinear` for axes and bubble sizing, plus `d3.scaleOrdinal` with `schemeCategory10` for color-coded snack categories. Interactive tooltips appear on mouseover, displaying each snack’s name, calories, and sugar content. Static labels identify each bubble, with data loaded from a local CSV file containing snack nutrition metrics.

Activity_6 Task-4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for various car makes. Each circle’s x-position represents horsepower, its y-position represents torque, and its size reflects highway MPG, while color encodes the car make. Hovering reveals a tooltip with the make name. Built with D3.js v7, it uses `d3.csv` to load data, `d3.scaleLinear` for axes and sizing, `d3.scaleOrdinal` for color mapping, and SVG for rendering, including a size legend.

Activity_6 Task-3.2

This visualization shows a scatter plot of Iris flower measurements, plotting sepal length against petal length. Each point represents a flower sample, with the species encoded by different symbol shapes (circles, crosses, and other D3 symbol types) and displayed alongside a shape legend. The plot uses D3 v7’s `scaleLinear`, `scaleOrdinal`, `symbolGenerator`, and `axisLeft`/`axisBottom` APIs, with data loaded asynchronously from a CSV file and parsed via `csvParse`. Specific visual encodings include x/y axes, axis labels, and a custom legend built with D3’s selection join pattern.

Fork of Activity_6 Task-3.1

This scatter plot visualizes the Iris dataset, using the D3 v6 API to map petal length and width along the x- and y-axes while coloring each point by species (setosa, versicolor, or virginica). The visualization loads data from a remote CSV file via `d3.csv`, uses `d3.scaleLinear` and `d3.extent` to scale the axes, and renders circles with `d3.select` and `.join`. Axis labels are drawn with `d3.axisBottom` and `d3.axisLeft`, and the chart’s dimensions adapt to the browser window.

Activity_6 Task-3

This scatter plot visualizes the Iris dataset, showing the relationship between petal length and petal width for three species of iris flowers. Each flower is represented as a colored circle, with sky blue for setosa, light green for versicolor, and orange for virginica. The visualization uses D3 v6 with SVG rendering, employing d3.scaleLinear, d3.extent, d3.axisLeft, and d3.axisBottom to construct the plot. Data is loaded asynchronously via d3.csv from a GitHub gist, and the code calculates the x and y positions based on the measured petal dimensions.

Activity_6 Task-3

This example demonstrates how to use D3.js v5 to display a text message in the center of a webpage, fetched from a local ES6 module. The code utilizes the `select` method from the D3 library to target a `div` element with the ID `message`, then sets its text content using the imported `message` variable from `myMessage.js`. The page loads D3 from UNPKG via a CDN, and styling is handled through a linked CSS file. It illustrates basic ES6 module imports and D3’s DOM manipulation capabilities.

Fork of Activity-6 Task-2,Q-3

This example displays a stacked bar chart comparing low and high CO2 emissions per kilometer for various transportation modes, with usage counts labeled above each bar. It uses D3 v7 to load data, stack the emission values, and render the SVG. The code demonstrates hover tooltips showing emissions details, axis labeling, and custom styling through CSS. The bars are colored distinctly for low and high emission ranges, and the chart is built using `d3.scaleBand`, `d3.scaleLinear`, and `d3.stack`.

Fork of Activity-6 Task-2Q-3

This example shows a stacked bar chart comparing low and high CO2 emissions per kilometer across six transportation modes, with usage counts labeled above each bar. The chart uses D3 v7’s `d3.stack()` and `d3.scaleBand()` to build the stacked rectangles, and displays a tooltip on hover showing the mode and emission range. SVG rendering with axes and styled labels is handled through D3 selections, while the dataset is hardcoded as JavaScript objects rather than loaded from the provided CSV.

Activity-6 Task-2

This example visualizes the low and high emission ranges for various transportation modes as a stacked bar chart, with the total height of each bar representing the high emission value and the lower segment representing the low emission value. It also displays a usage count label above each bar. Built with D3 v7, it loads data from a CSV file and uses `d3.stack` to create the stacked series, `d3.scaleBand` for the x-axis, and `d3.scaleLinear` for the y-axis. Hovering over a bar triggers a tooltip showing the exact emission value for that mode.

Activity-6 task-2

A stacked bar chart displays the percentage distribution of five IMDb rating categories across six movie genres, highlighting how genre influences audience scores. The chart uses horizontal bars where each genre’s segments represent rating proportions, with colors mapped via a D3 ordinal scale. Interactive tooltips reveal precise percentages on hover. The visualization is rendered as SVG using D3 v7, with data loaded from a CSV file and axes, legends, and labels custom-drawn through D3’s scale and axis APIs.

Fork of Activity-6 Task-2

This example demonstrates a minimal D3.js visualization that displays a custom message in the center of the page using the `select` function to manipulate the DOM. It shows how to import D3 modules and local ES6 modules, with the message text defined in a separate `myMessage.js` file. The page loads D3 v5 from UNPKG and applies styling through an external CSS file, resulting in a large, centered text label.

Activity-6 T-2

This example demonstrates the basic setup for a VizHub project, showing how to combine D3.js with local ES6 modules. It loads D3 v5 via UNPKG and uses the `select` function from D3 to update the text content of a `div` element with the ID `message`. The text itself comes from a separate `myMessage.js` module, which exports a string via `export const`. The page also includes simple CSS styling for centering and sizing the message text.

Activity 6_T-1 Q-1

A horizontal bar chart displays the top 10 countries by 2000 population, based on CSV data loaded via `d3.csv`. The React app uses `d3.scaleBand` for country categories and `d3.scaleLinear` for population values, rendered as SVG `<rect>` elements. D3's `format` function converts axis tick labels, and custom React components (`AxisBottom`, `AxisLeft`, `Marks`) structure the visualization. Tooltips show formatted population values, with the chart titled "Top 10 countries population."

Activity_6 Q-1

This visualization shows the top 10 countries by population in the year 2000 as a horizontal bar chart, with population values formatted in billions using the `format` API from D3 v5. The React-based implementation uses `scaleBand` and `scaleLinear` to map country names and populations to screen positions, while custom `AxisBottom` and `AxisLeft` components render the scales as SVG elements. Data is loaded asynchronously via the `csv` function and comes from a GitHub-hosted CSV file, with bars colored light green and tooltips revealing exact population values.

Activity-6 Task-1

This chart displays the top 30 countries by 2020 population as a horizontal bar chart, with country names on the y-axis and population values on the x-axis in billions. The visualization is rendered as SVG using React and D3 v5, employing `scaleBand` for the categorical axis and `scaleLinear` for the quantitative scale. The code fetches CSV data from a remote URL, formats population values with `d3.format`, and includes basic interactivity through SVG `<title>` tooltips showing exact values.

Activity_6 Q-1

This example shows a horizontal bar chart comparing the populations of ten countries in the year 2000. The chart uses an SVG-based React component, with D3 version 5’s `scaleBand` and `scaleLinear` to manage the categorical y-axis and quantitative x-axis. Data is loaded from a remote CSV file, and the bars are rendered as `<rect>` elements that scale with the population values. Tick marks and labels on both axes are generated using custom React components that wrap D3’s scale methods, while CSS styling controls the fill color and font.

Activity_6 Q-1

This bar chart displays the top 10 most populous countries in 2000, using data from the United Nations World Population Prospects 2019. Horizontal bars use vibrant orange against a light background, with population values shown along the x-axis in billions. The visualization is built with React and D3 v5, employing `scaleBand` for the categorical country axis and `scaleLinear` for the numeric population scale. SVG rectangles render the marks, with axes generated through custom `AxisBottom` and `AxisLeft` components using D3's `format` for tick labels.

Buddha-6 images Gopala Krishna

A Buddha image rendered as abstract SVG is overlaid with thousands of colored squares, generated by nested React array maps that use `Math.random()` for positions and fill colors. The visualization combines a static Buddha path with dynamic, randomly placed small rectangles, while the body background uses a flower photo. The code runs React and ReactDOM to render SVG elements within a 960x1000 viewport.

Oct 18, 2024

buddha's 5

A dense field of small, randomly placed, semi-transparent polygons forms a large, intricately outlined Buddha figure. The image is generated by mapping a series of nested arrays to create hundreds of overlapping triangles, each with randomized coordinates, colors, and a 45-degree rotation. The composition combines a chaotic, colorful background with a precise, black vector path of the Buddha’s silhouette. Built with React and rendered as SVG, the code leverages ReactDOM to construct the graphic, using JavaScript’s `Math.random` for positioning and color, and the `path` element for the central figure.

Oct 10, 2024