hkodiripaka15@gmail.com

Assignment-2-2

This visualization displays monthly average temperatures as a filled area chart, with temperature values plotted along the y-axis and months along the x-axis. The chart uses a steelblue fill to represent the temperature trend across the year. Built with D3.js, it imports data from a remote CSV file and leverages `scaleBand`, `scaleLinear`, and `area` to generate the geometry. The code employs `axisBottom` and `axisLeft` for the coordinate axes, with labels for "Month" and "Average Temperature (°C)". The SVG output is configured to fill the browser viewport.

Assignment2-1

assignment 2

This pie chart visualizes laptop sales by brand, displaying the proportion of units sold for each manufacturer. Built with D3.js (v6.7.0), it uses `d3.pie` and `d3.arc` to generate the sectors, with each slice labeled by brand and unit count. A color-coded legend at the bottom identifies each brand, while data is loaded from a remote CSV file. The visualization also supports reusable chart creation through a separate `scatterPlot.js` module defining a configurable pie chart function.

Assignment 2 tutorial

This example demonstrates how to set up a minimal VizHub project using D3 v5 and ES6 modules. It loads D3 from a CDN via UNPKG, imports the `select` function from the `d3` module, and imports a local `message` variable from a custom ES6 module. The code uses `select('#message')` to update the text content of a div element, and includes a CSS file for styling. The example highlights basic module import patterns and D3 selection methods.

Fork of Hello VizHub

This example demonstrates a minimal VizHub project that renders the text "Hello VizHub!" in a centered, large font. It shows how to load D3 as a global script from a CDN while also using ES6 module imports to access D3’s `select` function and a local `message` string from `myMessage.js`. The code sets the text content of a `div#message` element, with styling applied via an external CSS file.

Activity 6 q4

This bubble chart displays the correlation between acceleration, top speed, and fuel efficiency for luxury car brands. Each circle’s position maps acceleration on the x-axis and top speed on the y-axis, while its radius encodes fuel efficiency using d3.scaleLinear. The code loads data from a CSV file and renders the SVG visualization with d3.axisBottom and d3.axisLeft. Interactive tooltips appear on mouseover events, showing each car’s specific metric values in a styled HTML div.

task3 activity6

This scatter plot visualizes the Iris dataset, mapping petal length and width for individual flowers while coloring points by species (skyblue for setosa, lightgreen for versicolor, orange for virginica). Built with D3.js v6, it uses SVG circles and scaleLinear scales to position marks, with axisLeft and axisBottom generating the axes. The code loads CSV data via d3.csv, applies a color marker function based on species, and includes rotated axis labels for petal length and sepal length.

Fork of activity 6_ Q1.2

This example shows a horizontal bar chart comparing the 2010 populations of twenty countries, sorted alphabetically by country name. Population values are converted from raw CSV numbers and formatted as billions using D3's `format` function. The visualization uses React with D3 v5 scales (`scaleBand` for the y-axis and `scaleLinear` for the x-axis), rendering SVG rectangles for each bar. Hovering over a bar reveals a tooltip with the formatted population value. The chart includes styled axes with blue tick lines and a labeled x-axis, and loads data asynchronously from a GitHub-hosted CSV file.

Fork of Bubble chart duplicate

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes. Each bubble’s position encodes horsepower and torque, while its radius and color map to highway MPG and make. The chart uses d3.scaleLinear for axes and sizing, d3.scaleOrdinal with d3.interpolateTurbo for colors, and SVG circles. Interactive tooltips appear on mouseover using d3 transitions, and a legend indicates MPG values. Data comes from a CSV file.

Activity6_Task4

This bubble chart examines the correlation between average horsepower, torque, and highway MPG for various car makes. It uses a D3.js SVG render with animated transitions, scaling circle size by highway MPG and coloring each make via the ordinal color scale with interpolated Turbo colors. The chart includes interactive tooltips that display the car make on hover, a legend for bubble sizes, and a color-coded legend for car makes. Data visualizes the trade-off between performance metrics and fuel efficiency, sourced from bubblechart.csv.

Activity6_Task4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for various car manufacturers. Each car brand is represented by a colored bubble, with its position determined by horsepower (x-axis) and torque (y-axis), while the bubble’s size corresponds to its highway MPG value. The visualization uses D3.js v7 with SVG rendering and includes interactive tooltips that display the manufacturer name on hover. A legend on the right uses scaled circles to indicate MPG values, and a color-coded scheme distinguishes each brand. The data is loaded from a CSV file.

