V

vineelaramulapalli32

@vineelaramulapalli32·50 public vizzes

Loading thumbnail…

Reusable Scatter plot aSSIGNMENT

This interactive scatter plot visualizes healthcare data, plotting patient age against cholesterol levels with gender-based color coding (blue for male, pink for female). The visualization includes labeled axes, a title, and a legend, with a periodic redraw every five seconds. Built with D3.js, it uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs within a reusable `scatterPlot` function, rendering SVG elements. Data is loaded asynchronously via `csv` from a GitHub-hosted healthcare dataset, demonstrating a modular approach to creating configurable chart components.

Loading thumbnail…

Activity 7 Scatter Plot

This scatter plot visualizes customer data from a CSV file, showing the relationship between Age on the x-axis and Income on the y-axis. Each circle’s fill color encodes the customer’s Spending Score, with skyblue for low scores, lightgreen for medium scores, and orange for high scores. The visualization uses d3.csv to load and parse data, d3.scaleLinear for both axes, and d3.axisLeft and d3.axisBottom to render the chart. SVG circles are drawn with a fixed radius of 5 pixels, while labeled axes are added via SVG text elements.

Loading thumbnail…

Fork of Assignment2_Question

This horizontal bar chart shows the number of users for 50 applications, with each bar representing a single application sorted along the y-axis. The visualization is built with React and D3 v5, using `scaleBand` and `scaleLinear` to map application names and user counts to SVG rectangles. The data is loaded from a remote CSV file with `d3.csv`, and axes are rendered with custom React components containing D3 tick formatting via `d3.format`.

Loading thumbnail…

Network Graph

This network graph visualizes a social network of individuals and their friendships. Ten nodes represent people, and twelve links show connections, with a thicker line indicating a stronger friendship between "MY3" and "Sudha". The visualization uses a physics simulation to position the nodes, employing `d3.forceSimulation` with link, charge, collision, and center forces for a clear, spread-out layout. SVG rendering is used, and the code defines draggable nodes using D3's drag interaction, with a green arrow marker on each link to show direction. The data is loaded from a JSON file, and node colors are a simple light green.

Loading thumbnail…

Assignment6_Question7_Tree

This interactive family tree displays the Doe lineage as a hierarchical node-link diagram, with three generations from John Doe down to his grandchildren. The visualization uses D3.js v3 to render SVG boxes and connecting lines, with color-coded nodes indicating different family tiers. Animated transitions reposition the tree when nodes are clicked, and the layout automatically adjusts for depth and breadth. The tree structure is loaded from a JSON data file, while jQuery handles some interaction events alongside custom D3 zoom and drag behaviors.

Loading thumbnail…

Assignemnt2_Question6

This example displays an interactive world map using an equirectangular projection, with countries rendered as SVG paths and filled in light green. Users can zoom and pan the map via D3’s zoom behavior, while hovering over a country changes its fill color. The visualization uses `d3.geoPath` with `d3.geoEquirectangular` and `topojson.feature` to parse country boundaries from the world-atlas TopoJSON dataset. Hover interactions are styled with CSS, and the map’s ocean background is a sky-blue sphere path.

Loading thumbnail…

Bubble chart

A bubble chart visualizes the correlation between average weight, sugar content, and price for ten fruits. Each fruit is represented by a circle whose x-axis position maps weight, y-axis position maps grams of sugar, and radius encodes price in dollars. The chart uses D3.js v7 with SVG for rendering, employing `d3.scaleLinear` for axes and bubble size, `d3.scaleOrdinal` with a turbo color interpolation for fruit categories, and a custom tooltip on mouseover for identifying each fruit.

Loading thumbnail…

Scatter Plot

This scatter plot visualizes a synthetic IRIS dataset, categorizing each point by one of three categories using distinct colors (skyblue, lightgreen, orange). D3's `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs map the feature1 and feature2 values to the SVG canvas. The plot is generated from a local CSV file, and the code uses D3's `csv` data loader to parse the data before rendering the circles.

Loading thumbnail…

Monthly Users of Streaming Platforms

This visualization shows the monthly user counts for five streaming platforms across five months, using a stacked horizontal bar chart where each bar segment is colored by platform. The chart uses D3 v7 with an SVG rendering approach, applying `d3.stack()` to create the stacked data, `d3.scaleBand()` for the categorical month axis, and `d3.scaleOrdinal()` with a category10 color scheme for platform colors. Data is loaded from a CSV file via `d3.csv()`, with axes and labels drawn using `d3.axisBottom` and `d3.axisLeft`.

Loading thumbnail…

Fork of Scatter Plot with Shape

