sravani1969@gmail.com

act7_question2

This area chart visualizes monthly website visitor counts using a steel-blue filled area beneath a line. The chart employs an SVG rendering approach with D3.js v7, using `d3.area()` to generate the path and `d3.scalePoint()` for the categorical month axis. Data is loaded remotely from a CSV file via `d3.csv()`. The visualization includes labeled axes for month and visitor numbers, with margins defining the plotting area.

act7_question2

This area chart visualizes monthly website visitor counts using a steel-blue filled area beneath a line. The chart employs an SVG rendering approach with D3.js v7, using `d3.area()` to generate the path and `d3.scalePoint()` for the categorical month axis. Data is loaded remotely from a CSV file via `d3.csv()`. The visualization includes labeled axes for month and visitor numbers, with margins defining the plotting area.

act7_question1

This pie chart visualizes fruit sales counts using a D3.js SVG renderer. The code loads CSV data from a GitHub repository, converts values to numbers, and applies the d3.pie and d3.arc layouts to generate the slices. Each segment is colored with d3.scaleOrdinal and d3.schemeCategory10, with white labels positioned at arc centroids. A legend on the right lists each fruit with its corresponding value, while the chart uses d3.csv to fetch the external dataset and d3.select to manage SVG elements.

activity7.1_question1

This D3 pie chart visualizes country-wise counts from a remote CSV file, displaying data as color-coded slices with white outlines. Each slice is labeled with its corresponding country name, positioned via the arc centroid. A legend on the right shows each country’s color, name, and numeric value. The chart uses `d3.pie()` and `d3.arc()` for geometry, `d3.scaleOrdinal` with `d3.schemeCategory10` for colors, and renders as SVG with an HTML overlay for styling.

activity7.1_question1

This D3 pie chart visualizes country-wise counts from a remote CSV file, displaying data as color-coded slices with white outlines. Each slice is labeled with its corresponding country name, positioned via the arc centroid. A legend on the right shows each country’s color, name, and numeric value. The chart uses `d3.pie()` and `d3.arc()` for geometry, `d3.scaleOrdinal` with `d3.schemeCategory10` for colors, and renders as SVG with an HTML overlay for styling.

activity7.1_tutorial

This animated scatterplot cycles through different Iris flower measurements—petal width, sepal width, petal length, and sepal length—on the x-axis while plotting sepal length on the y-axis. Using D3.js v6, it loads the Iris dataset via `d3.csv`, renders circles colored by species, and updates axes through a `setInterval` loop. The code builds a reusable scatter plot component with `d3.scaleLinear`, `axisBottom`, and `axisLeft`, and includes a custom legend, title, and axis labels, all rendered as SVG with CSS styling.

activity7

This animated scatter plot visualizes the iris dataset, cycling through different flower measurements (petal width, sepal width, petal length, sepal length) on the x-axis while keeping sepal length on the y-axis. Colored circles represent species categories (setosa, versicolor, virginica) with a static legend. The visualization uses D3.js’s `scaleLinear`, `axisLeft`, and `axisBottom` APIs to construct a reusable scatter plot, with a `setInterval` driving the animation. Data is loaded from a remote CSV file, rendered as SVG, and styled with custom labels and a title.

act6_question4

This bubble chart displays the relationship between engine size, vehicle weight, and fuel efficiency for a range of car models. Each circle's horizontal position represents engine size in liters, its vertical position indicates weight in kilograms, and its size and color encode fuel efficiency in miles per gallon, with a color gradient using `d3.interpolateTurbo`. The visualization uses D3 v7 to render the SVG, with axes scaled by `d3.scaleLinear` and interactive tooltips that appear on mouseover. A legend shows the mapping between bubble radius and efficiency values, while the model names are color-coded along the side.

act6_question4

This bubble chart displays the relationship between engine size, vehicle weight, and fuel efficiency for a range of car models. Each circle's horizontal position represents engine size in liters, its vertical position indicates weight in kilograms, and its size and color encode fuel efficiency in miles per gallon, with a color gradient using `d3.interpolateTurbo`. The visualization uses D3 v7 to render the SVG, with axes scaled by `d3.scaleLinear` and interactive tooltips that appear on mouseover. A legend shows the mapping between bubble radius and efficiency values, while the model names are color-coded along the side.

act6_task4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes. Each circle’s position reflects horsepower and torque, while its size encodes highway MPG and its color distinguishes the car make. Built with D3.js v7, the chart uses d3.scaleLinear, d3.scaleOrdinal, and d3.axisBottom/Left, with SVG rendering. Hovering reveals a tooltip, and a legend displays MPG size values and make colors. Data comes from the bundled bubblechart.csv.

