sriharshakondakindi@gmail.com

CSCE 5320 ASSIGNMENT 2 QUESTION 2

This area chart visualizes nuclear usage from 2010 to 2020, plotting year on the x-axis against quantity on the y-axis. The chart uses D3 v5's `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, `line`, `area`, and `curveBasis` APIs to render a smooth line with a filled area beneath it, styled with a green line and black fill. Data is loaded via D3's `csv` parser from an external gist, with dates parsed using `timeParse`. The SVG rendering includes custom tick styling and axis labels.

Fork of CSCE 5320 ASSIGNMENT 2 QUESTION 2

An area chart visualizes nuclear energy usage from 2010 to 2020, plotting year against quantity. The chart uses D3 v5 with SVG rendering, employing `scaleTime`, `scaleLinear`, `line` and `area` generators with `curveBasis` for smooth paths. Data is loaded from a CSV file via `d3.csv` and parsed using `d3.timeParse`. Axis labels and tick formatting are customized, and the chart includes gridlines derived from axis ticks.

CSCE 5320 ASSIGNMENT 2 QUESTION W

This example demonstrates basic VizHub functionality by displaying a message in the center of the page. It shows how to load D3 from a CDN via UNPKG and use the `import` statement to access both D3 APIs and local ES6 modules. The code imports `select` from `d3` and a `message` string from a local file, then sets the text content of an HTML div element. Styling is applied through an external CSS file to control font size and alignment.

CSCE 5320 ASSIGNMENT2QUESTION1

This example shows the USA car sales of 2022, displaying each brand’s year-to-date sales as a pie chart with a legend listing the brand, percentage share, and sales in thousands. The data is loaded as CSV from a GitHub gist and processed with `d3.csv`; the pie layout uses `d3.pie` and `d3.arc` to generate SVG paths. Color encoding applies `d3.scaleOrdinal` with a fixed palette, and legends are appended as SVG groups with text labels formatted via `d3.format`. The visualization is rendered entirely with D3 v5, with the SVG container defined in the HTML.

CSCE 5320 QUESTION 1 ASSIGNMNET 2

This example shows a pie chart built from CSV data, with each slice labeled by its category. The visualization loads data from a GitHub-hosted CSV file using `d3.csv` and renders the chart as an SVG. The code uses `d3.pie` to compute the arc layout, `d3.arc` for the slice geometry, and `d3.scaleOrdinal` with `d3.schemeCategory10` for colors. Slice labels are positioned using the `arc.centroid` method. The chart is created within a React-compatible HTML page, relying solely on D3 v7 and vanilla JavaScript.

CSCE 5320 ASSIGNMENT 2 QSN1

This example shows a pie chart of movie genres, illustrating the proportion of films rated above 8.5. The code loads CSV data from a GitHub repository, converts the rating column to numeric values, and uses d3.pie and d3.arc to generate SVG paths colored by genre via d3.scaleOrdinal and d3.schemeCategory10. A legend with colored rectangles and text labels is appended to the SVG, with opacity set for each slice.

Fork of vizhub for CSCE 5320ASSIGNMNET 2

This example shows a D3 pie chart that visualizes the number of items with a rating above 8.5 across different genres, using data loaded from a remote CSV file via `d3.csv`. The chart renders as an SVG with a categorical color scale (`d3.scaleOrdinal` and `d3.schemeCategory10`), and each slice is drawn using `d3.pie` and `d3.arc`. A legend on the right maps each genre to its corresponding color, with the chart styled using opacity, black strokes, and explicit width and height dimensions.

csce 5320assignment 2 question 2

This example visualizes the proportion of ratings across multiple genres as a layered area chart. It loads CSV data from a GitHub repository using `d3.csv`, then constructs the chart with D3 v6’s `d3.area`, `d3.scaleBand`, `d3.scaleLinear`, and axis generators, rendering to SVG. A legend maps each series to a color from `d3.schemeCategory10`. The chart includes axis labels and a fixed layout with a right-side margin for the legend.

Fork of sekhar question1

This example presents a D3.js pie chart that visualizes the distribution of `above 8.5` values across different genres from a CSV file hosted on GitHub. The chart is rendered as an SVG graphic with a legend positioned to the right, using a categorical color scheme. The code asynchronously loads the data via `d3.csv`, processes it, and then computes the pie slices using `d3.pie()` and `d3.arc()`. The visualization includes a legend with colored squares and text labels, applying a semi-transparent fill and black stroke to each slice.

vizhub for CSCE 5320ASSIGNMNET 2

This example demonstrates how to set up a minimal VizHub project that integrates D3.js with local ES6 modules. The visualization renders the text “Hello VizHub!” in large, centered styling using the `select` function from D3 to manipulate the DOM. The code imports D3’s API from UNPKG and a custom message module, while a regular expression and variable declaration illustrate basic JavaScript syntax. The rendering approach uses standard HTML and CSS, with the message displayed in the browser.

