N

navyabade05@gmail.com

@navyabade05·23 public vizzes

Loading thumbnail…

Activity7_Question2_5

This area chart visualizes the cumulative number of confirmed COVID-19 cases in the United States over time, using a dataset from a GitHub-hosted CSV file. The visualization filters the raw data for the US, groups it by date, and sums the confirmed cases using d3.rollup. An orange area path is generated with d3.area(), while d3.scaleTime and d3.scaleLinear map dates and case counts to SVG coordinates. The chart includes labeled axes, a bold title, and is built entirely with D3.js v7, rendering to SVG via the select and append methods.

Loading thumbnail…

Fork of Activity7_Question2_5

This area chart displays COVID-19 confirmed cases in the US over time, sourced from a combined time-series CSV dataset. The visualization uses D3 v7's `d3.csv` loader, `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.area` to generate the filled path. Axes are rendered with `d3.axisBottom` and `d3.axisLeft`, while data is aggregated by date via `d3.rollup`. The chart includes labeled axes and a title, with styling applied through CSS.

Loading thumbnail…

Activity7_Question1_1

This example shows a pie chart of programming language usage share percentages, with each category colored via a categorical color scale and labeled with its language name and percentage value. The visualization loads data from a CSV file using `d3.csv`, processes it with `d3.pie` and `d3.arc`, and renders the chart and a legend to SVG. Labels are placed outward from the arc centroids using `arcGenerator.centroid`, and the chart uses `d3.schemeCategory10` for distinct colors. The legend lists each language with its corresponding color and usage share, while the pie slices are semi-transparent with white stroke edges.

Loading thumbnail…

Acitivity 7_tutorial

This animated scatter plot visualizes the Iris dataset, cycling through different feature combinations on the x-axis while displaying sepal length on the y-axis. Points are colored by species—skyblue for setosa, lightgreen for versicolor, and orange for virginica—with legend labels identifying each group. The visualization is built using D3.js scaleLinear, axisLeft, axisBottom, extent, and csv loading, with a reusable scatterPlot function that updates axes and circles via setInterval. It renders as an SVG with custom styling and animated transitions between four variable pairs.

Loading thumbnail…

Activity6_Task4_Q4(9)

This bubble chart visualizes airline performance by plotting total passengers on the x-axis, fleet size on the y-axis, and using bubble radius to encode on-time performance percentage. The chart uses a categorical color scale to distinguish airlines, with an SVG legend positioned to the right. Interactive tooltips appear on hover using a custom HTML overlay that follows the mouse. Built with D3 v7, the visualization reads CSV data and configures axes, scales, and event handlers through the D3 API.

Loading thumbnail…

Activity6_Task4_Tutorial

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes. Each circle’s position encodes horsepower (x-axis) and torque (y-axis), while its size and color represent highway MPG and make, respectively. Hovering reveals a tooltip with the make name. The visualization uses d3.csv to load data, d3.scaleLinear for axes and bubble size, d3.scaleOrdinal with d3.interpolateTurbo for coloring, and includes a size legend and interactive mouse events for tooltips.

Loading thumbnail…

Fork of Activity6_Task3_Q3(6)

This visualization displays a scatter plot of penguin measurements from the Palmer Archipelago dataset, plotting bill depth against bill length on linear scales. Different species are distinguished using distinct marker shapes—circles, squares, and diamonds—via D3’s `scaleOrdinal` and `symbol` APIs, with a custom legend built through `shapeLegend`. The implementation leverages D3 v7’s `scaleLinear`, `extent`, `csvParse`, and the `join` selection API to bind data and render marks, while axes are generated using `axisLeft` and `axisBottom`.

Loading thumbnail…

Activity6_Task3_Q3(6)

This visualization shows the relationship between bill depth and bill length in the Palmer Penguins dataset, with each point shaped according to penguin species. The scatter plot uses D3.js v7 with modular components for axes, legends, and symbol generation, assigning circles, squares, and diamonds to distinguish species. Data is loaded asynchronously via `fetch` and parsed with `csvParse`, then mapped through `scaleLinear` and `scaleOrdinal` scales. A custom shape legend displays the species mapping alongside the plot.