act6_task4

This interactive bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across multiple car makes. Each circle represents a car model, with its x-position mapped to horsepower, y-position to torque, and bubble size scaled by highway MPG via d3.scaleLinear. The SVG rendering uses d3.axisBottom and d3.axisLeft for axes, while d3.scaleOrdinal assigns colors from d3.interpolateTurbo by make. Mouseover events trigger tooltips, and fixed legend circles indicate MPG size values. Data loads from an external CSV file.

act6_task4

This bubble chart shows the correlation between average horsepower, torque, and highway MPG across different car makes. Each circle’s position encodes horsepower on the x-axis and torque on the y-axis, while its radius and color represent highway MPG and car make, respectively. The visualization uses D3.js v7 with SVG rendering and includes interactive tooltips on mouseover, plus legends for both bubble size and categorical colors. Data is loaded from a CSV file, and the implementation uses `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.interpolateTurbo`, and `d3.axisBottom`/`d3.axisLeft` for scales and axes.

Fork of Bubble chart

This bubble chart visualizes the relationship between average horsepower (x-axis), torque (y-axis), and highway MPG (bubble size and legend) for various car makes. Built with D3 v7, it renders an SVG with animated transitions, using a turbo color scale to differentiate car brands. Interactive tooltips display the make of each vehicle on mouseover, while a legend shows both MPG value scaling and color-coded brand categories, with data loaded from a CSV file.

act6_question3

This scatterplot shows the relationship between horsepower and highway MPG for 30 car makes, with each car brand represented by a distinct symbol and color from d3.symbols and d3.schemeCategory10. The visualization uses d3.csv to load data.csv and d3.scaleLinear for both axes, rendering SVG paths positioned via the symbolGenerator. A legend lists all makes, while axis labels clarify the variables. The chart highlights the general trend of lower fuel efficiency as horsepower increases across luxury and performance brands.

act6_question3

This scatterplot shows the relationship between horsepower and highway MPG for 30 car makes, with each car brand represented by a distinct symbol and color from d3.symbols and d3.schemeCategory10. The visualization uses d3.csv to load data.csv and d3.scaleLinear for both axes, rendering SVG paths positioned via the symbolGenerator. A legend lists all makes, while axis labels clarify the variables. The chart highlights the general trend of lower fuel efficiency as horsepower increases across luxury and performance brands.

act6_question3

This scatterplot visualizes the relationship between average horsepower and highway MPG for 31 car makes, with each make represented by a distinct colored symbol. The chart, built with D3 v6 in an SVG framework, uses `d3.scaleLinear` for both axes and `d3.scaleOrdinal` with `d3.schemeCategory10` for color encoding. Each data point is rendered as a `path` using `d3.symbol`, with positions mapped from parsed CSV values. The visualization includes labeled axes, a legend listing all makes, and clearly shows the overall trend of decreasing fuel efficiency as horsepower increases.

act6_question3.1

This scatterplot displays the relationship between horsepower and highway fuel efficiency for 31 car makes, with each point positioned by its horsepower (x-axis) and highway MPG (y-axis). The plot uses blue symbols generated by `d3.symbol()`, varying the symbol type per data row via `d3.scaleOrdinal(d3.symbols)`, though the legend is not shown. Axes are rendered with `d3.axisBottom` and `d3.axisLeft`, and the data is loaded from `data.csv` using `d3.csv`.

act6_task3.2

This visualization shows the classic Iris dataset as a scatter plot, mapping sepal length on the x-axis against petal length on the y-axis. Points are rendered as distinct D3 symbols using `d3.symbol` and `symbolsFill`, with each of the three iris species (setosa, versicolor, virginica) represented by a different shape. A custom shape legend explains the species mapping. The code uses D3 v7 APIs including `csvParse`, `scaleLinear`, `scaleOrdinal`, and `axisLeft`/`axisBottom` from the `axes.js` module to construct the interactive chart.

act6_task3.2

This visualization shows the classic Iris dataset as a scatter plot, mapping sepal length on the x-axis against petal length on the y-axis. Points are rendered as distinct D3 symbols using `d3.symbol` and `symbolsFill`, with each of the three iris species (setosa, versicolor, virginica) represented by a different shape. A custom shape legend explains the species mapping. The code uses D3 v7 APIs including `csvParse`, `scaleLinear`, `scaleOrdinal`, and `axisLeft`/`axisBottom` from the `axes.js` module to construct the interactive chart.

