nissisharon61@gmail.com

Scatter plot Activity 7

Activity 7 tutorial

This example shows a scatter plot of the World Happiness Report 2019 data, with the happiness score on the y-axis and a rotating set of six socioeconomic variables on the x-axis, cycling every five seconds. The visualization uses D3’s `csv`, `scaleLinear`, `axisLeft`, and `axisBottom` to render the SVG chart, updating the axis labels and circles dynamically. It cycles through GDP per capita, social support, healthy life expectancy, freedom, generosity, and corruption perceptions, with Croatia, the U.S., and other countries visible as data points. The animation runs in the browser with a fixed five-second interval.

Activity 7.1 Q2

Activity 7.1 Q1

activity6 tutorial 3.1

This scatter plot visualizes the Iris dataset, mapping petal length and petal width for each sample while coloring points by species (blue, green, or orange). The chart uses D3 v6 methods including `d3.csv` for data loading, `d3.scaleLinear` for axis scaling, and `d3.axisLeft`/`d3.axisBottom` for ticks. Circles are rendered via SVG with a fixed radius, and text labels for axes are rotated and styled. Data comes from a GitHub-hosted CSV file, parsed with a custom row handler.

Activity6 Tutorial 3.2

Activity6 tutorial 1 task 1

This example presents a horizontal bar chart comparing the populations of ten countries in the year 2000. The visualization uses D3 v7 with an SVG rendering approach, employing `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis, and `d3.axisBottom` and `d3.axisLeft` for the axes. The data is loaded asynchronously from a CSV file using `d3.csv`. Rectangular marks are colored light green, with axis labels formatted to abbreviate large population values.

activity6_tutorial 1 task 2

This example shows the 2010 population for the first 20 countries from a CSV file as a horizontal bar chart, with light-green bars sorted by country name. The chart uses D3 v7's `scaleLinear` and `scaleBand` for axes, `axisBottom` and `axisLeft` for tick marks, and `csv` to asynchronously load the data from a GitHub gist. Each bar is drawn as an SVG `rect`, with the x-axis labeled "POPULATION – 2010" and the y-axis "Countries".

activity 6 tutorial 1

This example presents a horizontal bar chart of the 2020 population for 30 countries, sorted from largest to smallest by the y-axis. The data is loaded from a CSV file via `d3.csv` and rendered as SVG rectangles using React components. It applies `d3.scaleBand` for the categorical y-axis and `d3.scaleLinear` for the numeric x-axis, with `d3.format` to abbreviate population values in billions. Axes and marks are built with reusable React components that map data to SVG elements.

activity6 tutorial 3.2

This example shows an interactive scatter plot of the Iris dataset, mapping sepal length to the x-axis and petal length to the y-axis, with each species represented by a distinct symbol from d3.symbolsFill. A custom shape legend displays the species labels and corresponding symbols. The visualization is built with D3 v7, using d3.scaleLinear for axes, d3.scaleOrdinal for shapes, and d3.csvParse to load data from a GitHub-hosted CSV file. The axes module generates labeled axes while the scatterPlot module renders symbols via d3.symbol.

activity 6 tutorial 4

activity 6 tutorial 2

Fork of Activity 6 tutorial 1

activity6_Task4

This visualization is a bubble chart that shows the relationship between student age, course, CGPA, and year of study, using data from a mental health survey. The x-axis maps age, the y-axis maps course, bubble size represents CGPA, and color distinguishes year of study. D3 v7 API calls such as `scaleLinear`, `scalePoint`, and `scaleOrdinal` are used to position and style the circles, while `d3.csv` loads the data and `d3.axisBottom` and `d3.axisLeft` render the axes. The chart is rendered as an SVG with a tooltip for interactivity.

Activity6_Task3.2

This scatter plot shows student age and course, with symbols encoding the year of study for each data point. Using D3.js v7, the visualization maps age on the x-axis and course on the y-axis, replacing standard points with circles, squares, triangles, and diamonds for Years 1–4. Data is loaded from a CSV via `d3.csv` and rendered as SVG, with axes generated by `d3.axisBottom` and `d3.axisLeft`. Hovering reveals a tooltip with detailed information about each student.

Activity6_Task3.1

Activity6_Task2- 3

This horizontal stacked bar chart visualizes the proportional distribution of fruit prices across five price ranges, from "Below 1.0" to "Above 4.0", using 100% stacked bars. The d3.stack() function with stackOffsetExpand normalizes each fruit's segments to a percentage scale, while d3.scaleOrdinal assigns distinct colors. The code uses D3 v7 APIs such as d3.axisBottom, d3.axisLeft, and the join operation for efficient element creation. Labels appear only where segments exceed 40 pixels in width, and a legend in the top-right corner maps colors to price ranges.

activity 6_Task 1-2

This example shows a horizontal bar chart comparing the populations of 20 countries in 2010, sorted in descending order. The chart uses D3 v5 to create an SVG visualization, with `d3.scaleLinear` mapping population values to the x-axis and `d3.scaleBand` positioning countries along the y-axis. The data is loaded from a CSV file via `d3.csv`, with the population column parsed and filtered to the top 20 entries. Rice-shaped bars are rendered using SVG rectangles, with axis labels and styling applied through CSS classes.

Activity6_Task1 _1

Fork of Activity 7

This example shows a horizontal bar chart ranking 30 countries by their 2020 population, with each bar labeled with its country name and a tooltip displaying the formatted population value on hover. The visualization uses React components to render SVG elements, with d3.scaleBand and d3.scaleLinear handling the axes and data mapping. Data is loaded asynchronously via d3.csv from a GitHub-hosted CSV file, and axis ticks are formatted using d3.format to abbreviate large numbers (e.g., 'B' for billions). The chart features custom axis components that generate tick marks and labels, with styling applied through CSS selectors.

Fork of HTML Starter

This example displays the text "Hello HTML!" centered on the page, using a 13em font size via plain HTML and CSS. It demonstrates a minimal web page structure with a styled `div` element. The rendering approach is simple CSS styling, with no external libraries or data sources. The page’s static content is defined directly in the `index.html` file, and the styling is applied within a `<style>` block in the document’s head.