H

harinihari6791@gmail.com

@Harini241·18 public vizzes

Loading thumbnail…

Activity7_Question 2

This area chart displays the daily average temperatures in Dallas from January through March 2023. The visualization uses a steelblue filled area to represent temperature trends over time, with date on the x-axis and temperature in degrees Celsius on the y-axis. The code leverages d3.scaleTime, d3.scaleLinear, and d3.area to construct the chart, pulling data from a raw CSV file hosted on GitHub. Both axes are rendered using d3.axisBottom and d3.axisLeft, with custom labels for clarity.

Loading thumbnail…

Activity 7_Question 1

This pie chart displays the distribution of causes of death in the United States for 2023, with each slice labeled by its percentage of total deaths. The code uses D3 v7 with the `d3.pie` and `d3.arc` generators to compute and draw the arcs, while `d3.scaleOrdinal` with `d3.schemeSet2` assigns categorical colors. Data is loaded remotely from a CSV file via `d3.csv`, and a custom legend on the right pairs each cause with its corresponding percentage. The SVG rendering includes axis labels and bold percentage text positioned using `labelArc.centroid`.

Loading thumbnail…

Activity7_Question 1

A pie chart visualizes the percentage distribution of a budget across five categories: Food, Transport, Housing, Savings, and Entertainment. The chart uses d3.pie() to compute arc angles and d3.arc() to generate SVG path slices, with a color scale mapping each category to a distinct color. Percent values are labeled inside each slice using arc.centroid() for positioning, and a separate legend lists the categories with their corresponding colors. The code defines fixed data in a JavaScript array and renders the chart as an SVG element using D3 v7.

Loading thumbnail…

Activity_7.1