Harsha 1

A pie chart visualizes categorical data by partitioning a circle into colored slices, with each slice sized proportionally to the value of its corresponding data point. The chart renders as an SVG using D3.js v7, employing `d3.pie` to compute the arc angles and `d3.arc` to draw the paths. A legend positioned to the right maps each slice’s color—assigned via `d3.scaleOrdinal` with `d3.schemeCategory10`—to its brand label. The data is loaded asynchronously from a remote CSV file, parsed for the `price` column as slice values.

Harsha 1

This area chart displays the change in a numeric value over time, with the area beneath the curve filled in steel blue. It loads data from a CSV file, parses dates and values, and uses d3.scaleTime and d3.scaleLinear to map the data to the SVG canvas. The visualization is built with d3.area and axes rendered using d3.axisBottom and d3.axisLeft.

Fork of Q2 Area chart

A responsive area chart shows how a numeric value from a music dataset fluctuates over time, with dates on the x-axis and values on the y-axis. Built with D3.js v7, the chart renders as a filled SVG path using `d3.area` and `d3.scaleTime`, pulling data from a CSV via `d3.csv`. The visualization includes labeled axes generated with `d3.axisBottom` and `d3.axisLeft`, with the area filled in steelblue at partial opacity.

Fork of sekhar question1

A pie chart visualizes the distribution of movie genres by the number of films rated above 8.5, loading data asynchronously from a remote CSV file via `d3.csv`. The chart uses `d3.pie` to compute arc angles and `d3.arc` to generate SVG paths, with colors assigned by a `d3.scaleOrdinal` using `d3.schemeCategory10`. A legend on the right displays each genre with a colored square and label. The SVG is rendered with a fixed width of 800 and height of 450, and the visualization highlights proportional genre shares with semi-transparent, black-stroked slices.

Insurance32

This example displays an area chart of insurance charges, mapping age along the x-axis and the parsed numeric `charges` values along the y-axis. It fetches CSV data from a GitHub gist and uses D3.js v7 to parse it, then constructs an SVG with a steelblue filled area path. The visualization uses `d3.scaleBand` and `d3.scaleLinear` for positioning, and `d3.area` to generate the area shape, with axes added via `d3.axisBottom` and `d3.axisLeft`.

Apr 12, 2024

Cosmetics32

This example visualizes the distribution of skin types from a cosmetics dataset loaded as CSV, rendering a pie chart with colored slices and a legend. The code uses D3 v7 APIs such as `d3.csv` for data loading, `d3.pie` and `d3.arc` for pie geometry, and `d3.scaleOrdinal` with `d3.schemeCategory10` for color encoding. Each slice is drawn as an SVG path with black strokes, and the legend maps skin type labels to corresponding colors.

Apr 12, 2024

harsha act6 que3

This scatter plot visualizes a car dataset, plotting horsepower on the x-axis against highway MPG on the y-axis. Each circle represents a car, with its color indicating the car's make, as shown in the legend on the right side of the SVG graphic. Built with D3 v6, the code uses `d3.csv` to load the data, `d3.scaleLinear` and `d3.scaleOrdinal` for scaling, and `d3.axisBottom` and `d3.axisLeft` to render the axes. The data originates from a raw CSV file hosted on GitHub.

Apr 4, 2024

harsha act6 que4

This bubble chart visualizes correlations among sepal length, sepal width, and petal length for the classic Iris dataset. It uses d3.csv to load the data, then d3.scaleLinear for axes and bubble sizing, with d3.scaleOrdinal mapping species to colors from d3.interpolateTurbo. Hovering over a bubble triggers tooltips showing species and petal length, while a legend identifies species colors. The SVG rendering includes axis labels and a chart title.

harsha act6 task4

A bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for various car makes, using data from a CSV file. The x-axis maps horsepower, the y-axis maps torque, and circle size encodes highway MPG, with color distinguishing each make via a color scale. Built with D3 v7, this SVG visualization includes interactive tooltips on mouseover and a legend for both MPG values and color categories. The code uses `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.axisBottom`, `d3.axisLeft`, and event handlers for tooltip interactions.

harsha act6 task3

This visualization displays the Iris dataset as a scatter plot of sepal length against petal length, with species distinguished by filled symbol shapes (circles, triangles, and other symbols) and a corresponding shape legend. The D3 v7 code uses `scaleLinear` for both axes, `scaleOrdinal` with `symbolsFill` for shape encoding, and `symbol` generators to render marks. Axes and labels are drawn via `axisLeft` and `axisBottom`, while the legend is built manually. Data loads asynchronously from a GitHub-hosted CSV and is parsed with `csvParse`.