This example uses D3 v7 to render a scatter plot of the Iris dataset, mapping sepal length and petal length to the x- and y-axes and using different point shapes to encode the species of each flower. A legend communicates the shape-to-species mapping. The code loads data from a CSV via `fetch` and `d3.csvParse`, and builds the visualization using `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.symbolsFill`, and `d3.axisLeft`/`d3.axisBottom` for the axes.

Loading thumbnail…

Network Graph

This network graph visualizes a social network of ten friends named in a JSON data file, with links representing friendships weighted by a value. The visualization uses D3.js v6, with a force-directed simulation (`d3.forceSimulation`) combining link, many-body, collision, and center forces to position nodes, rendered as SVG circles with text labels. Interactions include node dragging and hover highlighting, with edges drawn as blue lines with arrow markers.

Loading thumbnail…

MuscleCars tree

A static hierarchical tree presents the genealogy of muscle cars, grouping models by manufacturer and placing variations like Hellcat and SRT as leaf nodes. Built with D3.js version 3, the visualization uses the `d3.layout.tree` API for layout and renders nodes as SVG rectangles with color-coded types, while links appear as curved paths with arrow markers. The animation is driven by a `duration` variable, and expandable nodes transform their position via `transition` using `duration` for smooth updates.

Loading thumbnail…

Assignment2_Question7_Maps

This example displays the text “Hello VizHub!” centered on a web page. It demonstrates a minimal D3.js setup, loading the library from a CDN and using the `select` API to target a div element and set its text content. The page also illustrates local ES6 module imports, with the message string defined in a separate `myMessage.js` file. Styling is handled via an external CSS file, setting the font size and alignment.

Loading thumbnail…

Assignment2_question6

This example displays a static map of the United States rendered as an SVG path. It extracts the country’s geometry from a TopoJSON dataset loaded from the world-atlas package, then projects it using `d3.geoAlbersUsa` and draws it with `d3.geoPath`. The map is fitted to a 960×500 viewport and appended to the page body via D3 v5.

Loading thumbnail…

Bubble chart

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG for various car makes. Each bubble's position is determined by horsepower (x-axis) and torque (y-axis), while its size encodes the highway MPG value. The chart uses a linear scale for positioning and a separate scale for bubble radius. Interactivity is provided through tooltips that display the car make on hover, using mouseover events. The visualization is rendered as an SVG, with a legend showing the MPG scale and a color-coded list of car makes. The code utilizes d3.csv for data loading and d3.scaleLinear for axis and size scaling.

Loading thumbnail…

IMDb Movie ratings

The visualization shows the percentage of IMDb ratings across six genres, with each horizontal bar segmented to represent five rating brackets from below 5.0 to above 8.5. Using d3.csv to load genre data, the chart employs d3.stack for stacked bars, d3.scaleBand for the genre axis, and d3.scaleOrdinal for color encoding. Hovering a segment reveals its exact percentage via a tooltip. The SVG canvas renders the chart with a legend and axis labels.

Loading thumbnail…

Assignment2_Question1

This example demonstrates basic D3.js text manipulation by displaying a static message in the center of the page. The visualization uses D3 v5’s `select` function to target a DOM element with the ID "message" and sets its text content to a localized string imported from a separate ES6 module. The message text is defined in `myMessage.js` and styled with CSS for large, centered typography. The code showcases both loading D3 from a CDN and importing local ES6 modules within a simple HTML structure.

Loading thumbnail…

Activity 7 Scatter Plot

A D3.js scatter plot visualizes the Iris dataset, mapping petal length and petal width to the x- and y-axes, with each point colored by species (setosa, versicolor, virginica). The plot uses SVG rendering and the `d3.csv`, `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` functions to load the data, set scales, and draw axes. The title is styled in red, and axis labels are set in green using SVG `text` elements.

Loading thumbnail…

MuscleCars tree

This example visualizes a hierarchical tree of classic muscle car models, from manufacturers like Ford and Dodge down to specific trims such as the Hellcat and SRT. Built with D3 v3 and rendered as SVG, it animates node expansions and collapses on click, using a custom tree layout with colored nodes and arrow-marked links. The tree data is loaded from a local JSON file, and the visualization includes zoom and drag behavior via `d3.behavior.zoom`.

Loading thumbnail…

Activity 8 Country

This visualization displays a map of India using geographic data from the world-atlas TopoJSON dataset. The code extracts India’s geometry with `topojson.feature` and projects it using `d3.geoMercator` with `.fitSize` to center the country within a 960×500 SVG canvas. A single path is drawn via `d3.geoPath`, rendering India's borders as a simple, unadorned silhouette. The example demonstrates basic map projection and TopoJSON handling in D3 v5, using SVG for output.

