vagdevi-369

@vagdevi-369·14 public vizzes

hotel booking

This interactive 3D scatter plot visualizes hotel booking data, comparing agents based on repeated guest status, previous cancellations, and prior non-canceled bookings. Two distinct traces plot these metrics as colored spheres—green for repeated guests against cancellations, and pink for cancellations against successful bookings—with opacity revealing data density. The visualization uses Plotly’s `scatter3d` type via the `Plotly.newPlot` API, loading CSV data through D3’s `d3.csv`. The chart is rendered inside a DIV element on a minimal HTML page, with a title indicating focus on agent performance. Marker size and green outline styling enhance point differentiation in the three-dimensional space.

Apr 28, 2023

Loading thumbnail…

Social Network ICE-8

This example visualizes a small social network as a node-link diagram, with ten named individuals (e.g., "vagdevi", "Revansh") connected by weighted edges, rendered as SVG circles and lines. The network is laid out using a force-directed algorithm via the `d3.layout.force()` API, which applies gravity and charge parameters to position nodes. The code uses the older D3.js v4 syntax (e.g., `d3.select`, `d3.json`, `force.drag`) to load the network data from an external JSON file and enable drag-and-drop interaction for manual repositioning.

Apr 12, 2023

Loading thumbnail…

Family Tree :)

This interactive family tree visualization displays a three-generation genealogy, with the root ancestor ’Bhadraiah’ at the top and his children and grandchildren branching downward. The diagram uses a collapsible tree layout that responds to clicks, allowing users to expand or collapse nodes. Built with D3.js (version 3.5.17), it employs the `d3.layout.tree` for node positioning and `d3.svg.diagonal` to draw curved links between relatives. The SVG rendering includes animated transitions (750ms duration) that smoothly move nodes to new positions when the tree structure changes, while circle and text elements are styled via CSS classes.

Apr 12, 2023

Loading thumbnail…

ICE8 - Country Map

This example presents a choropleth map of Indian electoral regions, using color to encode the Electoral Division property of each region. The map is rendered as SVG paths generated via `d3.geoPath` with a `geoMercator` projection. Data is loaded from a remote TopoJSON file, parsed with the `topojson` library, and each region’s fill color is assigned using a custom ordinal scale. The code also appends a `<title>` element for each path, providing region names as hover tooltips.

Apr 12, 2023

Loading thumbnail…

ICE-8 World map

This example displays a world map using the Natural Earth projection via d3.geoNaturalEarth1 and d3.geoPath. Landmasses are filled in DarkCyan, with graticules rendered in LightBlue and country borders drawn in black. The map is built with React, loading geographic data from world-atlas TopoJSON, using topojson.feature and topojson.mesh to extract land and interior boundaries. The visualization is rendered as SVG, with a Poppins font and an Eckert III projection noted in the HTML.

Apr 11, 2023

Loading thumbnail…

3D Bar chart

This 3D bar chart visualizes monthly vehicle sales, comparing new vehicles, used vehicles, and their total sales across six months. The chart uses Highcharts with the highcharts-3d extension to render four stacked column series in a rotating perspective view. The x-axis lists months, the y-axis shows sales figures, and the z-axis labels the vehicle categories. Data comes from Macrotrends population statistics, though the displayed values represent sales counts. The visualization employs configurable 3D depth, alpha, and beta angles to create the dimensional effect.

Apr 2, 2023

Loading thumbnail…

3D Scatter Plot

This example visualizes monthly vehicle sales as a 3D scatter plot, comparing new and used sales volumes across two overlapping marker groups. The first trace plots New, Used, and Total Sales New; the second plots New, Total Sales New, and Total Sales Used, with gray and blue markers for contrast. Data is loaded from a CSV file using d3.csv, then rendered through Plotly’s scatter3d type with configurable marker size, opacity, and line styling. The layout removes all margins to maximize the plot area.

Apr 2, 2023

Loading thumbnail…

Reusable scatter plot ICE-7

This interactive scatter plot uses the Iris dataset to explore relationships between four flower measurements. It cycles through different x-axis variables every two seconds, showing petal width versus sepal length, with points colored by species. Built with React and D3.js, the visualization uses `d3.csv` to load data, `d3.scaleLinear` for axes, and SVG circle elements. A legend with colored markers identifies the three Iris species, while the chart title and axis labels update dynamically.

Mar 26, 2023

Loading thumbnail…

area chart

This area chart displays Amazon’s annual revenue in billions of U.S. dollars, with years on the x-axis and revenue on the y-axis. The data is loaded from a GitHub-hosted CSV file. Built with D3 v5, the visualization uses `scaleTime` and `scaleLinear` for axes, `axisBottom` and `axisLeft` for ticks, and `area` with `curveBasis` to render the filled path. Point labels are formatted with `format('.1s')`, and the chart includes a title and axis labels.

Mar 26, 2023

Loading thumbnail…

Pie Chart

This pie chart visualizes the largest internet companies by revenue in US dollars. Sectors are rendered as SVG paths using the `arc` generator, with colors assigned by `scaleOrdinal` and `schemeCategory10`. A legend lists each company with its corresponding color and revenue value. The chart displays the top 10 entries, sorted by revenue, sourced from a CSV file via `csv()` and loaded through the D3 library.

Mar 26, 2023

Loading thumbnail…

scatter plot

This scatter plot visualizes the Iris dataset, mapping petal length and width for individual flowers while coloring each point by species: red for setosa, green for versicolor, and purple for virginica. The code loads CSV data via D3’s `csv` function, parses numeric columns, and builds scales with `scaleLinear` and `extent`. Circles are rendered as SVG elements with fixed radius, while axes are generated using `axisLeft` and `axisBottom`. The visualization also encodes sepal measurements as `rx` and `ry` attributes, though these do not affect circle appearance given the constant radius. The chart fills the browser window with a pale turquoise title.

Mar 13, 2023

Loading thumbnail…

ICE-6

This horizontal bar chart visualizes the relationship between age and BMI for insured individuals, displaying the first 15 records from a CSV dataset. Built with React and D3 v5, it uses `d3.csv` to load data, `d3.scaleBand` for the age categories on the y-axis, and `d3.scaleLinear` for the BMI values on the x-axis. The chart renders as an SVG, with red gridlines and text labels generated via D3’s axis utilities.

Mar 12, 2023

Loading thumbnail…

ICE5

The visualization displays an insurance-themed background image rendered directly inside an SVG. It uses a dark backdrop with a full-width JPEG photograph, embedded as a base64-encoded data URL, and applies it through an SVG pattern. The image is mapped using a `pattern` element with `patternContentUnits` set to `objectBoundingBox`, and a referenced `image` element supplies the pixel data. D3 v5 is loaded via a CDN, though the example primarily relies on native SVG structure rather than D3-specific data methods such as `d3.forceSimulation` or `d3.geoPath`. The page also includes styled headings and text inside a minimal HTML layout.

Mar 4, 2023

Loading thumbnail…

vagdevi

The visualization renders a densely overlapping field of semi-transparent, randomly colored polygons whose coordinates are generated from the `Math.random()` function within nested array mappings. A large, complex vector path is also drawn, likely representing a custom illustration or glyph. The piece uses React and ReactDOM to construct the SVG elements programmatically, with each polygon's points, fill, and rotation determined by deterministic pseudo-random calculations based on array indices. The result is an abstract, chaotic composition set against a rosybrown background.

Mar 2, 2023