aniteshterala2000

@aniteshterala2000·29 public vizzes

Network Graph

A social network graph displays seven individuals connected by friendship links, with each node labeled by name and rendered as a large green circle. The visualization uses d3.forceSimulation with forceLink, forceManyBody, and forceCollide to position nodes, while SVG circles and lines represent the network. Nodes are draggable and highlight on hover, with the data loaded from a local graph.json file containing node and link objects.

Jul 22, 2023

Loading thumbnail…

Fruits

A hierarchical tree visualization displays fruit categories and their subtypes, with nodes colored by type and connected by labeled, directional links. The D3 v3 layout computes node positions, while SVG shapes and CSS styles render the interactive diagram. Users can click nodes and zoom or drag the view, with tooltips showing additional node information. The example also demonstrates loading D3 from a CDN and structuring data with external JSON files.

Jul 22, 2023

Loading thumbnail…

California Map

This example renders a map of California using D3.js and TopoJSON data from the US Atlas. The code loads the states-10m.json file, filters the TopoJSON to extract the California geometry, and applies a d3.geoAlbersUsa projection fit to the state’s bounds. A d3.geoPath generator then draws the resulting SVG path element, displaying the state’s outline at a 960×500 resolution. The visualization demonstrates importing D3 via UNPKG and using topojson-client to convert geographic features.

Jul 22, 2023

Loading thumbnail…

Activity 8 Map

This visualization displays a zoomable world map with countries colored in light green and outlined in indigo, with a sky-blue sphere background. Countries turn maroon when hovered. The map uses D3’s `geoEquirectangular` projection and `geoPath` to render geographic features from a TopoJSON dataset (`world-atlas@2`), while `d3.zoom` enables panning and zooming. The SVG output is styled via CSS class selectors, and the map data is loaded asynchronously using `d3.json` and processed with `topojson.feature`.

Jul 22, 2023

Loading thumbnail…

Fork of Scatter Plot with Shape

This visualization is a scatter plot showing the relationship between patient age and heart rate, with data points shaped by gender. It uses D3 v7 to render symbols from the `symbolsFill` set, mapped via `scaleOrdinal`, and includes a custom legend for the shape encoding. The plot leverages `scaleLinear` for both axes and fetches healthcare data from a remote CSV. Key APIs include `d3.csvParse`, `d3.extent`, `d3.axisLeft`, `d3.axisBottom`, and the `d3.symbol` generator for drawing point shapes.

Jul 22, 2023

Loading thumbnail…

Bubble chart

This bubble chart displays the correlation between smartphone specifications and price for 15 brands. The x-axis represents screen size in inches, the y-axis shows RAM in gigabytes, while the bubble radius encodes price, and color distinguishes brands. Hovering over a bubble reveals a tooltip with detailed specifications. The visualization is built with D3 v7 and renders SVG and animations through custom JavaScript, using d3.scaleLinear for axes and bubble size, d3.scaleOrdinal for colors, and d3.interpolateTurbo for the color gradient.

Jul 22, 2023

Loading thumbnail…

Player Data Scatter Plot

This scatter plot visualizes player data, showing age on the x-axis and matches played on the y-axis, with each point’s radius scaled to the player’s score. The data is loaded from a CSV file via `d3.csv`, and the visualization is rendered as an SVG using D3 v6. Axes are created with `axisLeft` and `axisBottom`, while `scaleLinear` and `scaleSqrt` map the data values. A categorical color scheme distinguishes score ranges, and axis labels are added as text elements.

Jul 22, 2023

Loading thumbnail…

Monthly Expenses

This stacked bar chart displays monthly expenses across four categories: Rent, Groceries, Utilities, and Entertainment. Each bar represents a month, with colored segments showing the amount spent per category. The visualization uses d3.stack() to compute the stacked layout and d3.scaleOrdinal for color encoding. An axis, legend, and chart title guide the viewer through the dollar amounts for each month.

Jul 22, 2023

Loading thumbnail…

Assignment2_Barchart

This example shows a horizontal bar chart displaying the number of users for various applications, sorted by the first 50 entries from a CSV dataset hosted on GitHub. The bars render through React components that leverage D3 v5’s `scaleBand`, `scaleLinear`, and `max` functions to compute positions and dimensions, with SVG `rect` elements for each mark. Custom `AxisBottom` and `AxisLeft` components generate tick lines and labels, while a `title` element inside each rectangle provides a native tooltip in the browser.

Jul 22, 2023

Loading thumbnail…

Network Graph

A social network graph visualizes friendships among ten people using a force-directed layout. Nodes are rendered as labeled circles, with links drawn as directed lines and arrow markers. The visualization loads data from a local JSON file and uses `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCollide` to position the elements. Users can drag nodes to rearrange the network, and hovering highlights them. The SVG output is styled with custom CSS.