activity6_task3.1

This scatter plot visualizes the Iris dataset, showing petal length on the x-axis and petal width on the y-axis, with points colored by species (skyblue for setosa, lightgreen for versicolor, orange for virginica). It uses D3 v6 to load CSV data via `d3.csv`, scales with `d3.scaleLinear`, and renders SVG circles. Axes are drawn with `d3.axisLeft` and `d3.axisBottom`. The code also maps sepal measurements to circle radii but does not apply them visually, as points use a fixed radius of 5 pixels.

activity6_task3

This scatter plot visualizes the Iris dataset, mapping petal width against petal length for individual flowers. Each circle is colored by species—sky blue for setosa, light green for versicolor, and orange for virginica—using D3 v6’s `scaleLinear`, `axisLeft`, and `axisBottom` APIs. The SVG rendering also encodes sepal dimensions via circle `rx` and `ry` attributes, though the visual effect is subtle due to a constant radius. Data loads from a GitHub-hosted CSV via `d3.csv`.

Activity6_task3.1

This scatter plot visualizes the Iris dataset, mapping petal length and width for each flower specimen. The D3 v6 code loads CSV data from a GitHub gist and uses scaleLinear, axisLeft, and axisBottom to construct the chart. Circles are colored by species—setosa, versicolor, and virginica—using a custom marker function, with radius fixed at five pixels. The SVG rendering includes rotated axis labels for petal length and sepal length, though the sepal label is mislabeled in the code.

Activity6_task3

This visualization shows the classic Iris dataset, displaying the relationships between sepal and petal measurements for three species. Using D3.js, it renders a scatter plot where each point represents a flower, with sepal length on the x-axis, petal length on the y-axis, and points colored by species. The code uses `d3.forceSimulation` to optimize the layout of data points, ensuring they are spread evenly while preserving the integrity of the underlying measurements, offering an interactive view into the dataset's structure.

activity6_question2_11719493

A horizontal stacked bar chart visualizes total sales distribution across five product categories for five regions, using D3.js v7 with an SVG rendering approach. The chart reads data from sales_data.csv, with each bar segment colored by category via d3.scaleOrdinal. Axis formatting employs d3.axisLeft and d3.axisBottom, while two legends display category colors and region colors. The visualization clearly compares regional sales totals and category contributions, with Central region significantly lower than others.

activity6_question2_11719493

A horizontal stacked bar chart visualizes total sales distribution across five product categories for five regions, using D3.js v7 with an SVG rendering approach. The chart reads data from sales_data.csv, with each bar segment colored by category via d3.scaleOrdinal. Axis formatting employs d3.axisLeft and d3.axisBottom, while two legends display category colors and region colors. The visualization clearly compares regional sales totals and category contributions, with Central region significantly lower than others.

activity6_question2_11719493

This example visualizes the distribution of sales across five product categories (Electronics, Clothing, Furniture, Groceries, Pharmaceuticals) for five geographic regions. A horizontally stacked bar chart shows each region as a single bar, with segments colored according to category and scaled by total sales value. The chart is built with D3 v7, using SVG rendering and the `d3.stack()` API to compute cumulative values. Data is loaded from a CSV file, with axes, legend, and labels generated through D3’s scale and axis functions.

activity6_question2_11719493

This stacked bar chart displays sales volumes across five regions (North, South, East, West, Central) broken down into five product categories. The horizontal bars are segmented by category, with each region’s total sales represented on a linear scale. Using D3 v7, the code applies `d3.stack()` to aggregate category values, maps regions to a band scale for the y-axis, and retrieves data from `sales_data.csv`. Interactive tooltips appear on mouseover, and a legend is rendered via SVG rectangles and text elements.

ACTIVITY_6_TASK1

