Arungopal Andalam

Task-9

This visualization shows the top 10 store areas by sales as a pie chart, with each slice labeled by its store area code and corresponding sales value, alongside a legend listing all areas. The code loads a CSV dataset from GitHub, sorts and filters it, then uses d3.pie() and d3.arc() to generate the chart within an SVG canvas. A d3.scaleOrdinal assigns distinct colors to slices, and custom text elements are positioned using arc.centroid(). The legend is built manually with SVG rects and text elements, and axis-like labels for "Store Area" and "Sales" are added as decorative text.

Apr 28, 2024

D3JS_ASSIGNMENT

This visualization displays a pie chart of the top 10 store areas ranked by their sales, with each slice labeled by store area name and sales value. The chart uses D3.js v7 to load CSV data, sort it, and generate the pie layout with `d3.pie()` and `d3.arc()`. Colored slices and a custom legend highlight each category, while store area names are overlaid on the chart using arc centroids. The SVG rendering includes a title and axis labels, with data sourced from a remote GitHub repository.

Apr 28, 2024

Barchat1

A stacked bar chart displays the top 10 data science job titles by total salary in US dollars, aggregated from a remote CSV dataset. The visualization uses D3.js v7 with SVG rendering, employing `d3.rollups` to sum salaries per title and `d3.scaleBand`/`d3.scaleLinear` for axes. Each bar is colored via `d3.scaleOrdinal` with `d3.schemeCategory10`, and a legend maps colors to job titles. Hovering increases bar opacity through CSS.

pie

This pie chart visualizes the distribution of skills from a data science salaries dataset, showing the count of each skill as slices of a circle with a corresponding legend. The chart uses D3.js v7 to load external CSV data and applies the `d3.pie` and `d3.arc` generators to compute and draw the arcs. A color scale (`d3.scaleOrdinal` with `d3.schemeCategory10`) assigns distinct colors to each slice, while legend items are appended as SVG groups with filled rectangles and text labels. SVG is used for all rendering.

bar

This stacked bar chart shows salary distributions across employment types, segmented by experience level. It uses d3.csv to load salary data, d3.stack() to aggregate the subgroups, and d3.scaleBand and d3.scaleLinear for the X and Y axes. Rendered as SVG with a two-color ordinal scale, the bars display stacked red and blue segments without a legend.

bar2

This example shows the top 10 job titles from a data science salaries dataset, ordered by total salary in descending order, with each bar colored according to its job title. The visualization aggregates salary values using `d3.rollups`, sorts them with `d3.descending`, and renders stacked bars as SVG rectangles with a legend. It uses D3 v7 scales (`scaleBand`, `scaleLinear`, `scaleOrdinal`), axes (`axisBottom`, `axisLeft`), and a categorical color scheme (`schemeCategory10`). Data is loaded asynchronously from a CSV file via `d3.csv`.

histogram

This histogram visualizes the distribution of salaries from a data science salaries dataset, showing the frequency of salary values within equal-width bins. The visualization uses D3.v7 to load CSV data, compute histogram bins with the `d3.histogram` API, and render the result as SVG rectangles. Axes are added using `d3.axisBottom` and `d3.axisLeft`, with the x-axis labels rotated for readability. The chart includes a legend and interactivity, as bars change color on hover.

Fork of Webpage

This example shows a stacked bar graph of the top 10 job titles by total salary, using data from a CSV file of data science salaries. Each bar represents a job title, colored via a categorical scale, with salary totals on the y-axis and rotated labels on the x-axis. The code uses `d3.csv` to load data, `d3.rollups` to aggregate salaries, and `d3.scaleBand` and `d3.scaleLinear` to set up the axes. It renders an SVG with `d3.axisBottom`, `d3.axisLeft`, and includes a legend built from the color scale.

Data Viz project

This example shows a pie chart and a stacked bar graph depicting data science salary information, with the pie chart breaking down experience levels and the bar graph ranking the top ten job titles by total salary. Both visualizations load salary data from a remote CSV file and use D3.js v7 APIs, including `d3.rollup` and `d3.rollups` for aggregation, `d3.pie` and `d3.arc` for pie slices, and `d3.scaleOrdinal`, `d3.scaleBand`, and `d3.scaleLinear` for chart scales. The code renders interactive SVG elements with hover effects on the bars, while the pie chart displays count labels, all styled with categorical color schemes.

Project1

A collection of bar charts, scatter plots, and pie charts visualizes data science salary trends. The charts include a bar chart of total salary by job title, a scatter plot of salary versus experience level, a top-10 job title salary bar chart, a stacked bar chart of employment types, and pie charts for skills and experience levels. Built with D3.js (v3 and v7), the examples use SVG rendering, `d3.scaleBand`, `d3.scaleLinear`, `d3.rollup`, `d3.pie`, and `d3.arc`. Data is loaded from a remote CSV file containing data science salary information.

Activity7_Task1

