vidyagangasani@my.unt.edu

@VidyaGangasani·19 public vizzes

Activity7.1_Question2

This area chart displays the monthly average temperature in degrees Celsius for a single year, revealing a seasonal pattern with a peak in July and lower temperatures in winter. Built with D3 v6, the visualization encodes temperature values on a linear y-axis and months on a point scale. The chart is rendered as an SVG path using the `d3.area` generator, with axes added via `d3.axisBottom` and `d3.axisLeft`. The data is loaded from a remote CSV file containing two columns: month and temperature.

Apr 10, 2025

Loading thumbnail…

Activity7.1_Question1

This visualization shows fruit sales data as a pie chart with a legend and axis labels, comparing sales across five fruit types. It loads data from a CSV file via `d3.csv`, then uses `d3.pie()` and `d3.arc()` to generate SVG paths for each slice. A `d3.scaleOrdinal` with `d3.schemeCategory10` colors the arcs, and the chart is rendered as an SVG in a 600x400 viewport. The markup is created with D3 v7 selections and appends.

Apr 10, 2025

Loading thumbnail…

Activity7.1_Tutorial

This animated scatter plot explores the Iris dataset, cycling through four different feature combinations on the x-axis to reveal relationships between sepal and petal measurements. Built with D3.js (version 6.7), the visualization uses an SVG canvas and a reusable `scatterPlot` function that handles axis scaling and circle placement. The code applies color coding by species (skyblue, lightgreen, orange) and includes a legend, axis labels, and a title. A `setInterval` timer sequentially updates the x-axis mapping to petal_width, sepal_width, petal_length, or sepal_length, while the y-axis remains fixed on sepal_length, demonstrating dynamic data exploration.

Apr 10, 2025

Loading thumbnail…

Activity6_q1.2

This bar chart showing population by country for the year 2010. The top of the chart lists the countries on the y-axis, while the x-axis shows the population value in millions. The bars are rendered with a steel blue fill color. The chart is built using D3.js v7, which uses data from the `data.csv` file. The code uses `d3.scaleLinear` and `d3.scaleBand` to map quantitative and categorical data, `d3.axisLeft` and `d3.axisBottom` to create the axes, and `d3.format` to add abbreviated tick labels.

Apr 6, 2025

Loading thumbnail…

Activity6_q1

This horizontal bar chart displays the population of ten countries in the year 2000, sorted along a linear scale. Built with D3 v7, it uses `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the categorical y-axis, and an SVG `<rect>` for each bar. Axes are rendered with `d3.axisLeft` and `d3.axisBottom`, with data loaded from a local CSV via `d3.csv`.

Apr 6, 2025

Loading thumbnail…

Activity6_q2

A stacked bar chart displays student enrollment across five engineering departments, with each bar segmented into Undergraduate, Postgraduate, and PhD counts. The visualization uses d3.csv to load the dataset, d3.stack() to compute stacked series, and d3.scaleBand/d3.scaleLinear for axes. Color encoding distinguishes academic levels via d3.scaleOrdinal, while SVG rectangles render the bars. The chart includes labeled axes for Department and Number of Students.

Apr 6, 2025

Loading thumbnail…

Activity6_q4

This bubble chart visualizes the relationship between GDP (x-axis) and population (y-axis) for six countries, with circle area encoding land area and color distinguishing each country. Built with D3.js v7, it uses `d3.scaleLinear` for the axes, `d3.scaleSqrt` for bubble sizing, and `d3.scaleOrdinal` with the Tableau10 scheme for colors. Tooltips generated via SVG `<title>` elements display each country’s exact values. The data is loaded from a local CSV file using `d3.csv`.

Apr 6, 2025

Loading thumbnail…

Activity6_q4

This example renders a static, centered message on a blank page using D3.js. The visualization selects the HTML element with the ID “message” via `d3.select` and sets its text content to the string “Hello VizHub!”, styled by external CSS. The layout is determined by the accompanying stylesheet, which applies large font sizing and text alignment. The code imports from D3’s API and a local ES6 module for the message string, demonstrating a minimal interaction between D3 and DOM manipulation.

Apr 6, 2025

Loading thumbnail…

Activity6_q3

This scatterplot shows the relationship between GDP per capita and life expectancy for seven countries, with each circle colored by country. The visualization uses D3.js v7 to load a local CSV file, scale the data linearly on both axes, and render circles as SVG elements. Axes are drawn using d3.axisBottom and d3.axisLeft, with labels for both variables. The d3.scaleOrdinal with schemeCategory10 assigns distinct colors to each nation, making it easy to compare economic output against health outcomes across the sample.

Apr 6, 2025

Loading thumbnail…

Fork of Activity 6

This bar chart displays 2020 population estimates for 30 countries, sorted along a horizontal axis with country names on the vertical axis. Population values are formatted using the `format('.2s')` specifier, converting billions into abbreviated labels like “B”. The React-based visualization uses `scaleBand` and `scaleLinear` from d3.v5 to map data, with SVG rectangles generated by custom `Marks`, `AxisBottom`, and `AxisLeft` components. Data loads via `d3.csv` from a GitHub-hosted CSV file, and hover effects change bar colors through CSS transitions.

Apr 6, 2025

Loading thumbnail…

Activity6_task4

This interactive bubble chart visualizes the relationship between happiness scores, GDP per capita, and life expectancy across 30 countries, with bubble size encoding life expectancy and color distinguishing seven global regions. The visualization uses d3.v7 to implement SVG rendering, including scaleOrdinal for regional color mapping, scaleSqrt for bubble sizing, and scaleLinear axes for GDP and happiness dimensions. A tooltip reveals detailed country metrics—including social support, freedom, generosity, and corruption—on hover. The chart reads from a static CSV dataset and employs transition methods to animate tooltip opacity and bubble styling during mouse interactions.

Apr 6, 2025

Loading thumbnail…

Activity6_task3.2

This scatter plot visualizes the Iris dataset, mapping sepal length on the x-axis and petal length on the y-axis, with categorical species encoded through different point shapes. The visualization uses D3.js v7 to render the plot, with axes generated via `axisLeft` and `axisBottom` from the `d3` module. A custom shape legend explains the species-to-symbol mapping, built using `d3.symbol()` and `d3.symbolsFill`. Data is fetched as CSV and parsed with `d3.csvParse`, with numeric columns converted for scaling. The implementation demonstrates modular D3 components for reusable chart construction, including separate `axes.js` and `shapeLegend.js` modules composed within the main `scatterPlot.js` layout.

Apr 6, 2025

Loading thumbnail…

Activity6_task3

This scatter plot visualizes the relationship between horsepower and fuel efficiency (MPG) for 49 car models, with each point colored by the car's region of origin—American, European, or Japanese. The visualization uses D3.js v7 to load data from a CSV file and render SVG circles, with an interactive tooltip that appears on hover to display detailed specifications. The chart employs d3.scaleLinear for both axes, d3.scaleOrdinal for coloring, and d3.axisBottom and d3.axisLeft for the labeled axes. Hovering triggers animated transitions that enlarge the selected point and show a formatted HTML tooltip.

Apr 6, 2025

Loading thumbnail…

Activity6_task3

This example renders a large, centered greeting that reads "Hello VizHub!" using D3.js. The visualization is minimal, applying D3’s `select` API to target the `#message` div and set its text content, while CSS controls the visual styling with a 12em font size and center alignment. The page is generated through an HTML file that loads D3 v6 from a CDN and links to a separate stylesheet, demonstrating a straightforward integration of D3 for DOM manipulation rather than complex graphical rendering. The source module `myMessage.js` exports the greeting string, which is then imported and displayed.

