M

mamathareddy1321@gmail.com

@MamathaReddygari·27 public vizzes

Loading thumbnail…

Fork of ICE8-Tree -2

A tree visualization displays LinkedIn job postings hierarchically, first by profession (e.g., "Tech", "Health") and then by city, with each branch ending in employment types like "Full Time" or "Contract." Rendered as an SVG using D3 v7, the graph applies a horizontal tree layout via `d3.tree()` and `d3.linkHorizontal()`. All nodes share a uniform blue fill (`#3399ff`), and labels are positioned to the right or left of each circle depending on whether the node has children. The data is embedded directly in the script as a nested JavaScript object, with styling handled by CSS.

Loading thumbnail…

ICE8-Tree

This example displays a hierarchical tree of LinkedIn job postings, organized by company, location, and employment type. The static dataset includes two companies, “Crocs” and “Stealth”, each branching into city nodes and then into four job-type leaves. Using D3 v7, the code applies the `d3.tree` layout and `d3.hierarchy` to compute node positions, then renders the structure as SVG paths with `d3.linkHorizontal` and colored circles for nodes. Labels appear beside each node, with the text anchor direction determined by whether the node has children.

Loading thumbnail…

ICE8-1

This visualization presents a hierarchical tree of LinkedIn job postings, organized by company (Crocs and Stealth) and location, with leaf nodes for employment types. It uses the D3.js v7 library with an SVG rendering approach, applying `d3.hierarchy` and `d3.tree` to compute the layout. The code draws horizontal links via `d3.linkHorizontal` and custom node shapes (diamonds, circles, rectangles, stars) with distinct colors per depth level. Labels are added to each node using the `node.append('text')` method.

Loading thumbnail…

ICE8-1

A hierarchical tree chart visualizes LinkedIn job postings by location and employment type. The data groups postings under Tech and Health sectors, branching into cities like New York and Los Angeles, then into full-time, part-time, internship, and contract roles. Using d3.hierarchy and d3.tree, the code renders an SVG with horizontal links via d3.linkHorizontal. Node shapes vary by depth using d3.symbol for diamonds and stars, plus circles and rectangles, colored distinctly. Labels display each node's name, with the root presented as a black diamond and city nodes as orange squares.

Loading thumbnail…

ICE8-1

This tree diagram visualizes LinkedIn job postings, organized hierarchically by job sector, location, and employment type. The visualization uses D3.js v7 to render an SVG with a custom layout, where nodes are styled by depth level: black diamonds for the root, purple circles for sectors, orange squares for locations, and blue stars for job types. The code applies d3.hierarchy and d3.tree to structure the dataset, with horizontal links drawn using d3.linkHorizontal.

Loading thumbnail…

ICE8-2

This network graph visualizes the relationships between job postings, companies, cities, and employment types in a LinkedIn dataset. The visualization uses a force-directed layout created with `d3.forceSimulation` and `d3.forceLink`, rendering nodes as colored circles in SVG. Node colors are assigned by group using `d3.scaleOrdinal` with `d3.schemeSet2`, while drag behavior is enabled via `d3.drag`. The graph shows how job postings at Crocs and Stealth connect to four cities, which each link to four employment types.

Loading thumbnail…

ICE8-1

The visualization depicts a tree of LinkedIn job postings, organized by company, city, and employment type. It uses a hierarchical layout from D3.js v7 to position nodes, with `d3.hierarchy()` and `d3.tree()` computing the structure. Links are drawn as horizontal paths via `d3.linkHorizontal()`, while node markers vary by depth—diamonds, circles, rectangles, and stars—using `d3.symbol()`. Labels are placed adjacent to each node, with text-anchor adjusted for leaf versus parent nodes. Data is hardcoded in JavaScript, and the SVG renders on a pink background with purple accents.

Loading thumbnail…

ICE -8- Tree

This example displays a LinkedIn job posting hierarchy as a tree diagram, with root, category, location, and job-type levels. It uses D3.js v7 with a hierarchical tree layout and horizontal links. Nodes are rendered as distinct SVG shapes—diamonds, circles, rectangles, and stars—based on depth, with labels positioned relative to child presence. The code uses `d3.hierarchy`, `d3.tree`, and `d3.linkHorizontal`, with hardcoded data for cities and employment types.

Loading thumbnail…

ICE8 - Tree Structure

