C

ChaturyaAkhilaPallem@my.unt.edu

@chaturyaakhilapallem·18 public vizzes

Loading thumbnail…

Fork of ICE5 - chaturya d3.js parsing

This example presents a dual-panel bar chart comparing BMI and height-weight data for individuals. The left panel shows a single bar per person representing BMI, while the right panel displays paired bars for height and weight. Data is loaded from a remote CSV file using `d3.csv`. The visualization uses `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the numeric y-axes, with axes rendered via `d3.axisBottom` and `d3.axisLeft`. The React component manages state with `useState` and `useEffect`, and output is rendered as SVG.

Loading thumbnail…

AREA PLOT pca

This area chart visualizes BMI values for individuals, with each point color-coded and interactive. The chart uses D3.js v7 to fetch and parse CSV data from a GitHub gist, then renders an SVG area path and circles representing BMI readings. Users can hover over any data point to see a tooltip with the precise BMI value, which also changes the dot’s color and size. The visualization includes labeled axes for Individuals and BMI, with a light green fill for the area and responsive hover effects.

Loading thumbnail…

LINE PLOT pca

This line plot visualizes the Body Mass Index (BMI) values of individuals, with each person’s name on the x-axis and their corresponding BMI on the y-axis. The chart includes interactive data points that display a tooltip with the person’s name and BMI when hovered over. Built with D3 v7, the visualization uses `d3.csvParse` to load data from a remote CSV file, `d3.scaleBand` and `d3.scaleLinear` for axes, and `d3.line` to generate the connected path. The SVG rendering includes labeled axes and circle markers, with tooltips implemented using D3’s event handling.

Loading thumbnail…

PIE CHART pca

This example shows the distribution of BMI values from a loaded CSV dataset, categorizing individuals into underweight, normal weight, overweight, and obese groups as a pie chart. It uses D3 v7 to fetch and parse the CSV, compute category counts and percentages, and render the chart as SVG with a color scale and legend. The chart includes an interactive tooltip and highlights the proportion of each category, with the pie arc drawn using `d3.arc` and data bound through `d3.pie`.

Loading thumbnail…

SCATTER PLOT 2

This scatter plot visualizes the relationship between height and weight, with each point colored steelblue and displaying BMI details on hover via a tooltip. Built with D3.js v7, it uses `d3.scaleLinear` and `d3.axisBottom`/`d3.axisLeft` to map the quantitative axes, with circles representing data points. The SVG rendering includes axis titles and a 24px plot title, while interactive mouseover events update a positioned tooltip div. The reusable `createScatterPlot` function demonstrates a modular approach to chart construction.

Loading thumbnail…

CITY ATTRIBUTES

This visualization uses a city attributes dataset to display the geographic distribution of cities in a scatter plot, plotting longitude against latitude as steelblue circles. It then presents a bar chart that aggregates the data by country, showing the count of cities per nation using D3.js’s `d3.rollup` for grouping and `scaleBand`/`scaleLinear` for axes. The SVG rendering relies on D3 v7, with both charts generated from a CSV file fetched via `d3.csv`. Axes are added using `d3.axisBottom` and `d3.axisLeft`, while the bar heights reflect the computed country counts.

Loading thumbnail…

Fork of project-TIME SERIES AVERAGE WIND DIRECTION FOR ALL CITIES(AREA CHART)

This visualization displays the average wind direction across all cities as a time-series area chart, with the y-axis fixed from 0 to 360 degrees to represent compass directions. It shows how the mean wind direction changes over time, with circles marking individual data points and a tooltip revealing the exact date and wind direction on hover. The chart uses D3 v7’s `d3.area` and `d3.scaleTime` functions to render the area shape and time axis, while `d3.axisBottom` and `d3.axisLeft` add labeled axes. Data is loaded from a CSV via `d3.csv`, parsed with `d3.timeParse`, and averaged across city columns. The visualization also computes the highest, lowest, and most consistent wind direction values from the dataset.

Loading thumbnail…

project-TIME SERIES AVERAGE WIND SPEED FOR ALL CITIES(LINE CHART)

This line chart visualizes the average wind speed for a single city, Vancouver, over time, with each data point plotted by date and speed. The visualization uses D3.js v7 to render an SVG line chart, with circles marking individual data points that reveal a tooltip on hover showing the exact date and wind speed. The chart is generated from a CSV file loaded from a GitHub gist, and the axes are labeled to indicate date and wind speed units, while the code applies d3.scaleTime for the x-axis and d3.scaleLinear for the y-axis.

Loading thumbnail…

project line chart

This example shows a temperature area chart over time, with a filled region highlighting the variation in temperature across dates. The visualization uses an SVG rendered through D3 v7, with a time-scaled x-axis and a linear y-axis. It loads CSV data from a remote gist, parses dates and numeric values, and draws the area using `d3.area` with a steelblue fill. Axes are added via `d3.axisBottom` and `d3.axisLeft`, and the chart is sized within a fixed margin and viewport. The data source is a temperature dataset, and the rendering is fully SVG-based.

Loading thumbnail…

SCATTER PLOT

A scatter plot displays the relationship between height and weight, with each point colored by BMI using the Viridis color scale and a colorbar legend. The code fetches a CSV dataset from a GitHub gist and parses it with PapaParse, then maps the Height (cm), Weight (kg), and BMI columns to create a Plotly.js trace. The plot is rendered in a div with the ID “scatter-plot” using `Plotly.newPlot`, specifying axis titles and a chart title. This example demonstrates how to load external data and create an interactive, color-encoded scatter plot with minimal configuration.

Loading thumbnail…

SCATTER PLOT by chaturya

The visualization displays a dual-panel bar chart comparing BMI alongside height and weight measurements for individuals loaded from a CSV dataset. The left panel renders BMI values as a single set of rounded bars, while the right panel shows grouped bars for height and weight side by side. Built with React and D3 v5, it uses `d3.csv` to parse the data, `scaleBand` and `scaleLinear` to map categorical names and continuous values, and `axisBottom`/`axisLeft` to generate axes. The chart encodes the quantitative channels through bar lengths, with distinct colors differentiating height and weight in the second panel.

Loading thumbnail…

SCATTER PLOT by chaturya

This dual-panel chart compares BMI against height and weight across individuals using a bar chart layout. The left panel displays BMI values as green bars, while the right panel shows height and weight as paired orange and blue bars, respectively. Built with React and D3, the visualization uses `scaleBand` and `scaleLinear` for axes, with `csv` loading data from a GitHub-hosted BMI dataset. Custom axis groups rotate x-axis labels for readability, and rounded bar corners add polish. The SVG rendering clearly contrasts the three metrics, though the title in the provided code does not match the requested scatter plot description.

Loading thumbnail…

Fork of Simple Scatter Plot

This example visualizes the Penguin dataset using a scatter plot that maps two numerical variables onto x- and y-axes. It leverages D3's `scaleLinear`, `extent`, and axis functions to create scales and render axes. The code draws a background rectangle, then places circles with fixed radius and opacity, using the `xValue` and `yValue` accessors to position each point. The plot includes axis labels via the `@curran/axis-labels` helper, making the data relationships clear.

Loading thumbnail…

ICE5 - chaturya d3.js parsing

This example shows a winter-themed SVG scene featuring a snowman built from geometric shapes, alongside a text panel that displays debug information about a CSV file. The visualization uses D3.js v7 to parse a remote CSV dataset of CSS colors via `d3.csv`, then reports the file size, row count, and column count in the DOM. The snowman is constructed entirely with SVG primitives—circles, rectangles, and polygons—appended through D3 selections, with styling controlled by CSS classes. The page also includes decorative elements like clouds and a river, all rendered within an 800×600 SVG viewport.

Loading thumbnail…

BMI Bar Chart

This bar chart displays the top 10 highest BMI values from a local dataset, ranking individuals by their body mass index in descending order. The visualization uses D3.js with `scaleBand` and `scaleLinear` to map names and BMI values to the x and y axes, respectively. The code imports the data from `bmiData` and renders it as an SVG, with each bar’s height proportional to the BMI value. Axes and labels are added using the `@curran/axis-labels` library, and the chart is designed to fit the container’s dimensions.

Loading thumbnail…

BMI Bar Chart

This bar chart displays the total population estimates for the top 10 countries by population, using data from the UN population estimates. The visualization uses D3.js with `scaleBand` and `scaleLinear` to map country names to bar positions and population values to bar heights, while `axisLeft` and the `axes` utility from `@curran/responsive-axes` render the axes. The chart highlights a light gray inner rectangle behind the bars to separate the plotting area, and it sorts the data in descending order using `descending` to show the most populous countries first.

Loading thumbnail…

Bar Chart-BMI

This example visualizes the Body Mass Index (BMI) of ten individuals from a CSV dataset, using a bar chart to compare each person’s BMI value. The chart shows the BMI for each name, with bars representing the numeric BMI values. The visualization is built with D3.js v7, rendering SVG elements. It uses `d3.scaleBand` for the categorical x-axis and `d3.scaleLinear` for the y-axis, with `d3.axisBottom` and `d3.axisLeft` to display the axes. The data is loaded from the provided CSV file, and each bar’s height reflects the BMI, colored in steel blue.

Loading thumbnail…

ICE-5 pchaturyaakhila

This example demonstrates loading and parsing CSV data with D3.js, displaying a summary of the dataset’s size in kilobytes, row count, and column count. The page also shows a hand-drawn-style SVG illustration of a character and stars. It uses d3.csv to fetch a remote gist, d3.csvFormat to calculate data size, and updates the DOM via textContent. The interface is styled with a green background and centered text.