This bar chart displays the 2020 population estimates for the top 30 countries, using a horizontal layout where bar length encodes population values. The visualization is rendered as SVG with D3 v7, using `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the y-axis categories. Data is loaded from a CSV file via `d3.csv`, with the axis labels formatted to abbreviate large numbers (e.g., "1.2B"). The chart applies a light green fill to bars and includes labeled axes for population and country names.

activity6_task2_11719493

A stacked horizontal bar chart shows the distribution of IMDb movie ratings across six genres, with each bar divided into five rating buckets from below 5.0 to above 8.5, expressed as percentages. The visualization uses D3 v7 with an SVG rendering, employing `d3.stack()` to compute the stacked series, `d3.scaleBand` for the genre categories, and `d3.scaleLinear` for the percentage axis. Interactive tooltips, styled via CSS, display exact percentage values on mouseover, while the legend indicates rating categories and the title labels the chart as "Rating according to genres."

act6_task2_11719493

This stacked bar chart shows IMDb rating distributions across six movie genres, displaying the percentage of titles falling into five rating brackets from “below 5.0” to “above 8.5.” The chart uses D3 v7’s `d3.stack` and `d3.scaleOrdinal` with a custom color palette, rendering interactive SVG rectangles with `d3.axisBottom` and `d3.axisLeft`. Mouseover events trigger tooltips that display the exact percentage for each genre-rating segment, using data from the provided CSV file.

ACTIVITY_6_TASK1

This horizontal bar chart compares the 2020 populations of the top 30 countries, with each bar’s length proportional to population and the y-axis ordered by country name. Using D3 v7, the code applies a linear scale for the population axis and a band scale for countries, rendering the bars as SVG rectangles. Axis formatting converts large numbers to billions via `d3.format`, while data is fetched from a remote CSV file. The chart’s axes include clear labels for “Countries” and “POPULATION-2020”.

Fork of ACTIVITY_6_TASK1

This horizontal bar chart shows the 2020 population of the top 30 countries, with bars sorted by country name and scaled linearly by population. The visualization uses the D3 v7 library to render SVG elements, with `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the y-axis. Population values are formatted with `d3.format` to display in billions or millions, and the data is loaded asynchronously from a CSV file using `d3.csv`. Rectangles are appended to the chart with a light green fill, while axis labels are positioned using SVG transforms.

act6_Q.2_11719493

A horizontal bar chart ranks the top 20 countries by 2010 population, using light green bars sorted in descending order. The chart reads population values from a CSV file hosted on GitHub, formatting the x-axis with abbreviations (e.g., "B" for billions) via d3.format. The visualization is built with D3 v7, using d3.scaleLinear for the x-axis, d3.scaleBand for the y-axis, and d3.axisBottom/d3.axisLeft for axes, rendered as SVG. The view automatically updates on window resize.

act6_Q.2_11719493

This example shows a horizontal bar chart ranking the top 20 countries by population in 2010, with bars colored lightgreen and labeled axes for country names and population values. The visualization loads CSV data from a GitHub repository, processes it by sorting and trimming to the top 20 entries, and renders SVG rectangles scaled by d3.scaleLinear for the x-axis and d3.scaleBand for the y-axis. The chart uses d3.axisBottom and d3.axisLeft for ticks, with dynamic formatting converting values like billions to "B", and it redraws responsively on window resize.

act6_Q.2_11719493

A horizontal bar chart ranks the top 20 countries by 2010 population, using light green bars sorted in descending order. The chart reads population values from a CSV file hosted on GitHub, formatting the x-axis with abbreviations (e.g., "B" for billions) via d3.format. The visualization is built with D3 v7, using d3.scaleLinear for the x-axis, d3.scaleBand for the y-axis, and d3.axisBottom/d3.axisLeft for axes, rendered as SVG. The view automatically updates on window resize.

act6_Q1.1_11719493

This horizontal bar chart displays the top 10 most populous countries in the year 2000. The chart uses a linear x-axis for population values and a categorical y-axis for country names. Built with D3 v7 in an SVG framework, it loads data from a CSV file containing population statistics. The bars are rendered as light green rectangles, with axis components created using d3.axisBottom and d3.axisLeft. The x-axis labels format large numbers by abbreviating billions with the letter 'B'.

act6_Q.2_11719493

This example shows a horizontal bar chart ranking the top 20 countries by population in 2010, with light green bars sorted from largest to smallest along a linear population scale and a categorical country scale. The chart uses D3 v7’s `scaleLinear` and `scaleBand` to map data loaded via `d3.csv`, with axes rendered using `d3.axisBottom` and `d3.axisLeft`. Population values are formatted with `d3.format` to display billions, and the chart re-renders responsively on window resize.

ACTIVITY_6_TASK1_11719493

This horizontal bar chart displays the 2020 population of 30 countries, using lightgreen rectangles where bar length encodes population magnitude. The visualization employs D3.js v7 with modular components for the axes and marks, using a linear scale for population values and a band scale for country names. Data is loaded from a remote CSV file, and the bottom axis formats population values in billions. The chart includes clearly labeled axes for countries and population, with a left margin accommodating full country names.

act6_Q1.1_11719493

