hui249378@gmail.com

Activity 7 Q2

This visualization presents the distribution of penguin species in a dataset, breaking down the counts of each species in a simple pie chart. The chart uses D3 v7’s pie and arc generators to compute and draw the proportional slices, with colors assigned by scaleOrdinal and schemeCategory10. The code loads data from a CSV file, groups records by species to calculate counts, and renders the pie with white stroke separations and labels placed at each arc’s centroid. A manual legend and red axis annotations are added for context.

Apr 10, 2025

Activity 7

This pie chart visualizes the species distribution within the Palmer Penguins dataset. The chart displays proportional slices for each species, colored via a categorical scale, with labels and a legend for identification. Built with D3.js, the visualization uses `d3.pie` to compute arc segments and an SVG `path` generator to render them. Data is loaded asynchronously from a CSV hosted on GitHub, and counts are aggregated using `d3.group`. The rendering relies on SVG shapes and text elements.

Apr 10, 2025

activity_6 task2

This stacked bar chart shows the distribution of IMDb movie ratings across six genres, with each bar divided into five rating categories from below 5.0 to above 8.5. The visualization uses d3.stack to compute the stacked segments, d3.scaleBand for the categorical y-axis, and d3.scaleLinear for the percentage x-axis. Hovering over a segment reveals the exact percentage for that rating category via a tooltip. Colors are assigned using d3.scaleOrdinal with a five-color palette, and the chart is rendered as SVG with data from a CSV file.

activity_6 task4

This interactive bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for various car makes. Each bubble’s position maps to horsepower and torque axes, while its radius encodes highway MPG. The visualization uses d3.csv to load data, d3.scaleLinear for axis and size scaling, and d3.scaleOrdinal with d3.interpolateTurbo for color coding. Hovering triggers tooltip transitions, and legends for size and make are rendered with SVG circles and text.

activity_6 task3.2

This interactive D3.js v7 scatter plot visualizes the Iris dataset, showing sepal length against petal length for three flower species. Each species appears as a distinct geometric shape—circles, squares, and triangles—using D3’s `symbol` API with `scaleOrdinal` mapping. The visualization includes D3 axes, a shape legend, and loads the CSV data asynchronously via `fetch` and `csvParse`. The chart uses `scaleLinear` for both axes, with a custom `axes` module for labels and `shapeLegend` for the legend.

activity_6 task3

This interactive scatter plot visualizes the Iris dataset, displaying petal length against petal width for individual flowers. Each circle’s fill color encodes the species (setosa, versicolor, or virginica), using sky blue, light green, and orange. The chart is rendered with SVG using d3.select, and the axes are created with d3.axisLeft and d3.axisBottom. Data is loaded asynchronously via d3.csv from an external gist URL, with scales defined by d3.scaleLinear and extents computed with d3.extent. The visualization includes rotated axis labels for clarity.

activity_6 Task2

This horizontal bar chart displays the top 10 countries by population in the year 2000, with countries listed on the y-axis and population values on the x-axis. Built with React and D3, it uses `scaleBand` for the categorical y-axis and `scaleLinear` for the continuous x-axis, rendering bars as SVG `<rect>` elements. Data is loaded asynchronously from a CSV file using D3's `csv` function, and axis labels are formatted using `format('.2s')` to abbreviate large numbers.

Fork of activity_6 Task1

This horizontal bar chart displays the population of ten countries in the year 2000, with bars colored steelblue and tooltips showing the formatted population values. The visualization uses React for component structure and SVG for rendering, while D3.js provides the scaling and formatting utilities, including `scaleBand` for the categorical y-axis and `scaleLinear` for the continuous x-axis. Data is loaded asynchronously from a CSV file via `d3.csv` and processed to convert the population field from a string to a number. The chart includes a bottom axis with formatted tick labels (e.g., "B" for billions) and a left axis showing country names.

Fork of activity_6 Task1

This example displays a horizontal bar chart of population figures for 20 countries in 2010, with country names on the y-axis and population counts on the x-axis. The visualization is built with React and D3 (scaleBand, scaleLinear, format), rendering SVG rectangles for bars and custom axis components. Data is loaded from a CSV file via d3.csv and parsed to numeric population values.

Fork of activity_6 Task1

This example displays a horizontal bar chart of population figures for 20 countries in 2010, with country names on the y-axis and population counts on the x-axis. The visualization is built with React and D3 (scaleBand, scaleLinear, format), rendering SVG rectangles for bars and custom axis components. Data is loaded from a CSV file via d3.csv and parsed to numeric population values.

Fork of activity_6 Task1

This example displays a horizontal bar chart of population figures for 20 countries in 2010, with country names on the y-axis and population counts on the x-axis. The visualization is built with React and D3 (scaleBand, scaleLinear, format), rendering SVG rectangles for bars and custom axis components. Data is loaded from a CSV file via d3.csv and parsed to numeric population values.

Fork of activity_6 Task1

This example displays a horizontal bar chart of population figures for 20 countries in 2010, with country names on the y-axis and population counts on the x-axis. The visualization is built with React and D3 (scaleBand, scaleLinear, format), rendering SVG rectangles for bars and custom axis components. Data is loaded from a CSV file via d3.csv and parsed to numeric population values.

activity_6 Task1

This visualization shows population figures for 20 countries in 2010 as a horizontal bar chart. The bars are rendered as SVG rectangles, with the data loaded from a CSV file and transformed using D3’s `csv` parser. React constructs the SVG elements, while D3’s `scaleBand` and `scaleLinear` position the bars and axes. A tooltip, implemented via the SVG `<title>` element, displays the formatted population value when hovered.

activity 6_Task1

This interactive bar chart displays the population of the top 10 countries for the year 2000, using horizontal bars colored green. Built with React and D3, it loads data from a remote CSV file via the `csv` function and renders the visualization as SVG. The chart uses `scaleBand` for the categorical y-axis, `scaleLinear` for the population x-axis, and includes custom axis components with tick formatting via `format`. Hovering over a bar shows a tooltip with the population value formatted using `format('.2s')`.