Jaswanthkota@my.unt.edu

Fork of Fork of activity7jaswanthquestion1

A pie chart depicts the rate of deaths across states in the United States. The chart uses D3’s `pie` function to compute arc segments, with colors assigned via `scaleOrdinal`. Each segment displays an SVG `path`, and a legend with colored rectangles and text pairs is rendered on the side. The data is loaded as CSV from a GitHub repository, with the `Deaths` values parsed as numbers and used to size the arcs.

Nov 7, 2024

Fork of activity7jaswanth

This example shows a D3 pie chart that visualizes a CSV dataset, coloring each slice by genre category and displaying a legend. It loads data from a GitHub raw CSV file, converts string values to numbers, and uses `d3.pie` with `d3.arc` to generate SVG path slices. The chart applies a `d3.scaleOrdinal` with `d3.schemeCategory10` for colors, and adds a legend with `rect` and `text` elements, all rendered in an SVG container via D3 v6.

Nov 4, 2024

fork of activity6_task_3.1

This scatter plot visualizes the Iris dataset, mapping petal length and width while coloring each point by species—skyblue for setosa, lightgreen for versicolor, and orange for virginica. The D3 v6 code loads CSV data from a GitHub URL, uses scaleLinear with extent for axes, and renders circles with SVG. Axis labels clarify petal length and sepal length, with d3.axisLeft and d3.axisBottom providing tick marks.

Oct 25, 2024

fork of activity_6_question_2

This stacked bar chart displays product sales (productA, productB, productC) across four regions (North, South, East, West) using D3 v7. The visualization loads CSV data via `d3.csv` with `d3.autoType`, applies a band scale for regions and a linear scale for sales values, and renders SVG rectangles through the `d3.stack` layout. Color encoding uses `scaleOrdinal` with four categorical colors, with axes generated by `axisBottom` and `axisLeft`. A legend shows product categories, and the chart is scoped within defined margins on a 960×500 SVG canvas.

fork of activity_6_question_4

This bubble chart visualizes product data, mapping price to the x-axis, sales volume to the y-axis, and rating to bubble radius, with categories distinguished by color. The D3 v7 code uses `d3.scaleLinear` for axes, `d3.scaleSqrt` for circle sizes, and `d3.scaleOrdinal` with `d3.schemeCategory10` for color encoding. The SVG rendering includes a legend, axis labels, and interactive tooltips that display product details on mouseover. Data is loaded from a CSV file using `d3.csv`.

Fork of activity 6_task_4

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes. Each circle’s position maps horsepower on the x-axis and torque on the y-axis, while its radius encodes highway MPG and its color distinguishes the make. Built with D3 v7, it uses `d3.scaleLinear` for axes and size, `d3.scaleOrdinal` with `d3.interpolateTurbo` for colors, and includes interactive mouseover tooltips plus a size legend. The data comes from `bubblechart.csv`, rendered as SVG with animation.

Fork of question_3

This example shows a scatter plot of car data, mapping horsepower on the x-axis and highway MPG on the y-axis. Each circle is colored by the car’s make, with a legend listing the makes. The visualization loads CSV data via `d3.csv` from a GitHub repository, scales axes with `d3.scaleLinear`, and assigns colors using `d3.scaleOrdinal` with `schemeTableau10`. Axes are rendered using `d3.axisLeft` and `d3.axisBottom`, and the SVG is created with D3 v6 selections.

Fork of task3.2

This visualization shows the classic Iris dataset as a scatter plot of sepal length against petal length, with points colored and shaped by species using D3 v7. The code employs `scaleLinear` for axes, `scaleOrdinal` with `symbolsFill` to map species to distinct shapes, and custom legend and axis modules. Data is loaded from a CSV via `csvParse` and rendered with `d3.symbol` paths sized at 200 pixels. The plot uses a viewport-sized SVG with margins, updating interactively based on window dimensions.

activity_6

This stacked bar chart shows how IMDb movie ratings are distributed across six genres, with each bar broken into five rating-level segments that sum to 100%. Hovering over a segment reveals the exact percentage for that rating category within the genre. The visualization uses d3.stack() to compute the stacked series, d3.scaleBand() for the categorical y-axis, and d3.scaleLinear() for the percentage x-axis. Mouseover events trigger a custom tooltip that displays the formatted percentage values from the loaded CSV data.

task#

This example demonstrates a minimal D3.js visualization setup within the VizHub environment. It displays the text "Hello VizHub!" centered on the page, styled with a large font size via CSS. The code imports the `select` function from D3 v5 and a local ES6 module, `myMessage.js`, to set the text content of a dedicated HTML element. The example highlights basic module imports, DOM selection, and styling for simple text-based data visualization.

activity_6_question_1.2

This bar chart displays the populations of 20 countries in 2010, sorted by country name. The visualization uses React with D3 v5, employing `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and SVG `rect` marks for the bars. Data is loaded via `csv` from a GitHub-hosted CSV file, with population values converted from thousands. The chart includes formatted tick labels using `format('.2s')`, replacing 'G' with 'B' for billions, and tooltips generated through SVG `<title>` elements.

activity6_task1_question1

This example uses a horizontal bar chart to display the top 10 countries by population in the year 2000. The chart, built with React and rendered as SVG, uses D3 v5 utilities like `scaleBand` and `scaleLinear` to map country names and population values to screen coordinates. Each bar’s length corresponds to the population value, with a tooltip showing the formatted number. Data is loaded from a remote CSV file via D3’s `csv` function, and the x-axis labels are customized using D3’s `format` to abbreviate large numbers.

Oct 22, 2024

Fork of hello vizhub activity6_jaswanth_kota

This visualization displays the 2020 populations of 30 countries as horizontal bars, using a linear scale to map population values to bar widths and a band scale for country categories. The React-based application loads data from a CSV file via the `csv` function from D3 v5, processes the population values, and renders the chart as SVG. The code includes custom React components for the bottom axis, left axis with tick labels, and interactive bars that show formatted population values in tooltips. Green bars sit against a white background with blue axis lines, and the chart includes a labeled x-axis.

Oct 22, 2024

Fork of Hello vizhub-activity_6_kota_jaswanth

This is a horizontal bar chart that displays the 2020 population estimates for 30 countries, with the data sourced from a CSV file. The visualization uses a React component structure, leveraging D3 version 5 (specifically `scaleBand` and `scaleLinear`) to position the bars and axes. The SVG-based chart renders a bottom axis with formatted tick labels (converting values to billions) and a left axis with country names. Each bar includes a tooltip showing the population value when hovered. The styling applies specific colors to the tick lines, text, and bars.

Oct 22, 2024

Fork of 2 BuddasJaswanth

This example overlays a multi-layered, translucent Buddha silhouette with a chaotic grid of colored squares. The Buddha path, drawn with complex SVG path data, is rendered through React's declarative `App` component, which returns an SVG canvas. A nested `A.map` loop generates hundreds of small colored shapes, each with random `x` and `y` coordinates, `fill` colors, and an `opacity` of 0.8, creating a vibrant, overlapping pattern against a floral background image. The visualization uses React and ReactDOM to render the SVG directly in the browser.

Oct 18, 2024