Apr 6, 2025

Loading thumbnail…

Fork of Activity6_Task2

This example displays the distribution of IMDb ratings across six movie genres as a horizontal stacked bar chart. Each bar represents a genre, with color-coded segments showing the percentage of titles falling into five rating ranges from "below 5.0" to "above 8.5". The chart uses d3.csv to load the data, d3.stack for stacking, and d3.scaleOrdinal with a predefined color array. Interactive tooltips appear on mouseover, displaying the exact percentage for each segment. A legend and custom axis labels are rendered via D3’s SVG selection API.

Apr 6, 2025

Loading thumbnail…

Activity6_Task2

A stacked bar chart displays the percentage distribution of five IMDb rating categories across six movie genres, showing how genre influences ratings. The chart uses SVG rendering with D3.js v7, employing `d3.scaleOrdinal` for colors, `d3.scaleLinear` for the x-axis percentage scale, and `d3.scaleBand` for the categorical y-axis. Hovering over bars triggers tooltips showing exact percentages, computed from the provided CSV data.

Apr 6, 2025

Loading thumbnail…

Fork of Activity 6

This example shows a horizontal bar chart of 2020 population estimates for 30 countries, using a React-based SVG rendering approach. The visualization ranks countries by population, with bars colored green and labeled axes showing country names and population values in billions. The code uses React components for layout, d3.js scaleBand and scaleLinear for positioning, and d3.csv to load the dataset from a GitHub-hosted CSV file. Tooltips provide formatted population values on hover, while the chart includes custom axis components and a Poppins font styling from Google Fonts.

Apr 6, 2025

Loading thumbnail…

Activity 6

This bar chart displays the population of 30 countries in 2020, using a horizontal layout with country names on the y-axis and population values on the x-axis. The visualization uses D3 v5’s `scaleBand` and `scaleLinear` to position bars, while React components render the SVG elements. Data is loaded from a CSV file via `d3.csv` and formatted with `d3.format` to abbreviate large numbers, for example converting Gigas to Billions. Each bar includes a native SVG `<title>` tooltip showing the formatted population value.

Apr 6, 2025

Loading thumbnail…

Fork of Hello VizHub

This fork of Hello VizHub displays a single centered text message, “Hello VizHub!”, rendered at a large font size using CSS styling. The page structure is defined in an HTML file with a dedicated message container, while D3.js version 6 is loaded via a CDN. The JavaScript imports the `select` function from D3 and the `message` string from a local ES6 module, then uses `select('#message').text()` to set the displayed text. The example demonstrates basic D3 DOM selection, ES6 module imports, and external stylesheet integration.

Apr 6, 2025