This chart displays the population of ten countries in the year 2000, with countries listed on the y-axis and population values on the x-axis. Rendered as an SVG using React, the visualization utilizes D3.js v5 functions like `scaleBand`, `scaleLinear`, and `max` to position horizontal bars, while a custom `format` function abbreviates tick labels. Data is loaded via D3’s `csv` parser from a remote GitHub URL, and axes are generated with custom React components—`AxisBottom` for x-axis ticks and `AxisLeft` for categorical labels—styled with light green marks on a gray background.

activity_task2

This example displays a stacked bar chart comparing the values of Nitrogen, normal, and stress conditions across four groups: banana, poacee, sorgho, and triticum. The visualization uses d3.stack() to aggregate the CSV data into stacked segments, with d3.scaleBand() for the categorical x-axis and d3.scaleLinear() for the y-axis. A separate SVG legend is created using d3.scaleOrdinal() to map each subgroup to a distinct color. The bars are rendered as SVG rectangles, with axes labeled "Group" and "Value".

Apr 17, 2024

activity7_task3

This scatterplot displays the relationship between sepal length and petal length for three iris species, with each species represented by a distinct color. The visualization uses D3.js v4 to render SVG circles, positioning them based on data from a remote CSV file. The code employs `d3.scaleLinear` for both axes, `d3.scaleOrdinal` for categorical color mapping, and `d3.axisBottom` and `d3.axisLeft` for tick marks. A legend identifies the species by color.

Apr 17, 2024

activity7_task4

This bubble chart compares GDP per capita with life expectancy for countries worldwide, where each circle’s size reflects population and its color denotes continent. Hovering over a bubble reveals a tooltip with the country name, while focusing on a continent dims all other bubbles to highlight that group. The visualization uses d3.v4 with SVG rendering, d3-scale-chromatic for color schemes, and interactive CSS transitions for hover effects. Data is loaded from a remote CSV file, and scales are defined using d3.scaleLinear and d3.scaleSqrt.

activity7_task2

This example displays the text “Hello VizHub!” centered on a plain page, demonstrating the basic workflow of a VizHub project. It loads D3.js from a CDN and uses the `select` function to target a div element by ID, setting its text content. The project also shows how to import local ES6 modules, with the displayed message defined in a separate `myMessage.js` file. Styling is handled by a linked `styles.css` file, which centers the text and enlarges its font.

Fork of Activity7_Task1_2

This visualization shows the 2010 population of 20 countries as a horizontal bar chart, with the data sorted by country name. The chart uses React components to render SVG elements, including custom `AxisBottom`, `AxisLeft`, and `Marks` components that call D3 scale functions like `scaleBand` and `scaleLinear`. Population values are loaded via `d3.csv` from a remote GitHub URL and formatted with `d3.format` to abbreviate large numbers (e.g., converting gigabytes to billions). The bars include a native SVG tooltip showing the formatted population value.

activity 6

This bar chart displays the 2020 population estimates for 30 countries, ordered by country name on the vertical axis and population magnitude on the horizontal axis, with formatted tooltips showing values in billions. The visualization is built using React, which renders SVG elements directly, and D3 v5 for data loading and scaling, specifically `d3.csv` to parse the remote dataset, `d3.scaleBand` for the categorical y-axis, `d3.scaleLinear` for the numeric x-axis, and `d3.format` for tick label abbreviation. Static axes and rectangular marks are generated through custom local ES6 modules, with styling applied via CSS classes.

Fork of Fork of Hello VizHub

This example demonstrates a minimal D3.js setup that displays the text "Hello VizHub!" centered on the page. It loads D3 v5 from a CDN and uses the `select` API to target the message container, then applies text from a local ES6 module. The code also includes a basic CSS stylesheet for styling the message.

5 Buddhas

Overlapping translucent polygons form a chaotic, colorful mandala-like field on a black background, with a large, stylized Buddha silhouette rendered in the center. The work uses React and SVG to generate random triangular shapes and paths, relying on JavaScript’s `Math.random()` for positioning and RGB color, while the Buddha is drawn with a complex SVG path. The piece serves as a generative art experiment, combining procedural randomness with a fixed, detailed vector icon.

5 buddhas

This React and SVG gallery piece generates a field of random, low-saturation polygons that flicker and cluster across a black canvas. Beneath this generative layer, a single detailed Buddha face path is rendered in a soft, warm palette, its contours and serene expression built from hundreds of cubic Bézier curves defined in a path string. The composition combines algorithmic noise with a structured icon, creating a contemplative yet chaotic visual.

5 buddhas

Five overlapping Buddha silhouettes are rendered on a black background using a dense React-generated field of semi-transparent, randomly placed circles. Each Buddha is a distinct `<path>` element transformed and scaled within an SVG. The visualization juxtaposes the structured, recognizable iconography against chaotic layered noise, and relies on nested array mappings in a React component to generate the SVG circle primitives with random coordinates and colors.

5 Buddhas

Five concentric buddha silhouettes form a layered, colorful mandala against a black background. The central image is outlined in gold, while the surrounding layers are rendered in a gradient of warm colors, creating a sense of depth and radiating energy. Small, randomly positioned circles with varying opacity and RGB hues float over the entire composition, adding a dynamic, digital texture. This React application generates the SVG using nested `map` functions and `Math.random()` calls to create the background particles, while the buddha itself is drawn from an embedded SVG path string.