Jul 12, 2023

Loading thumbnail…

MuscleCars tree

This interactive tree diagram visualizes the hierarchical relationships among muscle car models, starting from the root "Muscle Cars" and branching into manufacturers like Ford and Dodge, then down to specific models such as Mustang and Charger. Built with D3.js v3, it renders nodes and links as SVG elements with animated expansions and collapses. The code uses `d3.layout.tree` for positioning, `d3.behavior.zoom` for pan and zoom interactions, and loads hierarchical data from a JSON file via `d3.json`. Node colors correspond to type classifications in the dataset.

Jul 12, 2023

Loading thumbnail…

Activity 8 Country

This example displays a map of India rendered as an SVG path, centered using a Mercator projection fitted to the country’s boundaries. It loads world country geometries from the world-atlas TopoJSON dataset, filters for India, and draws the shape with d3.geoPath. The code demonstrates importing D3 v5 via a CDN script tag and using topojson-client to extract features.

Jul 12, 2023

Loading thumbnail…

Activity 8 Map

This example displays an interactive world map using an equirectangular projection, with countries rendered in light green against a sky-blue sphere. The visualization loads GeoJSON data from the world-atlas TopoJSON dataset via the `feature` method, and employs `d3.geoPath` with `d3.geoEquirectangular` to draw the paths. Users can pan and zoom the map using `d3.zoom`, while hovering over countries changes their fill color to maroon.

Jul 12, 2023

Loading thumbnail…

Area Chart Activity 8

A smooth, basis-curved area chart displays the cost of sales from 2000 to 2013. The visualization renders an SVG with a black line and a light green filled area, using a time-scaled x-axis and a linear y-axis with red tick labels. The D3 v5 code builds the chart with `scaleTime`, `scaleLinear`, `axisLeft`, `axisBottom`, `line`, and `area` generators, parsing CSV data that includes dates and numeric cost values.

Jul 12, 2023

Loading thumbnail…

linechart

A line chart tracks the cost of sales from 2000 to 2013 using data from a local CSV file. The SVG visualization uses `d3.scaleBand` for the year axis and `d3.scaleLinear` for cost, with `d3.axisBottom` and `d3.axisLeft` rendering the ticks. A `d3.line` path with a lightgreen stroke connects the data points, and red text labels for "Year" and "cost" are positioned via SVG transforms. The chart is built with D3 v7 in an ES6 module.

Jul 12, 2023

Loading thumbnail…

Pie Chart

A pie chart displays the count of students from each major at UNT, using a dataset loaded from a GitHub gist. The visualization renders as an SVG with colored segments, value labels, and a legend identifying majors and their corresponding student counts. Built with D3 v5, the code uses `d3.csv` for data loading, `d3.pie` and `d3.arc` for chart geometry, and `d3.scaleOrdinal` for color mapping.

Jul 12, 2023

Loading thumbnail…

Activity8_Task2

This example displays the message “Hello VizHub!” centered on the page in large text. It demonstrates how to set up a D3 v5 project with external modules, loading the library via UNPKG and using the `select` API to update the text content of an HTML div element. The message itself is imported from a local ES6 module, showing the use of modular code organization alongside D3’s selection methods.

Jul 12, 2023

Loading thumbnail…

Reusable Scatter plot Activity 8

This interactive scatter plot explores the classic Iris dataset, showing how flower measurements relate across different species. A set of colored circles represents individual flowers, with colors distinguishing setosa, versicolor, and virginica. Using D3.js, the visualization cycles through different measurement combinations on the x-axis while keeping sepal length on the y-axis, updating every few seconds. The code leverages D3's CSV parsing, scale functions, and axis components to render the dynamic chart, which includes a legend and labels for each species.

Jul 12, 2023

Loading thumbnail…

Bubble chart

This bubble chart visualizes the correlation between average horsepower, torque, and highway MPG across 31 car makes. Each circle’s position encodes horsepower on the x-axis and torque on the y-axis, while its radius scales with highway MPG and its color distinguishes the make. The visualization includes interactive tooltips on hover, plus legends for bubble size and color categories. It loads data from a CSV file and uses D3 v7 scaleLinear, scaleOrdinal, axisBottom, axisLeft, and event handlers. The chart is rendered as SVG with animated opacity transitions on hover.

Jul 8, 2023

Loading thumbnail…

Fork of Scatter Plot with Shape

This fork renders the classic Iris dataset as an interactive scatter plot. It maps sepal length to the x-axis and petal length to the y-axis, with each point’s shape encoding the species via D3’s `symbolsFill` scale. A custom legend explains the shape mapping. The visualization uses D3 v7’s scales like `scaleLinear` and `scaleOrdinal`, along with `symbol` and `symbolsFill` to generate the shapes. Data is fetched from a remote CSV, with numeric fields parsed, and the plot is drawn using D3’s `select` and `join` APIs for declarative updates.

