archanagoli@my.unt.edu

@ArchanaGoli·21 public vizzes

Pie Chart_ICE7_ArchanaGoli

This pie chart visualizes the distribution of kernel types (Kama, Rosa, Canadian) from a dataset loaded via a remote URL. It shows the proportional counts of each category as colored slices, with a dynamically generated legend displaying percentages. The chart uses the Chart.js library on an HTML canvas, fetching data from a gist file and parsing comma-separated rows. The code sets fixed canvas dimensions, disables responsiveness, and computes category frequencies by iterating through the data.

Mar 28, 2024

Loading thumbnail…

Pie Chart_Archana Goli

This pie chart shows the distribution of kernel types (Kama, Rosa, and Canadian) in a dataset, with each slice’s percentage displayed in a custom legend below the canvas. The chart is rendered using the Chart.js library on a fixed-size canvas element, which reads data from a remote text file via the Fetch API. It counts occurrences of each kernel type from the CSV rows, then draws the pie with semi-transparent colors and a disabled default legend in favor of a dynamically generated HTML legend.

Mar 28, 2024

Loading thumbnail…

Reusable scatter plot_Archana Goli

This interactive scatter plot visualizes the Iris dataset, plotting kernel measurements like perimeter and length against each other. The visualization dynamically cycles through different x-axis attributes every two seconds, showing how the data distribution changes. The scatter plot uses distinct shapes for each species, with squares, triangles, and circles representing different plant types. Built with D3.js, the example demonstrates a reusable chart module that handles axis generation, scaling, and responsive SVG rendering with animated transitions.

Mar 28, 2024

Loading thumbnail…

Line Chart_ICE-7_Archana Goli

This example displays the average daily temperature for January 2024 as a red line chart. The chart’s x-axis maps date values using a time scale, while the y-axis uses a linear scale for the temperature in degrees Celsius. The visualization is built with D3 version 5, using functions such as `scaleTime`, `scaleLinear`, `axisLeft`, `axisBottom`, and `line` to generate the SVG output. Data is loaded asynchronously from a CSV file hosted on GitHub, with date and temperature fields parsed before rendering. The chart includes a title, labeled axes, and grid lines.

Mar 28, 2024

Loading thumbnail…

Area Chart_ICE-7_Archana Goli

This area chart displays daily average temperatures for January 2024, using a smooth curved line to connect temperature values over time and a light blue filled area beneath the line to emphasize the trend. The visualization relies on D3.js v5, specifically employing `scaleTime` and `scaleLinear` for the axes, `line()` and `area()` generators with `curveBasis` for smooth paths, and `axisBottom`/`axisLeft` for labeled ticks. Data is loaded from a CSV file via `d3.csv`, with dates parsed as `Date` objects and temperature values converted to numbers, while the SVG rendering uses explicit margins and gridlines styled through CSS.

Mar 28, 2024

Loading thumbnail…

Area Chart_ICE-7_AG

This area chart visualizes the cost of sales from 2000 to 2013, plotting average temperature on the x-axis against date on the y-axis. The chart combines a smooth black line generated with d3.line and curveBasis, with a yellow filled region created using d3.area. Axes are rendered via d3.axisLeft and d3.axisBottom with gridlines. Data loads from a CSV file using d3.csv, and scales are set with d3.scaleTime and d3.scaleLinear. The SVG output is rendered within a React framework using D3 v5.

Mar 28, 2024

Loading thumbnail…

Area chart_ICE-7_Archana Goli

This area chart displays the daily average temperature in January 2024. The visualization combines a smoothed line and a semi-transparent filled area beneath it, with both axes labeled and grid lines provided. Built with D3 v5, the code uses `scaleTime` and `scaleLinear` for scaling, `axisBottom` and `axisLeft` for axes, and `curveBasis` for smoothing the line and area paths. Data is loaded from a remote CSV via `csv()`, and the chart is rendered as SVG.

Mar 28, 2024

Loading thumbnail…

ICE-7 Area Chart_Archana Goli

This interactive area chart displays daily average temperatures in January 2024, combining a filled area with a black line overlay to emphasize temperature trends over time. The visualization uses d3.csv to load external data, d3.scaleTime and d3.scaleLinear for axes, and d3.area with d3.curveBasis to generate the filled region, while d3.line draws the superimposed path. Rendered as SVG, the chart includes labeled axes with gridlines and a semi-transparent purple fill, built with d3.v5 and styled via CSS.

Mar 28, 2024

Loading thumbnail…

Reusable scatter plot_Archana Goli

This interactive scatter plot displays the Penguins dataset, with each species (Adelie, Chinstrap, Gentoo) represented by a distinct shape—square, triangle, or circle—positioned by body mass and culmen length. The visualization cycles through four numerical attributes every two seconds, updating the x-axis accessor to explore different correlations. Built with D3.js (v6.7.0), the reusable chart component uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`, with SVG paths and a two-second `setInterval` for animation, loading data from a GitHub Gist CSV.

Mar 27, 2024

Loading thumbnail…

Reusable Scatter Plot Archana Goli

This interactive scatter plot visualizes physical measurements of wheat kernels, plotting perimeter against kernel length with circular marks colored by species. Built as a reusable D3.js module using `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom`, it cycles through four variables every two seconds, updating the x-axis and point positions via `setInterval`. Data loads from a remote CSV file using `d3.csv`, with SVG rendering and smooth transitions between attribute mappings.

Mar 27, 2024

Loading thumbnail…

Reusable Scatter plot Archana Goli

This reusable D3.js scatter plot visualizes the dimensions of wheat kernels, with each circle representing a sample. The plot cycles through four variables—Perimeter, Kernel_Width, Area, and Kernel_Length—on the x-axis every two seconds, while the y-axis remains Kernel_Length. Built with D3’s `scaleLinear`, `axisLeft`, and `axisBottom` APIs, the SVG visualization updates dynamically via a `setInterval` function. The code loads CSV data from a GitHub gist and renders animated, resizable scatter plots based on the browser window’s dimensions.

Mar 27, 2024

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This fork of the Iris Dataset scatter plot cycles through four flower measurements every two seconds, animating which dimension appears on the x-axis while sepal length stays fixed on the y-axis. Built with D3 v6, it uses `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `selectAll` to render SVG circles and axes. The reusable chart pattern exposes setter methods like `xValue` and `radius` for configuration. Data loads from a CSV via `csv()` and is parsed to numbers; a `setInterval` triggers re-renders to switch columns.