harsha act6 que2

A stacked bar chart displays the percentage of five rating levels across different movie genres, with hover tooltips revealing exact percentages. The visualization uses d3.stack() to compute stacked series and d3.scaleBand() for the categorical y-axis. SVG elements render the chart, while a tooltip div shows values on mouseover, with d3.format() controlling decimal precision. Data is loaded from irisdata.csv, though the dataset appears mislabeled as iris species rather than movie genres.

harsha act6 task2

This stacked bar chart shows the distribution of IMDb movie ratings across six genres, using horizontally stacked segments to represent the percentage of films falling into five rating brackets from below 5.0 to above 8.5. The visualization highlights how genres like Documentary skew toward higher ratings, while Action films cluster in lower ranges. Hovering over a segment displays the exact percentage via a tooltip. The chart is built with D3 v7, using d3.stack() to compute the stacked series, d3.scaleLinear and d3.scaleBand for positioning, and SVG rendering with mouse event handlers for interaction.

harsha activity6que2

This visualization displays the populations of 20 countries for the year 2010 using a horizontal bar chart. The chart is built with React and D3 v5, using `scaleBand` for the country categories on the y-axis and `scaleLinear` for the population values on the x-axis. Population data is loaded from a CSV file via D3's `csv` function, with values multiplied by 1000. The SVG rendering includes custom axis components and tooltips that format large numbers using D3's `format` function with SI prefixes.

harsha actvity6que1

This bar chart displays the population of ten countries for the year 2000, with countries listed on the y-axis and a formatted horizontal population scale. Built with React and SVG, it uses D3's `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. The `Marks` component renders each bar with a tooltip, while `AxisBottom` and `AxisLeft` generate the tick marks and labels. Population data is loaded from a remote CSV file.

harsha activity6

This bar chart shows the top 30 countries by population in 2020. The visualization uses React to render SVG elements and d3-scaleBand for the categorical y-axis and d3-scaleLinear for the quantitative x-axis, with population values formatted from raw data. Data is loaded asynchronously via d3.csv from a GitHub-hosted CSV file. A horizontal bar for each country is created with SVG rect elements, and axis ticks are generated using the scale functions, with tooltips provided through SVG title elements.

activity 6_Task 1

This interactive bar chart displays the 2020 populations of the top 30 countries, with each country’s value encoded as a horizontal bar’s length. Built with React and SVG, the visualization uses D3 v5 scales (`scaleBand` for the categorical axis, `scaleLinear` for the numeric axis) and `format` to abbreviate population labels (e.g., “B” for billions). Data is loaded asynchronously from a CSV via D3’s `csv` and parsed into numeric population values, with marks rendered as colored rectangles.

Apr 2, 2024

activity6task-1

This bar chart displays the 2020 population estimates for 30 countries, with horizontal bars sorted by country name. The visualization is built with React and D3 v5, using `scaleBand` for the y-axis and `scaleLinear` for the x-axis. Data loads from a CSV via `d3.csv` and renders as SVG `<rect>` elements. The bottom axis formats tick values using `d3.format`, and tooltips show population values on hover.

Apr 2, 2024

Fork of Activity 7

This example shows a horizontal bar chart comparing the populations of 30 countries in the year 2000, sorted by country name on the y-axis. The chart uses React components to render SVG rectangles via `Marks.js`, with `scaleBand` and `scaleLinear` from D3 v5 handling the axes. Data is loaded asynchronously from a CSV file using `d3.csv` inside a custom `useData` hook, and each bar includes a native SVG `<title>` element for tooltips. The axes are built with reusable `AxisBottom` and `AxisLeft` components, and tick labels are formatted with `d3.format`.

Apr 2, 2024

Fork of budha

This example renders a decorative SVG artwork called "budha," built with React and displayed as a large centered graphic on a black background. The visualization layers a repeated flower image with a complex, hand-coded SVG path that forms an intricate Buddha-like silhouette. The path data is defined inline within a React component, and the image is tiled via nested array mappings. React elements produce the SVG output, while plain JavaScript calculates coordinates and transformations. No external data libraries are used; the rendering relies entirely on React’s virtual DOM to generate static SVG markup.

Mar 29, 2024

Budhha Question

A serene flower image is centered as a background, while three layered sets of identical SVG paths form a repeated visual motif, creating a meditative, kaleidoscopic effect. The paths, rendered in white, are scaled and positioned to overlay the background, resulting in a pattern reminiscent of Buddhist iconography. Built with React and rendered as SVG, the composition pairs a fixed floral backdrop with a structured, algorithmic repetition of a single geometric shape, emphasizing symmetry and spiritual minimalism against a black canvas.

Mar 29, 2024