This interactive scatterplot animates the Iris dataset, cycling through petal width, sepal width, petal length, and sepal length on the x-axis while sepal length remains fixed on the y-axis. Colored circles represent three species—setosa in skyblue, versicolor in lightgreen, and virginica in orange—with a legend and dynamically updating axis labels. Built with D3 v6, it uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` within a reusable `scatterPlot` module, driven by `setInterval` to rotate columns and SVG rendering for all marks and annotations.

Loading thumbnail…

Fork of Reusable Scatter plot Activity 8

This visualization presents the classic Iris dataset as an animated scatter plot that cycles through different feature combinations on the x-axis while keeping sepal length on the y-axis. Using d3.csv for data loading and d3.scaleLinear with axis functions to render the SVG, the chart updates every few seconds via setInterval. Circles are colored by species using a custom marker function, with a color legend and axis labels added dynamically. The code leverages d3.selectAll and .join() to manage circle and text elements, with separate xValue and yValue accessors driving the re-rendering.

Loading thumbnail…

Activity6_Question 1.1

This chart displays the top 10 countries by population in 2000 as horizontal bars. The visualization uses React with D3 v5, employing `scaleBand` and `scaleLinear` to map countries and population values. Data is loaded from a CSV file via `d3.csv`, processed, and sorted. Axes are rendered with custom React components for bottom and left positions. Bars are drawn as SVG rectangles with hover effects, and population values appear as formatted tooltips using `siFormat` with 'G' replaced by 'B'.

Loading thumbnail…

Activity6_question4

This bubble chart visualizes the relationship between cost of living, rent price, and population across 20 expensive global cities, with bubble size representing residents and color denoting region. It uses D3 v6 to create an SVG visualization, employing d3.scaleLinear for the x and y axes, d3.scaleSqrt for bubble radii, and d3.scaleOrdinal with the Tableau10 scheme for regional coloring. Interactive tooltips appear on mouseover, revealing city details. The chart includes dual legends for both bubble size and regional color coding, rendered from a CSV data file.

Loading thumbnail…

Activity6-Task4

This bubble chart visualizes the relationship between average horsepower, torque, and highway MPG for 31 car makes, with each bubble positioned along x- and y-axes and sized by fuel efficiency. Built with D3 v7, it uses `d3.scaleLinear` for axes and bubble radius, a color scale based on `d3.interpolateTurbo`, and a legend for MPG values and car make. Hovering over a circle triggers a custom tooltip, while the SVG output is rendered with axes, labels, and legend circles. Data comes from the bundled bubblechart.csv file.

Loading thumbnail…

Activity6_Question 3

This scatter plot visualizes the relationship between horsepower and miles per gallon for cars, with points colored by the car's origin (USA, Japan, or Europe) and a categorical color legend. The visualization is built using D3 v6, employing a custom scatter plot module with `scaleLinear` functions for both axes and an ordinal color scale from `d3.schemeCategory10`. The chart dimensions are fixed at 1000 by 600 pixels, rendering as SVG, with data loaded from a CSV file containing 80 car records. A color legend component displays the origin categories with corresponding colored circles.

Loading thumbnail…

Activity6-Task 3.2

This scatter plot visualizes the Iris dataset, showing petal length against sepal length, with each point’s shape encoding the flower species (setosa, versicolor, virginica). The plot uses D3’s `scaleLinear` for axes and `scaleOrdinal` with `symbolCircle`, `symbolCross`, and `symbolDiamond` to differentiate species. A custom `shapeLegend` displays these symbols, while the axes are labeled via `axisBottom` and `axisLeft`. Data is loaded from a remote CSV.

Loading thumbnail…

Activity6_Task 3

This scatter plot visualizes the Iris dataset, showing the relationship between petal length (x-axis) and petal width (y-axis). Each point represents a flower sample, with color encoding indicating the iris species (setosa, versicolor, or virginica). The visualization uses D3 v6, loading CSV data directly from a GitHub repository, and employs `scaleLinear` for axes and `axisLeft`/`axisBottom` for tick marks. Circles are rendered as SVG elements, with a legend implied by the color mapping.

Loading thumbnail…

Activity6-Question 2

This stacked horizontal bar chart shows smartphone market share distribution across Samsung, Apple, Xiaomi, Oppo, and Others from 2019 to 2023. Each bar represents a company’s total market share across all years, colored by year using d3.scaleOrdinal. The visualization uses d3.stack() to layer year segments, d3.scaleBand for the categorical y-axis, and d3.scaleLinear for the percentage x-axis. Interactive hover effects trigger opacity changes and display tooltips showing year-specific market share values formatted with d3.format. Data comes from a CSV file loaded via d3.csv.

Loading thumbnail…

Activity 6 - Task2

A stacked bar chart visualizes the distribution of IMDb ratings across six movie genres, with each bar divided into five rating brackets from "below 5.0" to "above 8.5." The chart uses a horizontal layout where genre categories appear on the y-axis and percentage values on the x-axis, colored segments representing each rating range. Built with D3 v7, the visualization employs d3.stack() for data transformation, d3.scaleBand() and d3.scaleLinear() for positioning, and d3.axisBottom() for the percentage scale. Interactive tooltips display exact percentages on mouseover, using data from the provided CSV file rendered as SVG elements.

Loading thumbnail…

Activity6_Question 1.2

This visualization displays the top 20 countries by population in 2010 using a horizontal bar chart. The chart ranks countries from largest to smallest population, with bars extending from a shared left axis and labeled with population values in billions. The implementation uses React with D3 v5’s scaleBand and scaleLinear for positioning, and renders rectangular marks in SVG. Data comes from a CSV file loaded via d3.csv, and hover interactions change bar colors while native SVG titles provide tooltips.

Loading thumbnail…

Activity6_Task 1

This bar chart displays the top 30 countries by population in 2020, using horizontal bars sorted by country name. The visualization uses React components to render SVG elements, with D3 v5 scales (scaleBand for the y-axis and scaleLinear for the x-axis) managing coordinate mapping. Population values are loaded from a CSV file and formatted with a custom tooltip using D3's format function. The chart includes styled axes, hover effects, and a maximum domain slightly exceeding the largest population value.

Loading thumbnail…

Fork of Activity6_Q2

This chart displays the top 20 countries by population in 2010, using a horizontal bar chart rendered as an SVG. Countries are sorted in descending order along the y-axis, with bar lengths proportional to population on a linear scale and formatted numerical labels shown at each bar's end. The visualization is built with D3 v7, using `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the categorical y-axis, along with `d3.axisLeft` and `d3.axisBottom` for axes. Data is loaded from a remote CSV file, filtered to the 2010 column, and styled with light green bars that darken on hover.

Loading thumbnail…

Activity6_Q1

A horizontal bar chart displays the top 20 countries by population in 2010, using green bars with value labels and a formatted axis. The chart loads CSV data from a GitHub repository via `d3.csv`, sorts and slices the dataset, then builds SVG rectangles and text elements with `d3.scaleLinear`, `d3.scaleBand`, and `d3.axisLeft`/`d3.axisBottom` in d3.v7. Hover effects change bar color, while the x-axis uses `d3.format('.2s')` for compact population notation.

Loading thumbnail…

Activity_6

This example displays a simple message, “Hello VizHub!” centered on the page. The visualization uses D3.js v6’s `select` function to target a `div` with the id `message` and set its text content. The text is sourced from an ES6 module, `myMessage.js`, which exports the string. Styling is applied via a linked `styles.css` file, controlling the font size and alignment. The code demonstrates a minimal D3 setup without any data loading or complex rendering.