Skip to main content
Log in
A

ArunVurukonda@my.unt.edu

@arunv086·13 public vizzes

Loading thumbnail…

A7Q2

This example shows website visitor counts across a week, with line chart points for each day from 230 to 890 visitors. The visualization uses Chart.js within an HTML canvas element, setting the line’s fill property to false while applying a curved tension of 0.4. The dataset is hardcoded in the script, and the y-axis begins at zero. Chart.js renders the chart on a 400-by-400 pixel canvas.

Nov 8, 2024
Loading thumbnail…

q1A7

This example displays a website traffic pie chart, breaking down visitor sources into five categories such as Direct, Organic Search, and Email. It uses Chart.js to render the visualization, pulling the chart library from a CDN and drawing the pie chart onto a Canvas element with labeled datasets and colored segments. The chart is generated client-side within an HTML page using the Chart.js API.

Nov 8, 2024
Loading thumbnail…

q-9

This interactive bubble chart visualizes the correlation between torque, horsepower, and highway MPG for various car makes. Each circle’s position encodes horsepower on the x-axis and torque on the y-axis, while its radius represents highway MPG and color distinguishes car brand. The visualization includes an interactive tooltip on hover and a legend for both bubble size and color. Built with D3 v7, it uses `d3.csv`, `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.interpolateTurbo` to render SVG elements with mouse event handlers. Data comes from the provided `bubblechart.csv` file.

Oct 25, 2024
Loading thumbnail…

t-4

A bubble chart reveals correlations between average horsepower, torque, and highway MPG across 31 car makes. Each circle’s position maps horsepower and torque on linear scales, while its radius encodes highway MPG via a second linear scale. Color distinguishes makes using d3.scaleOrdinal with d3.interpolateTurbo. Hovering triggers tooltips through D3 mouse events. The visualization includes a legend for MPG values and make colors. Data loads from a CSV file.

Oct 25, 2024
Loading thumbnail…

question-6

This scatter plot visualizes the relationship between vehicle weight and horsepower for a small dataset of 1970s cars. Each circle represents a car, color-coded by country of origin using `d3.scaleOrdinal` with `d3.schemeCategory10`. The visualization uses d3.axisBottom and d3.axisLeft to render axes, while circles appear as SVG elements with interactive tooltips. Data is loaded from a CSV file via `d3.csv`, with values coerced to numbers for scaling. The example demonstrates modular ES6 imports, including local modules for the scatter plot and axis creation.

Oct 25, 2024
Loading thumbnail…

t-3.2

This example demonstrates a scatter plot visualizing the Iris dataset, encoding sepal length on the x-axis, petal length on the y-axis, and species as different point shapes. It loads data from a GitHub-hosted CSV file using the Fetch API and `d3.csvParse`. The visualization uses `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.symbol`, and `d3.axisLeft`/`d3.axisBottom` for axes, rendered within an SVG sized to the browser window. A custom legend module displays the shape-to-species mapping.

Oct 25, 2024
Loading thumbnail…

t-3

This scatter plot visualizes the Iris dataset, showing petal length versus petal width for individual flowers, with each species—setosa, versicolor, and virginica—colored distinctly. The code loads data via `d3.csv`, scales the axes with `d3.scaleLinear`, and renders circles as SVG marks. It also attaches a second, unused pair of sepal measurements to each point’s `rx` and `ry` attributes. Axis labels and ticks are generated using `d3.axisLeft` and `d3.axisBottom`.

Oct 25, 2024
Loading thumbnail…

q-3

A bar graph displays the distribution of percentages across ten food categories, from Fast Food to Meat. The chart uses D3 v7 to load data from a local CSV file and render the visualization as SVG. It employs `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.axisBottom` and `d3.axisLeft` for ticks. Interactive tooltips appear on mouseover, changing bar color via `select` and CSS transitions.

Oct 25, 2024
Loading thumbnail…

t-2

This example visualizes the distribution of IMDb movie ratings across six genres using a stacked horizontal bar chart. The chart uses percentage data from a CSV file, with each genre represented as a stacked bar broken into five rating categories from “below 5.0” to “above 8.5.” The code employs D3 v7’s `d3.stack()` and `d3.scaleBand()` to construct the layout, with a tooltip showing precise percentages on mouseover. A color ordinal scale distinguishes rating bands, and the SVG rendering includes custom axis labels and styling.

Oct 25, 2024
Loading thumbnail…

question-2

This bar chart displays the top 20 countries by population for the year 2010, using data from a CSV file hosted on GitHub. The visualization renders as an SVG using React and D3 v5, with scales created via `scaleBand` and `scaleLinear`, and axes rendered through custom `AxisBottom` and `AxisLeft` components. Population values are formatted using D3's `format` function, converting numeric values to abbreviated strings like "B" for billions. The chart includes interactive tooltips via SVG `<title>` elements, and styled ticks and marks with custom CSS classes.

Oct 25, 2024
Loading thumbnail…

activity 6_Task 1

This bar chart displays the population of 30 countries in 2020, sorted alphabetically along the vertical axis with horizontal bar lengths representing population values in billions. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and renders SVG rectangles via the `Marks` component. Data loads asynchronously from a GitHub-hosted CSV using `d3.csv`, with axis ticks formatted using `d3.format` and a hover tooltip provided by SVG `<title>` elements.

Oct 25, 2024
Loading thumbnail…

activity 6_Task 1

This chart displays the 2020 populations of 30 countries using a horizontal bar chart rendered with SVG in a React application. Population values are encoded as bar lengths along a linear scale, with countries listed on a categorical band scale. The visualization utilizes D3 v5 functions like `scaleBand`, `scaleLinear`, and `format` to handle scaling and tick labeling. Data is loaded from a remote CSV file using D3's `csv` function, and interactive tooltips are provided via SVG `<title>` elements.

Oct 25, 2024
Loading thumbnail…

budha

A dense, abstract composition of hundreds of randomly generated, brightly colored diamond polygons fills the SVG canvas, animated through nested array maps. Each polygon’s position, color, and rotation are computed via repeated `Math.random()` calls, creating a chaotic, generative pattern. React renders the structure, while a large embedded Buddha path is overlaid and scaled, merging algorithmic noise with a recognizable sacred figure. The black background and high opacity values produce a vibrant, psychedelic visual effect.

Oct 11, 2024