Loading thumbnail…

Fork of Activity6_Task3_Tutorial 3.1

This example visualizes the Iris dataset as a scatter plot, mapping petal length and width on the axes while coloring each circle by species. It uses D3 v6 APIs including `csv`, `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `select` to load data, scale coordinates, and render SVG marks. The circles also store sepal measurements in `rx` and `ry` attributes, though these do not affect the visual radius. Data is fetched from a GitHub raw CSV URL, and the full-page SVG adapts to the browser window size.

Loading thumbnail…

Fork of Activity6_Task3_Tutorial 3.1

This example visualizes the Iris dataset as a scatter plot, mapping petal length and width on the axes while coloring each circle by species. It uses D3 v6 APIs including `csv`, `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `select` to load data, scale coordinates, and render SVG marks. The circles also store sepal measurements in `rx` and `ry` attributes, though these do not affect the visual radius. Data is fetched from a GitHub raw CSV URL, and the full-page SVG adapts to the browser window size.

Loading thumbnail…

Fork of Activity6_Task3_Tutorial 3.2

This interactive scatter plot visualizes the Iris dataset, mapping sepal length against petal length and using distinct symbols to represent the three iris species. The D3.js v7 code builds the visualization entirely with modular functions, including `scaleLinear` and `scaleOrdinal` for scales, `symbol` for generating shapes, and `csvParse` to load the data from a GitHub-hosted CSV file. Axis and shape legend components are rendered via `axisLeft`, `axisBottom`, and custom legend logic, with the chart redrawing responsively to the full window size.

Loading thumbnail…

Activity6_Task3_Tutorial 3.2

This scatter plot visualizes the Iris dataset, showing sepal length against petal length for three flower species distinguished by different filled symbols. The visualization uses an ordinal scale with D3’s `symbolsFill` to assign shapes to species and includes a custom legend via `shapeLegend`. Axes are generated using `d3.axisLeft` and `d3.axisBottom`, with data loaded asynchronously from a GitHub CSV and parsed by `d3.csvParse`. The plot renders within a full-window SVG.

Loading thumbnail…

Activity6_Task3_Tutorial 3.1

This scatter plot uses the classic Iris dataset to visualize the relationship between petal and sepal measurements. It displays four metrics: petal length (x-axis), petal width (y-axis), with sepal length and width encoded as the horizontal (rx) and vertical (ry) radii of each circular mark. Species are distinguished by color, showing clusters for setosa, versicolor, and virginica. The visualization loads data via a remote CSV URL, uses `d3.scaleLinear` for axis scaling, and renders with `d3.axisLeft` and `d3.axisBottom`. Circles are drawn using D3's `.join('circle')` selection.

Loading thumbnail…

Activity6_Task2 - Q2 (3)

This stacked bar chart shows chocolate sales (in units) across five regions for six chocolate types, with sales values accessible via interactive tooltips on mouseover. It uses D3.js v7 with SVG rendering, loading data from a CSV file. The chart employs `d3.stack` for stacking, `d3.scaleOrdinal` for color assignment, and `d3.axisBottom`/`d3.axisLeft` for axes. A manually drawn legend and CSS-styled tooltips enhance interactivity, while region colors follow `d3.schemeSet2`.

Loading thumbnail…

Activity6_Task 2

This visualization uses stacked horizontal bars to show how IMDb movie ratings are distributed across six genres, with each bar segment representing the percentage of films in a rating band. The chart is built with D3.js v7, using `d3.stack()` to compute the cumulative bar segments, `d3.scaleOrdinal()` for color coding, and `d3.axisBottom()` for the percentage scale. An interactive tooltip displays the precise percentage for each genre and rating category on hover, using `d3.format('.2f')` for numeric output. The data comes from a comma-separated file listing genre and five rating brackets.

