James Cruz

JC-Task9&10-Q2

JC-Task9&10-Q2

This example displays an area chart of the top 10 companies by market capitalization, using a light blue filled path to visualize values in billions. The visualization loads CSV data from a GitHub gist and renders it as SVG, drawing axes with D3's `scaleBand`, `scaleLinear`, `axisBottom`, `axisLeft`, and generating the area shape with the `area` generator. The code imports these modules via ES6 `import` statements from D3 v5, demonstrating local module usage and data parsing through a custom `parseRow` function.

JC-Task-9-10

JC-Task-9-10

Task-9-10

Task-9-10

Task-9

Road Accident Dataset Bar Chart

Bar Chart: Quantity by StockCode

Total Tax Rate Pie Chart

This pie chart shows the total tax rate as a percentage of commercial profits for 14 countries, ranging from Afghanistan to Bangladesh. The tax rates are visualized as colored slices, with each country labeled and assigned a distinct color. The chart is rendered using Chart.js on an HTML5 Canvas element, with the library loaded via a CDN. The data is hard-coded in JavaScript, and the chart includes a title, "Total Tax Rate by Country," with a white border separating each slice.

Total Tax Rate Visualization

Radar Chart Visualization

Bar Chart Visualization for world dataset

This bar chart displays population growth rates for fourteen countries, including India, China, the United States, and Japan. The visualization uses Chart.js to render the data on an HTML canvas element, with blue bars representing each country's growth rate. The chart includes axis labels for "Growth Rate" and "Country," with a title summarizing the content. Both the x and y axes are configured with visible titles, and the y-axis begins at zero to accurately represent the proportional differences between the positive and negative growth rates shown.

choropleth map for the "Density (P/Km2)"

This choropleth map visualizes global population density by coloring each country according to its estimated population (pop_est) using a viridis sequential color scale. The map renders world geography as SVG paths via d3.geoPath, with country boundaries stroked in white and a hover effect darkening each region. The code loads world-atlas TopoJSON data through d3.json, converts it to GeoJSON with topojson.feature, and maps population values to fill colors. D3 v7 handles the SVG generation and data binding, while the color scale uses d3.scaleSequential with d3.interpolateViridis for continuous color encoding.

Bar Chart Visualization -2 for country table dataset

Line Chart Visualizationfor country table dataset

Pie Chart Visualization for country table dataset

Pie Chart Visualization for country table dataset

Bar Chart Visualization for country table dataset

scatter plot

Area Chart Visualization

Histogram: Distribution of Prices

Pie Chart Visualization

Fork of "InvoiceDate" and "Price" line chart visualization

Pie Chart: Distribution of Items Sold by Country

This visualization displays the distribution of items sold across five countries, with each country's total quantity represented as a proportional slice of a pie chart. The chart uses d3.pie() and d3.arc() to generate the pie geometry, while d3.rollup() aggregates individual data records by country, summing their quantities. The SVG rendering includes interactive hover effects that scale slices slightly, and each slice is labeled with its country name and total quantity. The color scale uses d3.scaleOrdinal with the d3.schemeCategory10 palette.

bar chart visualization of the quantity of items sold in each country

"InvoiceDate" and "Price" line chart visualization

Fork of Fork of Visualization: Sales Distribution by Country (Bar Chart)

A static bar chart displays sales quantities for 26 product descriptions, ranging from 2 to 32 units per item. Each vertical bar is labeled with its exact value above it. The visualization uses D3.v7 with an SVG rendering approach, creating a band scale for the categorical x-axis and a linear scale for the quantity y-axis. Product names on the x-axis are rotated 45 degrees to accommodate the long labels.

Visualization: "Description" and "Quantity" (Bar Chart)

This bar chart displays sales quantities for various product descriptions, with each bar representing a distinct item and its corresponding numeric quantity. The visualization uses D3.js v7 to generate an SVG bar chart, employing `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the continuous y-axis. The code includes labeled axes, rotated x-axis tick labels for readability, and value labels positioned above each bar. The sample dataset contains 26 products with quantities ranging from 2 to 32, rendered through a React-compatible HTML page that imports D3 from a CDN.

Fork of Visualization: Sales Distribution by Country (Bar Chart)

Task-7 Q3

This scatter plot displays the relationship between age and income from a CSV dataset, with each point colored by gender using a categorical color scale. The visualization uses D3 v6 to load and parse the data, then renders circles on an SVG canvas with linear scales for both axes. Axis labels are styled in green, and the plot is sized to fill the browser window. The code demonstrates loading data via a remote URL and applying D3’s scaleLinear, scaleOrdinal, axisLeft, and axisBottom functions to construct the chart.

Task-7 Q4

Task-7 Q4

Task-7 Q3

Task-7 Q2

Task-7 Q2

JC-task-7 Q1.2

JC-task-7 Q1.2

JC-task-7 Q1.2

JC - Task-7 Q1

This bar chart displays the top 10 most populous countries in the year 2000, sorted in descending order, using a horizontal layout with light green bars. The visualization loads CSV population data from a GitHub repository, filters for the year 2000, and converts population values to actual counts. It uses d3.scaleBand and d3.scaleLinear for positioning, React for rendering the SVG elements, and custom AxisBottom, AxisLeft, and Marks components to draw the axes and bars. Axis tick labels are formatted with d3.format to abbreviate numbers (e.g., "B" for billions).

JC - Task-7 Q1

This bar chart displays the top 10 most populous countries in the year 2000, sorted in descending order, using a horizontal layout with light green bars. The visualization loads CSV population data from a GitHub repository, filters for the year 2000, and converts population values to actual counts. It uses d3.scaleBand and d3.scaleLinear for positioning, React for rendering the SVG elements, and custom AxisBottom, AxisLeft, and Marks components to draw the axes and bars. Axis tick labels are formatted with d3.format to abbreviate numbers (e.g., "B" for billions).

Fork of JC Task-7 Q1

JC Task-7 Q1

JC Task-1

Fork of Fork of Fork of Task-7

Fork of Fork of Task-7

Fork of Task-7

Task-7

5 Buddhas

Five Buddha silhouettes overlap on a black background, each composed of thousands of tiny, randomly placed, diamond-shaped polygons. The shapes are generated with JavaScript’s `Math.random` to determine position, color, and rotation, rendered as React SVG elements. The code creates a dense, colorful mosaic effect by mapping over nested arrays, with each polygon’s fill using an `rgb` value derived from random calculations.