Fork of Hello VizHub

This scatter plot visualizes the Iris dataset, mapping sepal length and petal length on the axes while using distinct symbols to represent the three iris species. The visualization loads the CSV data asynchronously via `fetch` and `csvParse`, then renders it with `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.symbol` generators. Axis labels and a shape legend are added through modular helper functions. The plot uses d3.v7’s data join pattern, showing how shape encoding distinguishes categorical values in a quantitative scatter plot.

Activity6 task3.2

This scatter plot visualizes the Iris dataset, plotting sepal length against petal length. Each point is rendered as a distinct symbol—circle, cross, or square—to represent the three species of Iris flowers, categorized on a categorical color scale. The visualization is built using D3.js (v7), using the `scaleLinear` and `scaleOrdinal` APIs to map data to positions and symbols. Axes and a shape legend are drawn using custom `axes` and `shapeLegend` modules, which utilize D3’s `axisLeft` and `axisBottom` functions. Data is loaded from a remote CSV file and parsed with `csvParse`.

act6 task3.2

This visualization shows the relationship between bird weight and height, with points shaped according to bird species. It uses D3 v7 APIs including `scaleLinear`, `scaleOrdinal`, `symbol` for icons, and `symbolsFill` for shape variants. Data is loaded from a CSV file via `csvParse`, with numerical fields converted before rendering. The scatter plot includes labeled axes and a custom shape legend, all drawn with SVG paths in an HTML page.

activity 6- Q2

This stacked bar chart displays the percentage distribution of IMDb ratings across six video game genres, with each bar segmented by rating bands from below 2.0 to above 8.5. The visualization uses d3.stack() to aggregate the data, d3.scaleOrdinal for color encoding, and d3.scaleBand for the categorical y-axis. Interactive tooltips appear on mouseover, showing the exact percentage for each rating segment, while the chart reads from a local CSV file. The SVG rendering employs d3.axisBottom and d3.axisLeft for axes with custom tick formatting.

Activity6_Task2

A stacked bar chart visualizes the percentage distribution of IMDb rating categories across six movie genres, showing how genres such as Documentary and Action differ in rating outcomes. Each bar segment represents a rating level, with hover interactions displaying exact percentages via a tooltip. The visualization uses D3 v7’s `d3.stack`, `scaleBand`, and `scaleLinear` APIs to generate SVG rectangles in a stacked layout, with data loaded from a CSV file. A color scale encodes the rating categories, and axes are rendered using `d3.axisBottom` and `d3.axisLeft`.

activity 6q1.2

This bar chart visualizes the population of various countries in 2010, with the countries listed on the y-axis and population values on the x-axis. It uses the D3.js scaleBand and scaleLinear APIs to map data to SVG rectangles, which are rendered via React components. The chart displays the top 20 countries from a CSV dataset, formatting x-axis tick labels using D3’s format function to abbreviate values (e.g., "1.2B"). The x-axis is labeled "POPULATION-2010", and tooltips show exact formatted population values on hover.

activity6 q1.1

This example shows a horizontal bar chart comparing the population of different countries for the year 2000, with the top 10 countries sorted by population. The chart uses React components to render SVG elements, with d3.scaleBand for the categorical y-axis and d3.scaleLinear for the numerical x-axis. Data is loaded from a CSV file using d3.csv, and axis ticks are formatted with d3.format using SI notation that converts "G" to "B" for billions.

activity 6_Task 1

This visualization shows the 2020 population for 30 countries as a horizontal bar chart, with country names on the y-axis and population values on the x-axis. The bars are rendered as SVG rectangles using React components, with scales from d3.scaleBand and d3.scaleLinear. Axes are custom components using d3 tick formatting, and the data is loaded from a CSV file via d3.csv with population values multiplied by 1000.

Buddha

A meditative portrait of the Buddha emerges from overlapping violet and green outline paths rendered in SVG. The code uses React to create a layered composition of the same path definition, transformed through scaling and translation to build visual depth. A black background with a floral image behind the SVG adds context to the figure. The `<path>` elements use explicit `d` coordinate strings rather than a data-driven approach, with `stroke` and `stroke-width` properties defining the colored contours.