Loading thumbnail…

BMI by Age

This visualization displays the average body mass index (BMI) segmented by age using a binned area chart. The code loads data from a CSV source, calculates BMI values, and renders bars with the d3.bin and d3.sum APIs. It utilizes d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.area with curveBasis to construct the SVG output. Axes include gridlines and rotated labels, with the chart title and axis annotations styled in the d3.v7 framework.

Loading thumbnail…

Transforming Data

This example demonstrates how to transform the classic Iris dataset by loading a CSV file and calculating the average sepal length for each species. The visualization displays the resulting summary as a JSON-formatted list of objects, showing the species name alongside its computed average. The code uses D3 v7 APIs including `csvParse` to parse the data, `flatRollup` to group and aggregate values, and `sum` to calculate totals. It also showcases ES6 module imports, a fetch-based data-loading pattern, and a state management system for handling asynchronous data retrieval.

Loading thumbnail…

Activity 6

This example displays the first ten rows of a remote CSV dataset as JSON text within an HTML page. It loads data from a GitHub-hosted CSV file and presents it in a black, styled preformatted block. The code imports only the `select`, `csv`, and `csvFormat` functions from D3 v5, and it renders output as SVG elements in the body. The visualization is minimal, focusing on raw data inspection rather than graphical representation.

Loading thumbnail…

Activity 6

This example loads a CSV dataset from a GitHub gist and displays the first ten rows as a JSON-formatted string in a black `<pre>` block. It uses D3 v5’s `csv` method to fetch and parse the data, then `json.stringify` to format the records for display. The SVG element in the HTML contains a base64-encoded JPEG image rendered as a pattern fill, while the Vue-based page styles the output with custom font and background colors. The total file size is calculated using `csvFormat` and `Math.ceil`.

Loading thumbnail…

Network Graph

This example shows a social network graph of ten people connected by friendship links, with nodes labeled by name and sized uniformly. It uses d3.forceSimulation with forceLink, forceManyBody, forceCollide, and forceCenter to position the nodes, while SVG circles and text render each person. Links are drawn as blue lines with arrow markers, and the graph is fully interactive—nodes can be dragged via d3.drag, and hovering highlights them with a black border. The data comes from a JSON file specifying relationships and node groups.

Loading thumbnail…

Activity 8 Map

This example displays an interactive world map using a light green landmass and sky blue ocean. It loads geographic data from the world-atlas TopoJSON collection, converts it to GeoJSON with the `feature` function, and renders countries via `d3.geoPath` and `d3.geoEquirectangular`. Users can pan and zoom using D3’s `zoom` event, while hovering highlights countries in maroon through CSS.

Loading thumbnail…

Area Chart Activity 8

This area chart visualizes the cost of sales from 2000 to 2013, plotting yearly values as a smooth curved line with a light green filled region beneath it. The chart uses D3 v5 with SVG rendering, employing `scaleTime` for the x-axis, `scaleLinear` for the y-axis, and `area()` with `curveBasis` to generate the filled path. Data is loaded from a CSV file via `d3.csv`, with year values parsed as dates and costs converted to numbers. Axis labels and tick formatting are customized, including red tick text and an orange axis label.

Loading thumbnail…

linechart

This line chart visualizes the cost of sales from 2000 to 2013, using a dataset loaded from a CSV file that pairs each year with a numeric cost value. The SVG chart, built with D3 v7, uses `d3.scaleBand` for the yearly x-axis and `d3.scaleLinear` for the cost y-axis. A single light-green path stroke is drawn via the `d3.line()` generator, with axis labels and ticks styled in red, showing a simple trend of fluctuating costs across the period.

Loading thumbnail…

Activity_8_Task8

This example displays a large, centered "Hello VizHub!" message rendered in the browser, demonstrating basic D3.js usage and ES6 module imports. The code imports the `select` function from D3 v5 and a `message` string from a local `myMessage.js` module, then sets the text content of the `#message` div. Styling is applied via an external `styles.css` file, which centers the text and sets its font size to 12em, while the HTML page loads D3 from a CDN before executing the bundled JavaScript.

Loading thumbnail…

Activity_8_Taks2

This example renders a simple message, “Hello VizHub!”, centered on the page. It demonstrates basic D3.js usage by selecting a DOM element and setting its text content. The code imports the `select` function from D3 v5 via a CDN and also imports a local ES6 module (`myMessage.js`) that exports the message string. The display is styled with a large font size using a separate CSS file. The visualization shows how to combine local modules, external libraries, and styling in a single VizHub project.

