K

kakumanusreya

@kakumanusreya·41 public vizzes

Loading thumbnail…

Fork of World Hotel Booking rate in different countries

This interactive 3D scatter plot visualizes hotel booking rates across different countries, encoding data attributes like agent, children, and babies along the x, y, and z axes. The visualization uses Plotly.js, with data loaded via D3's `d3.csv` function from a remote GitHub dataset. Three distinct traces, each with its own color and marker style, represent the different booking-related variables, while axis titles clarify the metrics being compared. The chart is rendered inside a pink-themed HTML page with a centralized heading and a full-height plot area.

Loading thumbnail…

Fork of 3D Bar chart for Hotel Booking Availability

This example shows a 3D bar chart comparing hotel booking metrics across seven countries, including India, the United States, Brazil, and France. Five series—such as booking cancellation percentage, hotel closing rate, and hotel high availability—are grouped and stacked in a three-dimensional view. The chart is built using the Highcharts library with the highcharts-3d module, enabling rotation and depth through the options3d settings. Data is supplied as inline arrays per country, and axes are labeled to distinguish the booking metrics and sources. The background is set to pink via CSS.

Loading thumbnail…

Fork of Fork of Making a Donut chart - project

This donut chart shows the number of booking changes across five hotel market segments—Direct, Corporate, Online TA, Offline TA/TO, and Complementary—with each segment’s value multiplied by 1,000 from the CSV data. The visualization uses D3 v5’s `pie` and `arc` generators to compute the donut geometry, with a `scaleOrdinal` mapping segment names to categorical colors. Labels are positioned via `labelArc.centroid()`, and the chart is rendered as SVG, with the CSV loaded using `d3.csv`. The text labels are styled with white fill and a sans-serif font.

Loading thumbnail…

Fork of Area Chart for Hotel Booking - Project

This area chart visualizes hotel booking closure rates over time, with a pink background and blue filled area beneath a curved line. It uses D3 v5’s `csv` loader to import timestamp and hotel-close data from a GitHub gist, then employs `scaleTime`, `scaleLinear`, `area`, and `curveBasis` to generate the smooth, filled path. Axes are rendered with `axisLeft` and `axisBottom`, including tick lines and custom labels, while the SVG canvas measures 960 by 500 pixels and is appended to by a single group with specified margins. The chart title appears above the plotting area.

Loading thumbnail…

Fork of Line Chart Project

A line chart displays high hotel booking rates over time, with a smooth curve generated using D3 v5's `line` and `curveBasis` functions. The SVG visualization uses `scaleTime` and `scaleLinear` for the axes, with grid lines created by `axisBottom` and `axisLeft`. Data is loaded from a CSV hosted on GitHub, parsed with `csv`, and rendered with custom styling for the axis labels and maroon stroke line path.

Loading thumbnail…

Fork of Fork of Data Visualization - Project 1

This bar chart displays hotel booking rates by country, using the top 100 records from a CSV dataset. The visualization uses D3’s `scaleBand` and `scaleLinear` to map countries and booking percentages, with red bars on a pink background. Axes are customized manually, with red tick lines and large blue tick labels. React manages the component state, loading data via D3’s `csv` function, and renders the SVG chart with a gray border.

Loading thumbnail…

Fork of project-Pie chart

This pie chart shows the percentage of canceled hotel bookings by country, using a dataset loaded via d3.csv from a GitHub gist. It renders an SVG with a pie layout from d3.pie and d3.arc, coloring each slice with a scaleOrdinal mapping to a discrete palette. Labels display the percentage on each segment, and a legend lists countries alongside their values, all styled with CSS. The visualization relies on d3 v5, including d3.arc for concentric geometry and d3.format for axis text.

Loading thumbnail…

Bar Chart

This example presents a series of pie charts analyzing hotel booking data from a cleaned.csv file. The first chart displays the average price per year, while the second shows the count of bookings per year. Using D3 v6 with SVG rendering, the code applies d3.pie and d3.arc to generate pie slices, d3.scaleOrdinal with d3.schemeCategory10 for coloring, and d3.group for data aggregation. Hover interactions scale slices and change their fill color.