This tree visualization displays a four-level hierarchy of LinkedIn job postings, organized from the root node down to companies, locations, and job types. The D3.js v7 code builds the structure using `d3.tree` and `d3.hierarchy`, with SVG links drawn via `d3.linkHorizontal` and custom node shapes selected by depth—diamond, circle, square, and star—through `d3.symbol`. Data appears hardcoded in the HTML file, showing fictional postings for Crocs and Stealth across multiple cities.

Loading thumbnail…

ICE8 - TREE

The ICE8 - TREE example shows a tree diagram of LinkedIn job postings, organized hierarchically by industry, location, and employment type. It uses the d3.js library (version 6) to render the structure. The code constructs a dataset with branches for tech and health, then applies `d3.tree()` layout to position nodes. Links are drawn with `d3.linkHorizontal()`, while node shapes vary by depth: diamonds for the root, circles for industries, rectangles for locations, and stars for job types. Labels are added via SVG `<text>` elements. Styling uses CSS for pink background, purple headings, and gray links.

Loading thumbnail…

ICE8- Tree

This visualization shows a hierarchical tree of LinkedIn job postings, organized by companies (Crocs and Stealth), then by location (New York, Los Angeles, Austin, Chicago), and finally by employment type (full-time, part-time, internship, contract). The root node appears as a purple circle, company nodes as orange rectangles, location nodes as blue circles, and job types as green diamonds. The code uses d3.hierarchy and d3.tree() to compute the layout, then draws curved links with d3.linkHorizontal() and renders SVG shapes with appended text labels.

Loading thumbnail…

ICE - 8 - TREE

This example presents a hierarchical tree visualization of LinkedIn job postings, organizing data by company, location, and employment type. Using D3.js v7, it renders an SVG tree layout with distinct node shapes—diamonds for the root, circles for companies, squares for locations, and smaller circles for job types—each color-coded for clarity. The visualization employs `d3.hierarchy()` and `d3.tree()` to compute the layout, with `d3.linkHorizontal()` generating curved connecting paths. A legend explains the shape-color mapping, while the pink background and purple heading give the chart a distinctive style. The data is hardcoded and static.

Loading thumbnail…

ICE - 8 - TREE

This example visualizes a hierarchical tree of LinkedIn job postings, showing the structure of companies, locations, and employment types. The D3 v3 layout creates a collapsible tree diagram with pink and purple node circles and curved link paths. The code uses `d3.layout.tree()` for positioning, `d3.svg.diagonal()` for curved links, and click handlers on nodes to expand or collapse child branches. The data is hard-coded as a JavaScript array with company names, locations, and four job types per location.

Loading thumbnail…

ICE7 - Area Chart

This area chart visualizes total sales across discount levels using data from a Superstore CSV loaded via d3.csv. The code groups records by discount value with d3.rollup, sums sales, and renders a steel-blue area path using d3.area with linear x and y scales. Axes are generated with d3.axisBottom and d3.axisLeft, with formatted tick labels for currency values, all drawn as SVG within a styled container.

Loading thumbnail…

ICE7 - Line Chart

A line chart displays total sales for each discount level in the Superstore dataset. The chart uses a linear x-axis for discount values and a linear y-axis for summed sales, with a steelblue line connecting the aggregated points. Built with D3 v7, the code employs `d3.csv`, `d3.rollups` for grouping by discount, `d3.scaleLinear` for axes, and `d3.line` to generate the path. The SVG renders with explicit margins and axis labels for "Discount" and "Total Sales."

Loading thumbnail…

ICE7 - Pie Chart

A pie chart displays total sales by region, using canvas rendering via Chart.js. A custom legend to the right lists each region and its sales amount, with color-coded swatches built from a hardcoded array of thirteen regions and sales figures. The chart disables its built-in legend and constructs the HTML legend dynamically with JavaScript, iterating over the data to create list items.

Loading thumbnail…

ICE7 - Reusable scatter plot

This interactive scatter plot visualizes Superstore sales data, plotting profit against sales to reveal performance trends. Reusable JavaScript module `scatterPlot` encapsulates chart configuration and rendering, with the D3 v6 API handling data loading via `csv`, linear scaling with `scaleLinear`, and axis generation through `axisLeft` and `axisBottom`. Points are rendered as SVG circles with animation, allowing flexible reconfiguration of dimensions, margins, and visual attributes.

Loading thumbnail…

ICE6 - Marks and Channels