Mar 27, 2024

Loading thumbnail…

ICE-6 Country Sales Bar Chat

This example shows a horizontal bar chart of sales figures for the top ten countries from a CSV dataset. Each green bar represents total sales per country, with axes labeled and tick marks rendered. The code uses React with hooks to manage loading data via d3.csv, and d3.scaleBand and d3.scaleLinear for positioning. It renders SVG elements directly in JSX, constructing the chart with d3’s scale functions and max helper. The dataset is fetched from a GitHub gist, and the layout includes custom margins for the left-aligned country names.

Mar 21, 2024

Loading thumbnail…

ICE-6 Yearly Sales Scatter Plot

A scatter plot displays yearly sales data as steelblue circles, with orange highlighting on hover. The chart maps the Year and Sales fields from a CSV file onto linear scales, with axes labeled accordingly. Built with D3 v7 in a React environment, the visualization uses `d3.csv` to load data, `scaleLinear` and `extent` for scaling, and `axisBottom`/`axisLeft` for axis generation, rendered as SVG circles sized at a fixed radius.

Mar 21, 2024

Loading thumbnail…

Fork of Population BarChart (React & D3)

This example shows the ten most populous countries in a horizontal bar chart, ordered by their sales values. The chart uses React for component structure and D3 v5 for data loading and scales, specifically `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. The data is fetched as CSV from a GitHub gist, and the SVG rendering displays tick lines, tick labels, and green rectangles for each bar. The visualization centers itself within the viewport and includes a distinct left margin for country labels.

Mar 21, 2024

Loading thumbnail…

Fork of Fork of Bar Chart - ICE 6

This example visualizes the top 10 countries by sales as a horizontal bar chart, using a green-to-orange linear gradient to fill each bar. The chart is built with React and rendered as SVG, using D3 v6 scales (`scaleBand` and `scaleLinear`) to map country names and sales values to pixel positions. Data is loaded from a remote CSV file, and axis ticks are generated with `xScale.ticks()`, with both axis labels and bar values styled via CSS.

Mar 21, 2024

Loading thumbnail…

Fork of Bar Chart - ICE 6

This horizontal bar chart displays movie budgets in millions of dollars, with each bar’s length encoding the budget value and the y-axis listing movie titles. It uses d3.csv to load the data, d3.scaleLinear and d3.scaleBand for scales, and d3.axisLeft/d3.axisBottom for axes. The SVG rendering applies a linear gradient fill to bars and red axis labels. The chart is built with D3 v6 and includes a formatted x-axis tick label that abbreviates large numbers with a "B" suffix.

Mar 21, 2024

Loading thumbnail…

ICE 5-Supermarket Data

This example shows a summary of a supermarket sales dataset, displaying the file size, row count, and column count of the loaded CSV data. It also includes a static SVG image of a weather icon as a visual accent. The code uses D3 v7’s `d3.csv` to fetch and parse the data from a remote GitHub URL, then writes the computed metrics into a styled `pre` element using the DOM API. The page is styled with inline CSS, using orange and yellow backgrounds for emphasis, and relies on a plain HTML structure without React components despite the framework metadata.

Mar 7, 2024

Loading thumbnail…

Fork of HTML Starter

This example shows a simple data-summary page for the top 100 actors, displaying the file size, row count, and column count of a CSV dataset. It uses D3 v7’s `d3.csv` to fetch and parse the data from a GitHub gist URL, then formats the summary text with `d3.csvFormat` to calculate the byte size. The page also embeds a static SVG image and applies basic CSS styling to the heading and message container. The visualization focuses on text-based feedback rather than graphical charts, relying on D3’s parsing and string-handling methods.

Mar 6, 2024

Loading thumbnail…

Fork of ICE-5: Welcome to ICE-5 Data visualization

This example displays a simple data summary for the Top 100 actors dataset, presenting the file size, row count, and column count in a styled `<pre>` element. It loads a remote CSV file using D3 v7’s `d3.csv` method, then computes the formatted string length with `d3.csvFormat` to estimate kilobytes. The page also embeds an SVG image directly. The visualization primarily serves as a lightweight demonstration of fetching and parsing tabular data, with basic CSS styling for typography and background colors, rather than a complex chart.

Mar 6, 2024

Loading thumbnail…

Fork of Let's make a face with D3.js!

A fork of the “Make a face with D3.js” tutorial, this example draws a cartoon duck from basic SVG shapes—ellipses, a polygon, circles, and lines—positioned around a 960×500 canvas. It demonstrates fundamental DOM manipulation with D3 v5, using `select` to target the SVG and chained `.append` and `.attr` calls to build the body, head, beak, eyes, wings, and legs. The code relies on explicit pixel coordinates and fixed dimensions rather than data binding, rendering a static, yellow duck with orange beak, wings, and thicker legs.

Feb 27, 2024