Skip to main content
Log in
L

LakshmiDeepikaPagadala@my.unt.edu

@Deepikadeepu0930·14 public vizzes

Loading thumbnail…

Task9_Q1

This example shows a pie chart of supermarket sales totals aggregated by product line, with a legend listing each category. It loads CSV data from a GitHub Gist, uses `d3.nest()` and `d3.sum` to aggregate totals per product line, and renders the chart with `d3.pie()` and `d3.arc()`. The visualization uses `d3.scaleOrdinal` with `d3.schemeCategory10` for colors, and SVG elements for the arcs and legend.

Apr 21, 2024
Loading thumbnail…

Task9&10_Tutorial

This interactive scatterplot animation cycles through the four Iris flower measurements (petal width, sepal width, petal length, sepal length) from the classic Iris dataset, updating the x-axis every few seconds while keeping sepal length on the y-axis. Data points are color-coded by species, with a legend, axis labels, and title rendered via SVG. The visualization uses the D3.js library (v6.7.0) with a custom `scatterPlot` module that leverages `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` for chart construction, while `setInterval` drives the animation.

Apr 15, 2024
Loading thumbnail…

Activity6_Task4

This bubble chart shows the correlation between average horsepower, torque, and highway MPG across 31 car makes, with each circle’s position encoding horsepower and torque, its radius encoding highway MPG, and its color representing make. The visualization uses D3 v7 with SVG rendering and interactive animations, including a tooltip that appears on mouseover to display the car make. The chart features a color legend for makes and a circle-size legend for MPG values, with axis labels and a title provided.

Apr 14, 2024
Loading thumbnail…

Activity6_Q3.6

This example displays a scatter plot of randomly generated data points, colored by category to distinguish two groups, with “Horse Power” on the x-axis and “Torque” on the y-axis. The code uses D3.js v7 to create an SVG chart, employing `d3.scaleLinear` for axes, `d3.scaleOrdinal` for color mapping, and `d3.axisBottom` and `d3.axisLeft` for ticks. It renders 50 circles with semi-transparent fills, demonstrating basic data binding and SVG generation within a single HTML file.

Apr 14, 2024
Loading thumbnail…

Activity6_Task3.2

This example shows a scatter plot of the Iris dataset, mapping sepal length to petal length and encoding species with distinct symbols. It uses D3 v7 modules such as `scaleLinear`, `scaleOrdinal`, `axisLeft`, `axisBottom`, and `symbol` to draw marks and axes. The visualization is built with modular ES6 imports for chart, axes, and legend components. Data is loaded asynchronously via `fetch` and parsed with `csvParse`, then rendered in an SVG that fills the window.

Apr 14, 2024
Loading thumbnail…

Activity6_Task3

This example presents a scatter plot of the Iris dataset, mapping petal length and petal width on the axes while coloring each point by species (setosa, versicolor, virginica). The visualization uses D3 v6 to load CSV data from a GitHub repository, apply linear scales via `d3.scaleLinear`, and render circles as SVG elements. Axis labels and styling are customized through D3's `axisLeft` and `axisBottom` helpers, with the plot sized to the full browser window.

Apr 14, 2024
Loading thumbnail…

Activity6_Q2.3

This example displays a stacked bar chart of the Iris dataset, showing the cumulative contributions of sepal and petal measurements for each of the three species. It uses D3 v7 to load the CSV data with `d3.csv`, then applies the `d3.stack()` function to create series for the four attributes. The visualization renders as SVG, with axes and a legend constructed using `d3.axisBottom`, `d3.axisLeft`, and a custom legend group.

Apr 14, 2024
Loading thumbnail…

Activity6_Q2.1

This example demonstrates a minimal D3.js setup within VizHub, displaying the text "Hello VizHub!" centered on the page. It shows how to import D3’s `select` function from the bundled library and a local ES6 module exporting a message string. The code uses `d3.select` to set the text content of a `div` element with the ID `message`. Styling comes from an external CSS file, and the page loads D3 v5 from a CDN via UNPKG.

Apr 14, 2024
Loading thumbnail…

Activity6_Task2

This stacked bar chart visualizes the distribution of IMDb movie ratings across six genres, with each bar segmented by rating ranges from below 5.0 to above 8.5. The chart uses d3.stack() to compute the layered proportions and d3.scaleOrdinal for color mapping, rendered as SVG rectangles with interactive tooltips that display exact percentages on hover. Data comes from a local CSV file, and axes are generated using d3.axisBottom and d3.axisLeft.

Apr 14, 2024
Loading thumbnail…

Activity6_Q1.2

A horizontal bar chart displays the top 20 countries by 2010 population, sourced from a CSV file loaded with `d3.csv`. React renders SVG rectangles whose widths are scaled linearly by population via `scaleLinear`, while `scaleBand` positions categorical country labels on the y-axis. Axis components use D3 tick formatting with `.2s` to abbreviate billions, and each bar includes a native SVG `<title>` tooltip showing the formatted value.

Apr 14, 2024
Loading thumbnail…

Activity6_Q1.1

This example uses a bar chart to show the population of ten countries in the year 2000, with each bar’s length mapped to population values that are formatted in billions. Built with React and D3 v5, it loads CSV data from a GitHub URL, then uses `scaleBand` for the categorical country axis and `scaleLinear` for the numeric population axis. The chart renders as SVG, with axis components and marks defined in separate local ES6 modules, and includes a tooltip on each bar via the `<title>` element.

Apr 14, 2024
Loading thumbnail…

Activity6_Task1

This bar chart visualizes the 2020 population estimates for the top 30 countries, sorted by country name. The horizontal bars are rendered as SVG rectangles using React, with the D3 library's `scaleBand` and `scaleLinear` functions handling the axis mappings. Data is loaded from a remote CSV file via the `d3.csv` function, and axis ticks and labels are generated with custom React components. The chart includes a fixed color scheme and a tooltip that displays the formatted population value.

Apr 13, 2024
Loading thumbnail…

Activity6_Task1

This example demonstrates a minimal D3.js setup in VizHub, displaying a centered text message ("Hello VizHub!") styled with large font size and aligned via CSS. It shows how to load D3 v5 through a CDN and use the `select` API to target an HTML element and set its text content. The code also highlights modern JavaScript features by importing a local ES6 module (`myMessage.js`) and defining a regular expression variable. The rendering approach relies on plain HTML DOM manipulation rather than SVG or canvas drawing.

Apr 10, 2024
Loading thumbnail…

Fork of Hello VizHub

This example demonstrates how VizHub integrates D3.js version 5 with local ES6 modules, producing a simple text display. It uses `import { select } from 'd3'` to select the `#message` div and set its content, while a separate `myMessage.js` module exports the string "Hello VizHub!" through the `message` constant. The code also includes a regular expression and CSS styling from `styles.css` that centers the text at a large font size.

Apr 10, 2024