This scatter plot shows the number of wins by different cricket captains, with captain names on the x-axis and win counts on the y-axis. Each green circle represents a captain, turning orange and enlarging on hover while displaying a tooltip with their match count and wins. The visualization loads CSV data from a GitHub gist using d3.csv and renders SVG circles with d3.scaleBand and d3.scaleLinear for axes. Interactive features include d3 transitions on hover and a custom tooltip populated via mouseover events.

Loading thumbnail…

ICE6 - Marks and channels

This bar chart shows the total number of wins achieved by various cricket captains, with captain names on the x-axis and win counts on the y-axis. The data is loaded from a CSV file and sorted by wins in descending order, with each bar colored uniquely via a d3.scaleOrdinal. Built with D3 v7, the visualization uses d3.csv for data loading, d3.scaleBand and d3.scaleLinear for axes, and includes interactive hover effects that change bar color through CSS transitions, along with rotated x-axis labels and axis labels for clarity.

Loading thumbnail…

Fork of Best Cricket Captains

This example displays a bar chart comparing the number of matches won against matches captained for leading cricket captains, with each bar sorted by total matches captained and colored distinctly. The visualization uses D3.js v7 to load data from a CSV file via `d3.csv`, then creates an SVG chart with linear scales (`d3.scaleLinear`) for both axes and an ordinal color scale for bar fills. Interactive tooltips appear on mouseover events, showing captain name, match counts, and calculated win percentage, while the bars change color to orange on hover and revert when the mouse leaves. The chart is rendered with a pink background and rounded container styling.

Loading thumbnail…

ICE6 - Marks and Channels

This bar chart visualizes the number of matches captained by cricket players, sourced from a CSV file of cricket captains. It uses D3.js to load the data and construct an SVG with a band scale for player names and a linear scale for match counts. Rectangles represent each player’s total, with axes and a title added via D3’s axis components and text elements. The chart is rendered in React with a steelblue fill, displaying the ranking of captaincy counts across players.

Loading thumbnail…

Best Cricket Captains

This example presents a data summary for a dataset of cricket captains. It displays the file size, row count, and column count of the loaded CSV data in a styled web page. The visualization fetches the remote CSV file via the `fetch` API, then uses `d3.csvParse` to parse the text. The resulting statistics are dynamically rendered into the page's summary section with highlighted emphasis. Data source is a GitHub Gist. The interface features a bold color scheme with a loading animation while fetching occurs.

Loading thumbnail…

Best Cricket Captains

This example displays a summary of a cricket captains dataset, showing the file size, row count, and column count as highlighted numbers in a styled box. It fetches a CSV file from a GitHub Gist and parses it with `d3.csvParse` to calculate these statistics. The page uses plain JavaScript `fetch` to load the data, then dynamically updates the HTML content to present the results. D3 v7 is loaded via CDN for CSV parsing, while CSS handles the layout and a loader animation during the fetch process.

Loading thumbnail…

Best Cricket Captains

The example displays a static "Hello HTML!" message centered on a white page. It uses plain HTML with a CSS class to style the message at a very large font size, demonstrating basic web rendering. The code relies on standard CSS properties such as `font-size` and `text-align` within a `<style>` block, and includes no external JavaScript libraries, frameworks, or data sources. It serves as a minimal starter template for HTML and CSS projects, with no interactive or data-driven elements present.

Loading thumbnail…

Best Cricket Captains

The example displays a static "Hello HTML!" message centered on a white page. It uses plain HTML with a CSS class to style the message at a very large font size, demonstrating basic web rendering. The code relies on standard CSS properties such as `font-size` and `text-align` within a `<style>` block, and includes no external JavaScript libraries, frameworks, or data sources. It serves as a minimal starter template for HTML and CSS projects, with no interactive or data-driven elements present.

Loading thumbnail…

Fork of World Best Captain in Cricket

This example displays the top 10 cricket captains in a static HTML table, listing their name, matches, wins, losses, and win percentage. It loads a CSV file from a GitHub Gist using `d3.csv`, then appends rows to the table body with `d3.select` and `append`. The page is styled with custom CSS and uses D3 v7 loaded via UNPKG, demonstrating basic data loading and DOM manipulation.

Loading thumbnail…

World Best Captain in Cricket

This example demonstrates a minimal VizHub project that displays the text “Hello VizHub!” using D3.js. It shows how to load D3 v7 from a CDN via UNPKG and import specific API functions like `select` from the `d3` module. The code also includes a local ES6 module, `myMessage.js`, which exports a string that is rendered into the `#message` div. This serves as a basic template for combining external libraries with modular JavaScript.