Loading thumbnail…

Pie Chart

This pie chart visualizes the count of students from each major at UNT, with each slice colored and labeled with its proportion in thousands. The chart is rendered as an SVG using D3 v5, employing `pie()` and `arc()` to generate the segments, while `scaleOrdinal` maps colors to data categories. Data is loaded asynchronously from a CSV file via `d3.csv`, and legends on the right display major names alongside their student counts.

Loading thumbnail…

Activity_8

This example displays the text "Hello VizHub!" centered on the page using a large font size. It loads D3 version 5 from UNPKG and imports the `select` function from the D3 library to set the text content of an HTML div element. The message itself is imported from a local ES6 module, demonstrating modular code organization alongside CDN-based library loading.

Loading thumbnail…

Reusable Scatter plot Activity 8

This interactive scatter plot animates through different pairings of sepal and petal measurements from the classic Iris dataset, cycling the x-axis variable every few seconds. The visualization color-codes points by species (setosa, versicolor, and virginica) and includes a legend and axis labels. Built with D3 v6, it uses `scaleLinear`, `axisBottom`, `axisLeft`, and `csv` for data loading, alongside a reusable `scatterPlot` module. SVG circles render the marks, with `setInterval` driving the animation and `selectAll`/`join` managing the updating elements.

Loading thumbnail…

Fork of Hello VizHub

A simple demonstration of VizHub's module system and D3 integration shows a centered "Hello VizHub!" message rendered in large text. The example loads D3 v5 from UNPKG and uses the `select` function to set the text content of an HTML div. It also imports a local ES6 module, `myMessage.js`, which exports the message string, highlighting how both external libraries and local modules can be combined in a single visualization.

Loading thumbnail…

Reusable Scatter plot Activity 8

This animated scatter plot visualizes the Iris flower dataset, showing the relationships between petal and sepal measurements across three species. The visualization cycles through different column pairings on the x-axis every few seconds, with points colored by species type. Built with D3 v6, it uses the scatterPlot reusable function to manage scales and axes, while the main script handles animation through setInterval. The SVG rendering includes a legend, axis labels, and a title, with data loaded from a CSV file hosted on GitHub.

Loading thumbnail…

Reusable Scatter plot Activity 8

This interactive scatter plot visualizes the Iris dataset, showing sepal and petal measurements as colored circles representing three flower species. The visualization cycles through different variable pairings on the axes using a timer, updating the chart every few seconds. Built with D3.js version 6, the code uses `csv()` to load data, `select()` and `join()` for SVG rendering, and `setInterval()` to trigger axis transitions. The reusable `scatterPlot()` function manages the chart layout, while custom legend markers and axis labels are appended dynamically.

Loading thumbnail…

Bubble chart

This bubble chart shows the correlation between average horsepower (x-axis), torque (y-axis), and highway MPG (bubble size, color) for various car makes. The visualization uses a categorical color scale generated with `d3.interpolateTurbo` for make identification, with axes created via `d3.axisBottom` and `d3.axisLeft` from `d3.scaleLinear`. Hovering over a circle reveals a tooltip with the vehicle make, styled via CSS and positioned using SVG event coordinates. Data is loaded from a CSV file using `d3.csv`. A legend maps bubble size to MPG values and color-coded dots identify each brand.

Loading thumbnail…

Activity7_Task4

This interactive example demonstrates D3's capability to update DOM content using ES6 module imports. It displays a message in a centered, large-font div using D3's select and text methods. The visualization loads D3 v5 from UNPKG and imports a custom message from a local ES6 module, showcasing how to combine external libraries with modular JavaScript code.

Loading thumbnail…

Fork of Scatter Plot with Shape

This example uses D3 v7 to render a scatter plot of the Iris dataset, mapping sepal length and petal length to the x- and y-axes and using different point shapes to encode the species of each flower. A legend communicates the shape-to-species mapping. The code loads data from a CSV via `fetch` and `d3.csvParse`, and builds the visualization using `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.symbolsFill`, and `d3.axisLeft`/`d3.axisBottom` for the axes.

Loading thumbnail…

IMDb Movie ratings

This visualization displays the distribution of IMDb movie ratings across different genres using a horizontal stacked bar chart. The chart shows the proportion of movies falling into five rating categories, from "below 5.0" to "above 8.5," for genres including Documentary, Drama, Comedy, Romance, Animation, and Action. The implementation leverages D3.js v7, loading data from a local CSV file, and uses functions such as `d3.stack()` for data transformation, `d3.scaleLinear()` and `d3.scaleBand()` for axis scaling, and `d3.axisBottom()` for rendering. Interactive mouseover events display tooltips with exact percentages.

