krunalpatel@my.unt.edu

Area chart - 11632790

This area chart visualizes annual cost data from 2000 to 2013. The chart uses a light teal fill with a darker teal stroke to represent the area beneath the line, making the trend in costs over time immediately apparent. The visualization is built with D3.js v6, using `d3.scaleLinear` for both axes, `d3.area` to generate the path, and `d3.extent` for domain calculation. The code includes invisible circles at each data point that reveal a tooltip with the year and cost value on hover, though the example also shows an interactive version with a CSS tooltip and smooth transitions.

Apr 29, 2024

Piechart - 11632790

This pie chart displays the top ten Indian locations by recorded temperature in degrees Celsius, with each slice labeled by location name and value. The visualization fetches CSV data from a GitHub gist and sorts it before selecting the ten warmest entries. Using D3 v5, the code employs `d3.pie` and `d3.arc` to generate the SVG paths, `d3.scaleOrdinal` for slice colors, and a legend positioned to the right. Text labels are placed at arc centroids, with all output rendered as static SVG elements.

Apr 29, 2024

Question9_Activity6_Task4

This visualization displays Ecuadorian holiday events as a bubble chart, with circles grouped by locale along the x-axis and sized by the total count of holiday records per locale. Each bubble is colored by the holiday type using a categorical color scale. The chart uses d3.csv to load the data, d3.rollup to aggregate counts, and d3.scaleBand, d3.scaleLinear, and d3.scaleSqrt for positioning and sizing. Interactive tooltips appear on mouseover, and a legend identifies the color encoding for holiday types.

Apr 15, 2024

Activity6_Task4

This interactive bubble chart visualizes the correlation between average torque, horsepower, and highway MPG for various car makes. Each circle’s position encodes horsepower and torque, while its radius and color represent highway MPG and the vehicle brand, respectively. Hovering over a bubble reveals the car make via a tooltip. Built with D3.js v7, the visualization uses SVG, linear scales, and an ordinal color scale, with a legend displaying MPG values and brand colors. Data is loaded from a CSV file.

Extra-Question6-Activity6_Task3

This scatter plot visualizes the relationship between Sales and Profit for products in a Global Superstore dataset. Each mark is positioned by the d3.scaleLinear scales for the x- and y-axes, and its shape and color encode the product Category, using d3.symbol with d3.symbolCircle, d3.symbolSquare, and d3.symbolTriangle, and a d3.scaleOrdinal color scale with the d3.schemeCategory10 palette. The visualization is rendered as SVG, drawing axes with d3.axisBottom and d3.axisLeft, and it loads the data from a remote CSV file.

Activity6_Task2-Question3

This stacked bar chart visualizes the first 30 days of Delhi climate data, showing how the daily values for mean temperature, humidity, wind speed, and mean pressure contribute to a total for each day. The code uses `d3.csv` and `d3.autoType` to load the data, then employs `d3.stack` and `d3.scaleBand` with a color ordinal scale to render the stacked rectangles in an SVG. It uses `d3.axisBottom` and `d3.axisLeft` for the axes, with a manually positioned legend.

Question6-Activity6_Task3

This example displays a bar chart of the ten most populous countries for the year 2000, using data from an external CSV file. The visualization maps countries to a categorical x-axis and population values to a linear y-axis, with each bar colored using the `schemeTableau10` palette. A legend identifies each color with its corresponding country. The implementation uses D3 v7 APIs including `scaleBand`, `scaleLinear`, `axisBottom`, and `axisLeft` to construct the chart and axes.

Tutorial Activity6_Task3.2

This interactive scatter plot displays the relationship between sepal length and petal length for three iris species, distinguished by different D3 symbol shapes. Using d3.scaleLinear for axes and d3.scaleOrdinal with symbolsFill for shapes, it renders SVG paths via the d3.symbol generator. A custom shapeLegend displays species categories. Data is loaded asynchronously via fetch and parsed with d3.csvParse from a remote CSV file, with numeric fields converted before plotting.

Tutorial Activity6_Task3

This example visualizes the Iris dataset as a scatter plot, mapping petal length and width on the axes while coloring each point by species (setosa, versicolor, or virginica). The chart uses D3 v6 to load CSV data, apply linear scales, and render SVG circles with custom fill colors. Axis labels are added using d3.axisLeft and d3.axisBottom, and the graphic fills the browser window. The code imports specific D3 modules via destructuring and uses scaleLinear, extent, and join for efficient data binding.

Tutorial Activity6_Task1

This example shows a horizontal bar chart of population data for the top 20 countries in 2020, with country names on the y-axis and population counts on the x-axis. Built with React and D3 v5, it renders as SVG and uses `scaleBand` and `scaleLinear` for axes, `format('.2s')` to abbreviate tick labels, and `<title>` tooltips to display the exact population value on hover. The data is loaded from a remote CSV file.

Activity6_Task2

This stacked bar chart shows the percentage of movie ratings across five genres, using horizontal bars segmented by rating categories from "below 5.0" to "above 8.5". Hovering over a segment reveals the exact percentage via a tooltip. The visualization uses d3.csv to load data, d3.stack for stacking, and d3.scaleBand and d3.scaleLinear for axes. SVG rendering displays the chart, with a legend and axis labels.

Activity6_Task1

This example shows a horizontal bar chart of population estimates for 20 countries, sorted alphabetically by country name. Each bar’s length encodes population in millions, with a formatted x-axis (e.g., 1.2B) and light-blue axis lines. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis, `scaleLinear` for the continuous x-axis, and `csv` to load data from a GitHub-hosted CSV. SVG rectangles are rendered with a `<title>` tooltip showing the population value on hover.

Fork of Activity6_Task1

This is a horizontal bar chart of population data for ten countries in the year 2000, rendered as SVG via React. The visualization uses React hooks (useState, useEffect) and D3 v5 scales including d3.scaleBand and d3.scaleLinear, with components for axes and marks. Data is loaded as CSV from a GitHub URL using d3.csv, with each bar’s width mapped to population via d3.max and tooltips formatted using d3.format. Axes are custom-built with React components, and the chart includes a labeled x-axis showing population in billions.