Loading thumbnail…

Tree

This example shows a hierarchical tree of medical fields and related professionals, with nodes color-coded by generation depth. The visualization uses d3.stratify() to structure the flat parent-child data, d3.tree() to compute the layout, and SVG circles, paths, and text elements for rendering. Labels appear to the right of each node, and brown cubic Bézier curves connect parents to children. The background and text styling come from the linked stylesheet.

Loading thumbnail…

Network Graph ICE 8

A network graph displays nine people as labeled circles in sky blue with blue borders, connected by black links whose thickness reflects link weight. The names and groups come from a local `graph.json` file. Built with D3.js v4 and a v2 fallback, it uses `d3.layout.force` for simulation and `force.drag` for interactive node movement, rendering elements as SVG lines and groups. The graph’s layout is computed dynamically, with nodes repositioning on each tick.

Loading thumbnail…

India Map

This choropleth map visualizes the states of India, with each state filled by a distinct categorical color and labeled with its name. The map uses the Mercator projection, positioned and scaled to center the country. The example employs `d3.geoPath` to generate SVG paths from the provided GeoJSON data, leveraging a categorical color scale for fills. State name labels are placed at each region's centroid, and the entire rendering is implemented using D3 v5 within a React-based context.

Loading thumbnail…

France Map

This example displays a choropleth map of French departments, using a Mercator projection to render each region as a colored SVG path with its name label positioned at the centroid. The visualization loads GeoJSON TopoJSON data from a remote URL, processing it with `feature` from topojson, and generates the paths and labels using `d3.geoPath` and `d3.geoMercator`. Fill colors come from `scaleOrdinal` with `schemeCategory10`, while the map’s layout is adjusted via projection translation and scale parameters in d3 v5 within a React framework.

Loading thumbnail…

WORLD MAP ICE 8

A world map rendered with a natural Earth projection shows country boundaries in pale blue against a dark blue sphere, all set on a soft pink background. The visualization loads geographic data from a JSON file and uses D3 v5’s `geoNaturalEarth1` projection with `geoPath` to draw the shapes. TopoJSON’s `feature` method converts the raw topology into GeoJSON features, which are then appended as SVG paths with light stroke opacity for country edges.

Loading thumbnail…

WORLD MAP

This world map visualization renders global land masses and country boundaries using a Natural Earth projection. The visualization combines D3’s geographic utilities—`geoNaturalEarth1`, `geoPath`, and `geoGraticule`—with React for component-based rendering. TopoJSON data from the World Atlas dataset populates the map, featuring colored land areas, graticule lines, and interior borders. The SVG output includes a filled sphere background with distinct styling for land, graticules, and international boundaries.

Loading thumbnail…

World Map

This world map visualizes global landmasses and country boundaries using an Eckert III projection. It renders the sphere, graticules, and interior borders as SVG paths, with landmasses filled in purple and graticules in blue. The visualization is built with React, D3 v5’s `geoNaturalEarth1`, `geoPath`, and `geoGraticule`, and TopoJSON’s `feature` and `mesh` to process the world-atlas dataset.

Loading thumbnail…

Bar Chart

This example visualizes hotel booking data from a cleaned CSV file, showing both the average price per year and the booking count per year in two separate pie charts. The code uses D3 version 6 to load the data, group it by year, and compute aggregate values. Each chart uses the d3.pie and d3.arc generators to create slices, with d3.scaleOrdinal and d3.schemeCategory10 for coloring. Interactive hover effects highlight slices by changing their fill color and scale, while legends display the year and corresponding values. The visualization is rendered as SVG elements.

Loading thumbnail…

3D Scatter Plot