Loading thumbnail…

Activity 6_ Task 1 - Q1

This bar chart displays the population of the top 10 countries in the year 2000, using light green rectangles against a labeled x- and y-axis. The visualization is rendered with D3 v7 in an SVG, where a linear scale (d3.scaleLinear) maps population counts and a band scale (d3.scaleBand) positions each country. Data is loaded from a CSV file via d3.csv, sorted by population, and filtered to the ten most populous nations. The axes are generated using d3.axisBottom and d3.axisLeft, with the x-axis formatting values in billions.

Loading thumbnail…

Activity 6_ Task 1 - Q2

This bar chart displays the populations of 20 countries for the year 2010, sourced from a CSV file. The visualization uses an SVG canvas with a linear scale for population and a band scale for country names. The code employs d3.v7 APIs such as `d3.axisBottom`, `d3.axisLeft`, `d3.scaleLinear`, and `d3.scaleBand`, along with custom modules like `Marks.js` for drawing light green bars. The x-axis is labeled "POPULATION-2010", and the chart includes a title.

Loading thumbnail…

Activity6_Task 2 Tutorial

A stacked bar chart built with D3 v7 shows the percentage distribution of IMDb rating levels across six movie genres, demonstrating how genre influences ratings. Each horizontal bar represents a genre, segmented into five rating categories from below 5.0 to above 8.5. Hovering over any segment displays a tooltip with the exact percentage. The visualization uses `d3.stack()`, `d3.scaleOrdinal()`, and `d3.scaleBand()`, rendering bars as SVG rectangles with axes and labels, sourced from an embedded CSV dataset.

Loading thumbnail…

Activity 6_Taskl 1

A horizontal bar chart displays the top 30 countries by population in 2020, using light green bars ordered alphabetically by country name. The visualization employs D3.js v7 with SVG rendering, using `d3.scaleLinear` and `d3.scaleBand` for positioning, along with `d3.axisBottom` and `d3.axisLeft` for axes. Population values are formatted as billions on the x-axis, while the data originates from a CSV file hosted on GitHub, fetched asynchronously via `d3.csv`.

Loading thumbnail…

Fork of Activity 6_Task 1

This bar chart displays the 2020 population for the top 30 countries, sorted along a horizontal axis with population values and a vertical axis listing country names. The visualization uses D3 v7 to load CSV data, create a linear x-scale and band y-scale, and render light-green SVG rectangles. Axis components are built with `d3.axisBottom` and `d3.axisLeft`, with tick formatting that converts values to a concise billion/million notation (e.g., "1.2B"). The chart is generated entirely in SVG, with margins and scaling calculated in JavaScript.

Loading thumbnail…

Fork of Activity 6_Task 1

This bar chart displays the 2020 population estimates for the top 30 countries, using a horizontal layout with country names on the y-axis and population values on the x-axis. The visualization is built with React and D3 v5, leveraging `scaleBand` and `scaleLinear` for scales, with SVG rectangles as marks. Data is loaded from a remote CSV file via `d3.csv`, and the x-axis labels are formatted using `d3.format` to abbreviate large numbers, converting gigabytes notation to billions for readability.

Loading thumbnail…

Fork of Fork of Hello VizHub

This example renders a centered “Hello VizHub!” message using D3 version 6. The index.js script imports the `select` function from D3 and sets the text content of the `#message` div to a string imported from a separate ES6 module, `myMessage.js`. The message is styled with large, centered font via the `styles.css` file, demonstrating a minimal setup of D3 for DOM manipulation alongside modular JavaScript.

Loading thumbnail…

Fork of Hello VizHub

This fork of Hello VizHub displays a centered greeting, “Hello VizHub!”, as large text on a plain white background. The example demonstrates a minimal D3.js v6 setup by using the `select` API to target the `#message` div and update its text content with a string imported from a local ES6 module. The page structure is defined in `index.html` with linked CSS, and the visualization relies on a bundled JavaScript file to execute the simple rendering logic.