Jul 8, 2023

Loading thumbnail…

Activity 7 Scatter Plot

This scatter plot visualizes the Iris dataset, using D3 v6 to map petal length and petal width for each sample. The visualization encodes the species of each flower through color, with setosa in skyblue, versicolor in lightgreen, and virginica in orange. Data is loaded from a remote CSV file using `d3.csv`, while `d3.scaleLinear`, `d3.extent`, `d3.axisBottom`, and `d3.axisLeft` handle the scales and axes. The SVG circles are rendered with the `join` method, and the chart includes labeled axes for petal length and sepal length.

Jul 8, 2023

Loading thumbnail…

IMDb Movie ratings

This stacked bar chart shows the distribution of IMDb ratings across six movie genres, breaking each genre’s percentage of films into five rating bands from below 5.0 to above 8.5. The visualization uses D3 v7’s `d3.stack()` to aggregate the percentage data, `d3.scaleLinear` for the x-axis, and `d3.scaleBand` for the genres. Each bar segment is colored via `d3.scaleOrdinal`, and hovering reveals the exact percentage through a custom tooltip. The SVG chart loads data from a local CSV file and includes a legend for the rating categories.

Jul 8, 2023

Loading thumbnail…

Activity 7

This example displays a horizontal bar chart of the 2010 population for ten countries, sourced from a CSV file via a URL. Built with React and D3 v5, it uses a linear x-scale for population values, formatted with SI prefixes (e.g., "B" for billions), and a band scale for country names. The SVG rendering includes custom axes and tooltips that show the formatted population value on hover.

Jul 8, 2023

Loading thumbnail…

activity 7_Task 1

This horizontal bar chart displays the populations of twenty countries for the year 2020, using data loaded from a CSV file via d3.csv. The visualization employs React components to render an SVG, with d3.scaleBand for country categories on the y-axis and d3.scaleLinear for population values on the x-axis. D3’s format function converts large numbers into abbreviated labels (e.g., “B” for billions). The chart includes blue tick lines, green rectangular marks, and a labeled x-axis, with hover tooltips provided through SVG title elements.

Jul 8, 2023

Loading thumbnail…

BMI by Age

This example visualizes the relationship between age and average body mass index (BMI) using binned bar charts. The code loads data via D3’s `csv` method, computes BMI from height and weight, and applies `scaleLinear` and `scaleTime` for axes. Binning is performed with `bin` and aggregated using `sum`. The SVG rendering includes axes with `axisBottom` and `axisLeft`, while rectangular bins are drawn with `.join('rect')`. The data originates from a GitHub gist, and the visualization demonstrates D3 v7’s modular imports and local ES6 module usage.

Jun 25, 2023

Loading thumbnail…

Transforming data

This example demonstrates data transformation by loading the classic Iris dataset from a CSV file and computing the average sepal length for each species. It uses D3 v7 modules such as `csvParse`, `flatRollup`, and `sum` to parse the data, aggregate it by species, and display the resulting summary as JSON in a `<pre>` element. The visualization also shows asynchronous state management with `setState` and a loading indicator.

Jun 25, 2023

Loading thumbnail…

Activity 6

This example demonstrates how to load and display a remote CSV dataset in a Vue application, printing the first ten rows as formatted JSON to the page. It relies on D3 v5’s `select` and `csv` functions, imported from the UNPKG-hosted library, to fetch the tabular data and manipulate the DOM. The visualization also includes a large “Hello VizHub!” message, set via D3’s `select('#message').text()` method, with the page rendered as SVG and WebGL output. A local ES6 module (`myMessage.js`) supplies the message text.

Jun 23, 2023

Loading thumbnail…

Fork of budha

This visualization generates a dense, colorful field of rotated polygons on a black background. The artwork is built using React and rendered as SVG, with a nested `map` loop over a numeric array to create hundreds of overlapping diamond shapes. Each polygon’s position, color, and rotation are determined by `Math.random()`, producing a chaotic, procedural composition. The code also includes a large, static path element depicting a stylized figure, drawn with SVG path data and scaled via a `transform`.

Jun 19, 2023

Loading thumbnail…

Fork of budha

This visualization layers hundreds of randomly positioned and colored circles over a large, intricate SVG path that forms a looping ornamental figure, likely a Buddha silhouette. The circles are generated through nested array mappings in React, with each point’s coordinates and fill color derived from `Math.random()`. The path is drawn with a thick stroke, while the black background and high opacity of the circles create a dense, textured composition that blends geometric noise with a structured central form.

Jun 19, 2023