This example shows a 3D scatter plot of sales data, displaying the relationship between total sales, number of clients, and products sold. Each data point appears as a semi-transparent red marker in a three-dimensional space. The visualization is created using Plotly’s `Plotly.newPlot` method, with data loaded from a CSV file via D3’s `d3.csv` function. The scene includes labeled axes with colored titles, and the layout margins are minimized to focus on the plot itself.

Loading thumbnail…

3D BAR GRAPH

This 3D bar graph visualizes population data by age group, with bar height encoding male population values in millions. The visualization uses the d3-x3d library to render three-dimensional bars within an X3DOM scene, while D3 v5 handles CSV parsing and data binding. The chart initially displays random test data before loading the actual population dataset from a GitHub gist, then updates the scene with the real values. The page includes a light green title and sky blue background for visual context.

Loading thumbnail…

3D bar graph

This example displays a static 3D bar graph using D3 version 7, rendered within an HTML page. The visualization shows a simple three-dimensional bar chart, with the body text set to a large font size. The code imports the `select` function from D3 and uses it to target the `body` element, then sets its text content to “Hello D3 version 7,” demonstrating basic D3 selection and DOM manipulation. The visualization loads D3 from a CDN and runs through a bundled JavaScript file.

Loading thumbnail…

3D bar graph

This example displays car manufacturer sales data for the first six months of the year as a 3D bar graph, with each manufacturer grouped into monthly bars. The visualization uses the `d3.x3d.chart.barChartMultiSeries()` API from the d3-x3d library, combined with D3 v5 for data parsing and scaling, and X3DOM for rendering the 3D scene. Data is loaded asynchronously from a CSV file using `d3.csv`, where each row is parsed into a series of monthly values, then bound to the chart via `datum()` and `call()`.

Loading thumbnail…

ICE 7

A combined line and area chart displays CrimeRate from 2010 to 2019, with the line emphasizing the trend and the area filling beneath it. The visualization uses D3 v5 with SVG rendering, employing `d3.line`, `d3.area`, and `curveBasis` for smooth interpolation, alongside `scaleLinear`, `axisBottom`, and `axisLeft`. The data is loaded via `d3.csv` from a GitHub gist, with the year and crime rate parsed as numeric values. Axis labels and gridlines are styled through CSS, and the chart is centered within a fixed-width SVG container.

Loading thumbnail…

ICE 7

This line chart displays crime rates over time, sourced from a CSV file loaded via d3.csv. The visualization uses d3.scaleLinear for both axes, d3.axisBottom and d3.axisLeft for tick rendering, and d3.line with d3.curveBasis to draw the smoothed temperature-style path. The SVG rendering includes labeled axes and a title, with data points mapped through x and y scales. The dataset is fetched from a GitHub gist and parsed as numeric values for year and crime rate.

Loading thumbnail…

Scatter plot ICE 7

This interactive scatter plot animates through different axis pairings of the Iris flower dataset, cycling between sepal and petal measurements. Colored circles represent the three species—setosa, versicolor, and virginica—with a static legend and dynamically updating axes. Built with D3.js v6, the visualization uses `scaleLinear`, `axisLeft`, `axisBottom`, and a `setInterval` loop to redraw the plot every few seconds. The SVG rendering includes custom labels, a title, and a rotating x-axis selection, with data loaded asynchronously via `d3.csv`.

Loading thumbnail…

ICE 7

This visualization shows the crime rate over time as a smooth orange area chart, with red titles and purple axis labels. It uses D3 v5 to load CSV data from a GitHub gist, parse the year and crime rate values, and render an SVG. The chart employs `scaleTime`, `scaleLinear`, `axisLeft`, `axisBottom`, and an `area` generator with `curveBasis` to create the filled line. Axis labels and a centered title are added manually, with tick marks extending across the plot for gridlines.

Loading thumbnail…

Pie chart ICE 7