Loading thumbnail…

Fork of Activity 7

This example shows a horizontal bar chart of the top 20 countries by 2020 population, using a React-based SVG rendering. It maps the `Population` values to bar widths and `Country` names along the left axis, formatting population figures with D3’s `format('.2s')` to display billions. The code loads CSV data via `d3.csv`, then scales the bars using `scaleBand` and `scaleLinear`. Axis components are built manually with React, and tooltips are provided through SVG `<title>` elements. The chart’s styling includes blue tick lines, green bars, and a Poppins font.

Loading thumbnail…

Activity 7

This example shows a horizontal bar chart of population data for 20 countries in 2020, sourced from a CSV file. The chart uses React with D3 v5, employing `scaleBand` and `scaleLinear` for scales and rendering bars as SVG rectangles. The code loads data via `useData`, formats tick labels with `format('.2s')`, and includes axis components with blue tick lines and green bars, with a title tooltip on each rectangle.

Loading thumbnail…

Fork of Activity 7

This chart shows the population of twenty countries in 2020, sorted alphabetically along the y-axis. An interactive SVG rendering uses horizontal bar lengths to encode each value. The React app loads CSV data from a remote GitHub source, then uses D3 v5's `scaleBand` and `scaleLinear` to position elements. The code defines custom `AxisBottom`, `AxisLeft`, and `Marks` components, relying on `d3.csv` for parsing and `d3.format` for tick labels.

Loading thumbnail…

Activity 7

This example displays a horizontal bar chart of the top 20 countries by 2020 population, sourced from a CSV file. It renders SVG elements using React and D3 v5, with axes generated by custom AxisLeft and AxisBottom components that use d3.scaleBand and d3.scaleLinear. Population values are transformed from the '2010' column and formatted with d3.format. The visualization uses a green mark color and a Poppins font, with a loading state shown while data is fetched.

Loading thumbnail…

Fork of Hello VizHub

A simple demonstration of VizHub's module system and D3 integration shows a centered "Hello VizHub!" message rendered in large text. The example loads D3 v5 from UNPKG and uses the `select` function to set the text content of an HTML div. It also imports a local ES6 module, `myMessage.js`, which exports the message string, highlighting how both external libraries and local modules can be combined in a single visualization.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

A fork of a fork of a fork of a fork of a fork of Buddha in colors displays a dense, overlapping web of semi-transparent polygons layered over a stylized Buddha path. The React application renders an SVG graphic, using nested array maps to generate hundreds of polygon elements with random positions, colors, and rotations. The underlying Buddha figure, defined as an SVG path, is scaled and translated within the composition, with the polygon overlay creating a chaotic, colorful visual effect.

Loading thumbnail…

Tenth

This example displays the text “Hello D3 version 7” centered on a blank page at an enormous font size. The work uses the D3 library, specifically the `select` function, to target the HTML `body` element and set its text content. The page loads D3 v7 from a CDN and runs a bundled JavaScript file that performs the single text-rendering operation. The visualization is a minimal demonstration of D3 version 7’s basic DOM manipulation capabilities.

Loading thumbnail…

Transforming Data

This example summarizes the classic Iris flower dataset by grouping measurements by species and displaying the average sepal length for each in a simple preformatted text output. The visualization demonstrates D3.js data transformation workflows by loading a CSV file with `d3.csvParse`, converting string values to numbers, and then using `flatRollup` with `sum` to calculate group means. The resulting summary is rendered as JSON text in the page, showing how raw tabular data can be aggregated into concise, readable statistics.

Loading thumbnail…

Transforming Data

The visualization loads smartphone data from a CSV file and groups it by mobile model name, calculating the average price per model. It demonstrates data transformation with D3.js functions like `csvParse`, `flatRollup`, and `sum`, then outputs the aggregated summary as formatted JSON text within the container. The example highlights modular ES6 imports and asynchronous data fetching via `fetch`, rendering results in a simple text-based display using D3's `select` and `join` operations.

Loading thumbnail…

Fork of Fork of Hello VizHub

This example demonstrates the foundational workflow of VizHub, showing how a web page loads D3 and integrates local ES6 modules. It uses D3 v5, imported via `select` from the `d3` package, to set the text content of a `div` element with the ID `message`. The text originates from a separate local module, `myMessage.js`, which exports the string "Hello VizHub!". The rendering is purely DOM-based, with an HTML file linking a CDN-hosted D3 script and a bundled JavaScript file, plus a CSS stylesheet to center the output.