JayaSaiReddySantimalla@my.unt.edu

Fork of Tree graph

Fork of network graph

jayasai area chart

This example visualizes video game sales across categories using an area chart, with sales figures plotted on the y-axis and categorical labels on the x-axis. The chart uses D3 v7 to create a smooth area path, with the area filled in steelblue to emphasize the distribution of sales values. The code demonstrates D3’s scaleLinear for both axes, an area generator to define the shape, and axis generators (axisBottom, axisLeft) with rotated tick labels for category readability. Sales data is embedded directly in the script, and the rendering is done in SVG, with margins and labels for clarity.

jayasai line chart

This line chart visualizes monthly video game sales for 2024, with months on the x-axis and sales figures on the y-axis. The chart uses a green title, red axis labels, and an orange line to highlight the sales trend across the year. The code imports `select`, `csv`, `scalePoint`, `scaleLinear`, `axisLeft`, `axisBottom`, and `line` from D3 v5 to build the SVG visualization. Data is loaded from a local `videogame.csv` file, and the y-axis uses a linear scale with a maximum value derived from the dataset.

Jayadsai to pie chart

This example visualizes total video game sales by category using a pie chart, highlighting the proportion of sales attributed to each genre. It shows a snapshot of sales distribution across categories such as Action, Strategy, and RPG, with each slice representing a category’s share of the total. The visualization is built with the Chart.js library, which renders the pie chart on an HTML canvas element. The data is loaded from a local CSV file, with sales values parsed and mapped to category labels. The chart uses a predefined set of translucent colors for the slices and disables responsiveness, maintaining a fixed canvas size of 400 by 400 pixels.

jayasaiReusable D3 Scatter Plot

This reusable scatter plot displays Sales versus Rating for a small videogame dataset, with points colored by game category using a categorical color scale. The chart is built as a configurable D3 module following the “Towards Reusable Charts” pattern, using `d3.scaleLinear` for axes, `d3.scaleOrdinal` with `schemeCategory10` for colors, and `d3.axisBottom`/`d3.axisLeft`. Data loads from a CSV file with `d3.csv`, and the plot applies margins, a fixed radius, and SVG circles within an HTML page.

Jayasai Scatter Plot

This example visualizes the relationship between video game sales and ratings, with each point colored by game category. It shows how different categories, such as Action and RPG, compare across the two metrics. The visualization is built using D3 v7 with SVG and animation, rendering circles positioned by linear scales for sales and rating. Hovering over a circle reveals a tooltip displaying the game's category, sales, and rating. The data comes from the videoGamesStats.csv file, and the scatter plot uses D3's `scaleLinear` for axes and `d3.axisBottom`/`d3.axisLeft` for ticks, with interactive mouseover effects.

Fork of dataset for video games

This bar chart visualizes global sales figures for six major video game franchises, ordered by total units sold, with Mario leading at 330 million and The Legend of Zelda at 120 million. The chart uses D3 v7’s `scaleBand` and `scaleLinear` to map franchise names and sales values, rendering the bars as SVG rectangles via `d3.selectAll().append('rect')`. The x-axis labels are rotated 45 degrees for readability, and the chart includes a title, axis labels, and a light teal fill for the bars. Data comes from a CSV file listing franchise sales.

dataset for video games

This bar chart displays video game franchise sales figures from a dataset included in the project files, with Mario leading at 330 million units and The Legend of Zelda at 120 million. The visualization uses D3.js version 7.8.5, employing `scaleBand` for the categorical x-axis and `scaleLinear` for the y-axis, while rendering rectangles as marks. Axes are drawn with `axisLeft` and custom axis-label components from the `@curran/axis-labels` package. The chart includes an inner rectangle background and uses data-driven positioning and sizing for each bar.

Fork of Fork of Fork of HTML Starter ice5

This example visualizes named CSS colors by rendering four kite shapes, each filled with a distinct color such as Waterspout, Vivid Cerise, Yellow, and Zinnwaldite. It shows how SVG polygons and lines construct the kites and their tails, with text labels for each color name. The page loads a CSV dataset via d3.csv, displaying the file size, row count, and column count in a message container. D3 v7 and raw SVG elements are used for data handling and static drawing, while an external embedded SVG image is included as a reference.

Fork of jayasaireddy santimalla

This example shows a landscape scene with a sky, sun, mountain, river, trees, and birds, all rendered as SVG shapes. The D3.js library v6 is loaded via UNPKG, and the code uses D3 methods like `select` to target the SVG element and `append` with `.attr` to add and style the shapes. It draws the sun as a circle, the mountain as a polygon, and the river as a path with a quadratic Bezier curve, while trees and birds are generated by custom functions.

jayasaireddy santimalla

This example shows a simple landscape scene rendered as an SVG graphic, including a sky, sun, mountain, river, trees, and birds. The visualization demonstrates basic D3.js v6 selection and shape-drawing methods, such as `select`, `append`, and `attr`, to construct geometric primitives like rectangles, circles, polygons, and paths. Data is hardcoded within the script rather than loaded from an external source. The code also defines reusable functions to draw repeated elements, such as trees and birds, illustrating a modular approach to building static vector illustrations with D3.