A pie chart displays the distribution of hobbies among students in a class, with each slice sized by the number of people (Nfpeople) and labeled in a legend showing the hobby name, its percentage of the total, and the raw count. The visualization uses D3 v5 with the `pie` and `arc` generators to create SVG paths, `scaleOrdinal` for a categorical color palette, and `format` for tick labels. Data is loaded asynchronously from a CSV file hosted on GitHub via `d3.csv`, and the render function appends pie slices and legend elements to an SVG canvas.

Loading thumbnail…

Fork of Pie Chart

This pie chart visualizes 2022 US auto sales by brand, using a dataset loaded from a GitHub gist via `d3.csv`. The chart displays each brand's market share as a colored slice, with a legend on the right showing the brand name, its percentage of total sales, and its sales in thousands. Built with D3 version 5, the visualization uses `d3.pie` and `d3.arc` to generate the SVG paths, `d3.scaleOrdinal` for color assignment, and custom text elements for the legend.

Loading thumbnail…

Pie chart ICE 7

This pie chart visualizes 2022 U.S. auto sales by brand, with each slice representing a brand’s year-to-date sales. A legend on the right shows the brand name, its percentage of total sales, and the raw sales volume in thousands. The example loads CSV data from a GitHub gist using `d3.csv`, then uses `d3.pie` and `d3.arc` to generate the slices. Colors are assigned via `d3.scaleOrdinal`, and the SVG is rendered with a fixed width and height.

Loading thumbnail…

Fork of Pie Chart

This example visualizes the basic cost of Netflix across ten hobbies using a pie chart. The chart is rendered as an SVG, with each slice colored via `d3.scaleOrdinal` and `d3.schemeCategory10`, and includes a legend showing each hobby’s name and its corresponding numeric value. The code loads data from a CSV file using `d3.csv`, sorts it descending by cost, and builds the pie with `d3.pie` and `d3.arc`. Mouseover events log the hobby value to the console, and the visualization is built with React, D3 v5, and SVG paths.

Loading thumbnail…

ICE 7 Reusable Scatter Plot

This interactive scatter plot visualizes the Iris dataset, encoding petal width against sepal length with points colored and shaped by species. A reusable chart function built with d3.scaleLinear, d3.scaleOrdinal, and d3.symbol maps data to SVG paths, while d3.axisLeft and d3.axisBottom render axes. Every two seconds, the plot cycles through different numeric columns as the x-axis variable, updating the visualization via a setInterval callback that re-invokes the chart function with new accessor functions.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This interactive scatter plot visualizes the Iris Dataset, displaying measurements of sepal and petal dimensions across three flower species. The visualization cycles through different x-axis variables every two seconds, animating transitions between PetalWidthCm, SepalWidthCm, PetalLengthCm, and SepalLengthCm. Built with D3 v6, the example uses the reusable chart pattern with `scaleLinear`, `axisLeft`, and `axisBottom` APIs. Circles representing individual flowers are colored by species—red for setosa, violet for versicolor, and orange for virginica—while the interface responsively fills the browser window.

Loading thumbnail…

ICE 7 reusable scatter plot

This interactive scatter plot visualizes the Iris dataset, mapping petal width against sepal length and distinguishing species through colored symbols. Built with D3 v6, it uses reusable chart components via `scatterPlot()`, employing `scaleLinear` and `scaleOrdinal` for axes and color mapping. The SVG rendering includes axis labels and a legend-free design, with data loaded asynchronously from a CSV URL. The chart adapts to the viewport size, demonstrating a modular approach to building customizable visualizations with D3's selection and join methods.

Loading thumbnail…

ICE 7 SCATTER PLOT

This interactive scatter plot visualizes the Iris dataset, displaying sepal and petal measurements for three flower species distinguished by color. The chart cycles through different measurement combinations on the x-axis every few seconds, while the y-axis remains fixed on sepal length. Built with D3.js v6, it uses d3.scaleLinear for axes, d3.scaleOrdinal for color mapping, and SVG path symbols to represent data points. Data loads from a CSV file using d3.csv, and the chart updates dynamically via setInterval.

Loading thumbnail…

Scatter plot