This visualization is a horizontal bar chart that displays the top 10 countries by population in the year 2000, sorted in descending order. The chart uses light green bars to represent population values, with a linear x-axis scaled to the maximum population and a banded y-axis for country names. The visualization is built with D3.js v7 and rendered as an SVG. It loads data from a remote CSV file using `d3.csv`, then processes it by mapping and sorting the records. The axes are created using `d3.axisBottom` and `d3.axisLeft`, with tick labels formatted using `d3.format`. The bars are drawn using SVG `rect` elements positioned according to the x and y scales.

act6_Q1.1_11719493

This horizontal bar chart displays the top 10 most populous countries in the year 2000. The chart uses a linear x-axis for population values and a categorical y-axis for country names. Built with D3 v7 in an SVG framework, it loads data from a CSV file containing population statistics. The bars are rendered as light green rectangles, with axis components created using d3.axisBottom and d3.axisLeft. The x-axis labels format large numbers by abbreviating billions with the letter 'B'.

Fork of Fork of act6_Q1.1_11719493

This visualization is a horizontal bar chart showing the population of the top 10 most populated countries in the year 2000. The bars are rendered as light green rectangles using SVG, with a linear scale for the population values on the x-axis and a band scale for the countries on the y-axis. The chart uses D3 v7, specifically `d3.axisBottom`, `d3.axisLeft`, `d3.scaleLinear`, and `d3.scaleBand`, to construct the axes and marks. Data is loaded from a remote CSV file via `d3.csv`, then processed and sorted before display.

ACTIVITY_6_TASK1

This horizontal bar chart compares the 2020 populations of the top 30 countries, with each bar’s length proportional to population and the y-axis ordered by country name. Using D3 v7, the code applies a linear scale for the population axis and a band scale for countries, rendering the bars as SVG rectangles. Axis formatting converts large numbers to billions via `d3.format`, while data is fetched from a remote CSV file. The chart’s axes include clear labels for “Countries” and “POPULATION-2020”.

Fork of act6_Q1.1_11719493

This bar chart displays the top 10 countries by population in the year 2000, sorted in descending order. It uses d3.csv to load the data, then d3.scaleBand for the categorical y-axis and d3.scaleLinear for the quantitative x-axis. The chart renders SVG rectangles with a light green fill via d3.selectAll and data joins. Axes are drawn using d3.axisBottom and d3.axisLeft, with a rotated y-axis label. The code is structured as separate ES modules for data loading, axes, and marks.

act6_Q1.1_11719493

This visualization shows a force-directed network graph depicting interconnected nodes, likely representing entities from a dataset. The layout is computed using d3.forceSimulation to position nodes based on simulated physical forces, while d3.geoPath renders the curved links between them. The graph is rendered with a dark background, and nodes are colored by cluster affiliation, making group structures visually apparent. The interaction allows users to hover over nodes to highlight their immediate connections, with the underlying data from the v3 source.

Fork of Fork of ACTIVITY_6_TASK1

This horizontal bar chart displays the population of the top 30 countries in 2020, with each country represented by a lightgreen bar scaled against a linear population axis. The visualization uses d3.v7 with SVG rendering, employing d3.scaleLinear for the x-axis and d3.scaleBand for the y-axis. The code loads CSV data from a GitHub repository, formats population values with d3.format to show abbreviations like "200B", and applies margins and axis labels for clarity. Both axes include custom tick formatting and rotated text labels.

Fork of ACTIVITY_6_TASK1

This horizontal bar chart shows the 2020 population of the top 30 countries, with bars sorted by country name and scaled linearly by population. The visualization uses the D3 v7 library to render SVG elements, with `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the y-axis. Population values are formatted with `d3.format` to display in billions or millions, and the data is loaded asynchronously from a CSV file using `d3.csv`. Rectangles are appended to the chart with a light green fill, while axis labels are positioned using SVG transforms.

ACTIVITY_6_TASK1

This bar chart displays the 2020 population estimates for the top 30 countries, using a horizontal layout where bar length encodes population values. The visualization is rendered as SVG with D3 v7, using `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the y-axis categories. Data is loaded from a CSV file via `d3.csv`, with the axis labels formatted to abbreviate large numbers (e.g., "1.2B"). The chart applies a light green fill to bars and includes labeled axes for population and country names.

Fork of ACTIVITY_6_TASK1

This visualization shows a horizontal bar chart of the 30 most populous countries in 2020, ranked in descending order, with each bar representing a country's population. The chart pulls data from a remote CSV file hosted on GitHub and loads it using `d3.csv`, then processes the values by converting the population field to a number. Rendered as SVG using D3 v7, the chart uses `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the categorical y-axis, with custom components for the axes and marks. The bars are drawn as `<rect>` elements with a light green fill.