This scatter plot visualizes the Iris dataset, mapping petal length and width for each flower and coloring points by species (setosa, versicolor, virginica). The visualization uses D3 v6 within a React setup, loading CSV data via `d3.csv` and rendering SVG circles. Axes are created with `d3.axisLeft` and `d3.axisBottom`, while scales use `d3.scaleLinear` and `d3.extent`. The chart also includes axis labels, but notably, the x-axis text incorrectly labels petal length as "Sepal_Length," and the circle attributes include non-standard `rx` and `ry` properties.

Loading thumbnail…

Bar chart

This bar chart displays the total marks of students grouped by their birth year, with green bars plotted on a sky-blue background. The visualization uses d3.csv to load data from a GitHub gist, then maps the YEARBORN and TOTAL fields to a band scale for the x-axis and a linear scale for the y-axis. SVG rectangles represent each bar, with axes generated via d3.axisBottom and d3.axisLeft, and labels added for both axes.

Loading thumbnail…

Fork of ICE-6 bar graph

This example visualizes Amazon prices across different countries using a horizontal bar graph, displaying the top 12 countries by basic monthly cost. Each bar’s length represents the cost value, with red vertical gridlines and labeled axes for clarity. The visualization is built with React and D3 v5, using `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and `csv()` to load data from a GitHub gist. Bars are rendered as SVG `<rect>` elements, while axes and ticks are manually generated from the scales.

Loading thumbnail…

ICE 5 SCIENTIFIC DATA VISUALIZATION

This example showcases the role of scientific data visualization through an interactive web page, presenting a large, detailed image (likely a scientific dataset) that is rendered as a pattern within a dark SVG canvas. Built with Vue and D3.js v7, the page uses an SVG `<pattern>` element to tile the embedded image, while CSS styles the surrounding text and layout. The code demonstrates a straightforward approach to embedding and displaying complex graphical data within a structured HTML document.

Loading thumbnail…

Fork of Buddha

Rendered with React and SVG, this visualization layers 1,000 randomly generated circles and rectangles over a hand-coded Buddha path. Each shape receives randomized position, size, color, and rotation values, creating a chaotic, colorful backdrop. The central Buddha silhouette, defined by a long SVG path drawn with cubic Bézier commands, floats on a sky-blue canvas. The code uses React’s `Array.map()` to generate the shapes and raw SVG elements, with no external plotting libraries.

Loading thumbnail…

Fork of Fork of Buddha

A dense field of small, randomly colored circles is overlaid on an intricate SVG line drawing of a Buddha figure. The visualization uses React and SVG to render both the generative scatter of circles and the detailed path of the deity. The Buddha artwork is composed of numerous path segments with a wide stroke, while the circles are positioned using random coordinate calculations based on a loop counter. The piece combines algorithmic randomness with structured line art, creating a layered visual contrast.

Loading thumbnail…

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

A dense field of overlapping, semi-transparent diamond shapes in random colors is rendered over a large, detailed line drawing of a seated Buddha. The SVG output is generated by React components that map nested arrays to produce hundreds of polygon elements, with random positions, rotations, and RGB fill values. The Buddha path is drawn using SVG path syntax within a transformed group, layered beneath the chaotic, colorful geometric pattern.

Loading thumbnail…

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

Black concentric circles scatter over the canvas, layered beneath a bold orange Buddha silhouette drawn from SVG path data. The circles use random positioning and RGB color generation within React’s JSX, while the path is translated and scaled. React 16 renders the SVG elements, combining generative geometry with a static religious icon.

Loading thumbnail…

Buddha

A scattered field of small, translucent pink and red circles fills the SVG canvas, generated by a triple-nested React map over a fixed array. The circles use random `cx`, `cy`, and `rgb()` fill values, with opacity set to 0.8. Overlaid on top is a large, detailed Buddha figure drawn as an SVG path element, transformed and scaled within the same viewport. The example is built with React and ReactDOM, rendering static SVG markup without external data or interaction.