R

rajasrilekkala

@rajasrilekkala·33 public vizzes

Loading thumbnail…

3D Stem Plot

This example shows a 3D stem plot with 100 points arranged in a circular spiral, where each point is connected to the base by a vertical stem. Using d3.v6 in an SVG renderer, the code constructs the visualization by applying rotation transformations to a group and drawing lines with x, y, and z coordinates. Axes and labels are manually added for the x, y, and z dimensions, styled in black with steelblue stems on a pink background.

Loading thumbnail…

3D Scatter Plot with Iris Dataset

This 3D scatter plot visualizes hotel booking data, showing relationships between variables like guest type, booking cancellations, and country of origin. The visualization employs three surface traces to represent different aspects of the dataset, with axes labeled for agent, previous bookings not canceled, and country. The code uses the Plotly.js library through its `Plotly.newPlot` API to render the interactive 3D scene, while D3.js handles CSV data loading from a GitHub-hosted dataset. A custom camera perspective flips the view orientation, and the layout minimizes margins for immersive exploration.

Loading thumbnail…

World Hotel Booking rate in different countries

This interactive 3D scatter plot visualizes hotel booking rates across countries, mapping three passenger-related variables from the dataset—agent, children, and babies—through three distinct marker traces. Each trace shows the relationship between hotel booking rate, previous bookings not canceled, and country. The visualization uses Plotly’s `newPlot` API to render the 3D scene, with data loaded via `d3.csv` from a remote GitHub gist. The markers use color-coded points (orange, purple, and red) with translucent styling to distinguish the three variables.

Loading thumbnail…

Interactive Streamgraph Template in React

This interactive streamgraph template in React visualizes hotel booking trends over time, with stacked streams colored by category using `d3-shape`’s `stack`, `area`, and `curveBasis`, and colored via `scaleOrdinal` with `schemeDark2`. Hovering a stream highlights it by adjusting opacity and displays the category name in a tooltip. The SVG rendering is driven by React state and event handlers, while data loads as CSV through `d3-fetch`’s `csv` method.

Loading thumbnail…

3D Bar chart for Hotel Booking Availability

This example uses Highcharts with its 3D module to render a grouped, stacked 3D column chart of hotel booking metrics across seven countries. The chart displays five series—representing booking percentages, closing rates, availability, opening rates, and low availability—with each country shown along the x-axis and the y-axis measuring booking cancellation percentages. The chart’s 3D perspective is enabled via the `options3d` configuration, setting alpha, beta, and depth, while columns use stacking and group padding to distinguish series visually. Data is hardcoded in the script, with interactions handled through jQuery and the Highcharts API.

Loading thumbnail…

Fork of 3D Bar Chart using D3.js

This visualization displays car manufacturer sales data for the first six months of the year as an interactive 3D bar chart, with each manufacturer represented by a multi-series bar broken down by month. The chart is rendered using the d3-x3d library, which integrates D3.js v5 with X3DOM for 3D scene output. Data is loaded from a CSV file hosted on GitHub, parsed via D3’s `csv` function, and passed to the `d3.x3d.chart.barChartMultiSeries` component. The example also loads helper scripts from unpkg and raw.githack, demonstrating a practical blend of D3 and 3D web technologies.

Loading thumbnail…

World Mamp ICE-8-Rajasri

This visualization displays a world map using the Natural Earth projection, with land masses rendered in orange and country borders, graticules, and the sphere distinctly stroked in green, yellow, and sky blue. The map is generated with d3.geoPath, d3.geoNaturalEarth1, and d3.geoGraticule, while TopoJSON converts the raw topology into GeoJSON features and a mesh for interiors. Data is fetched asynchronously from a GitHub gist, and the React component renders the SVG output.

Loading thumbnail…

Social_Network_graph_ICE-8

This interactive network visualization shows the relationships between individuals in a social group, with nodes representing people and links representing connections. The graph uses a force-directed layout to position nodes, visually separating them into clusters based on their group assignments. Built with D3.js v4 and React, the code leverages the `d3.layout.force()` API to simulate attractive and repulsive forces between nodes, while SVG elements render the graph with styled links and nodes. Node labels display each person's name, and the simulation updates positions in real-time.

Loading thumbnail…

Tree Chart - IC8 - Rajasri

This tree chart visualizes a family classification hierarchy, showing generational relationships from Muni Naidu down to descendants like Samrat Chowdary and Alekya Chowdary. The code uses D3.js version 3.5.17 with `d3.layout.tree()` and `d3.svg.diagonal()` to render curved links and nodes as SVG elements. Node stroke colors come from the `type` property (e.g., orange, purple), while `level` drives fill colors (e.g., blue, green, pink, violet). A 750-millisecond transition animation expands the tree on load, with a pink background and custom CSS styling for interactive cursor pointers.

Loading thumbnail…

Country Map --Russia--IC8

This example displays a choropleth-style map of Russia, with each state filled in red and outlined in black, rendered as SVG paths on a bisque-colored background. The visualization uses D3’s `geoPath` with the `geoNaturalEarth1` projection, centered on Russia, and loads TopoJSON data via `topojson.feature` to draw regional boundaries. Users can pan and zoom the map using D3’s `zoom` behavior. An ordinal color scale (`scaleOrdinal` with `schemeCategory10`) is defined, though only the red fill is currently applied.

Loading thumbnail…

Fork of Data Visualization - Project 1

This bar chart displays hotel booking rates by country, ranking the top 100 countries based on the percentage of bookings they receive. The visualization uses D3.js v5 within a React component to render an SVG, with customized axes and red-styled gridlines and tick labels. Data is loaded from an external CSV via `d3.csv`, while `scaleBand` and `scaleLinear` map the categorical and numerical values to coordinates.

Loading thumbnail…

Bar chart - Project

A green bar chart displays total average daily rate (ADR) for three customer types: Transient, Contract, and Transient-Party, sourced from a CSV file. The visualization uses d3.scaleBand for the x-axis (customer types) and d3.scaleLinear for the y-axis (total ADR). Axes are rendered with d3.axisLeft and d3.axisBottom, while rectangles are appended to an SVG element and sized using the scale band’s bandwidth and derived heights. The labels include rotated y-axis text and an x-axis title, with styling applied via CSS.

Loading thumbnail…

Fork of Making a Donut chart - project

This donut chart shows booking changes across five hotel market segments—Direct, Corporate, Online TA, Offline TA/TO, and Complementary—using a pink background and colored arcs. The code loads data from a CSV file, multiplies booking changes by 1,000, and renders an SVG via d3.pie and d3.arc, with d3.scaleOrdinal assigning distinct colors. Segment labels are placed inside the ring using a separate labelArc and text elements. The visualization uses D3 v5 and a data-driven approach to highlight relative booking volumes.

Loading thumbnail…

Fork of Bar Chart - Project

This bar chart visualization displays the global sales of video games by genre, using data loaded from a CSV file. The chart uses D3 v6 scales (`scaleBand`, `scaleLinear`) and axes (`axisBottom`, `axisLeft`) to render the bars, which are colored steel blue. It includes interactive hover effects, where bars transition to orange on mouseover and return to steel blue on mouseout, with the color change animated over 250 milliseconds using D3's transition API.

Loading thumbnail…

Area Chart for Hotel Booking - Project

This area chart shows hotel booking closing prices over time, with a smooth curved line filling the space beneath it in blue. The visualization uses a time-scaled x-axis for timestamps and a linear y-axis for closing values, both with labeled axes and a title. Built with D3 v5, the code uses `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `area` with `curveBasis` for the smoothed area path. Data is loaded from a CSV file hosted on GitHub, and the SVG rendering includes gridlines and tick labels.

Loading thumbnail…

Fork of Line Chart Project - Hotel booking that are available

This line chart visualizes hotel booking availability over a period of time, with a smooth curve rendered in yellow on a pink background. Built with D3 v5, the code uses `scaleTime` and `scaleLinear` for the axes, `line` with `curveBasis` for the smoothed path, and `axisBottom` and `axisLeft` for tick marks. The data is loaded from a GitHub gist via `csv` and parsed into dates and numeric values before being drawn as an SVG.

Loading thumbnail…

Line Chart Project

A line chart depicts high hotel booking rates over time. The visualization uses D3 v5 to render an SVG, employing `scaleTime` and `scaleLinear` for the axes, `axisLeft` and `axisBottom` for ticks, and a `line` generator with `curveBasis` for the smoothed path. Data is loaded from a CSV via the `csv` function and parsed into dates and numbers before rendering.

Loading thumbnail…

project-Pie chart

This pie chart visualizes the percentage of canceled hotel bookings across different countries, with each slice labeled and a corresponding legend. The chart is rendered as an SVG using D3 v5, leveraging `pie` for arc generation, `arc` for path geometry, and `scaleOrdinal` for slice colors. Data is loaded asynchronously from a CSV file via `d3.csv` from a GitHub Gist, and the total cancellation percentage is computed before rendering.

Loading thumbnail…

Bonus ICE - Interactive Bar chart

This interactive bar chart visualizes the estimated 2010 religious breakdown of the 20 most populous countries, derived from data by the Pew Research Center. The chart uses stacked bars, where each segment represents a different religion, with hovering over bars revealing tooltips and hovering over the legend highlighting specific religions. Built with D3.js version 2 (d3.v2) and jQuery, the visualization uses SVG rendering, ordinal scales for the x-axis, and linear scales for the y-axis. The code includes drop shadow filters and custom tick formatting for axis labels, with data transformation and chart construction handled through custom functions.

Loading thumbnail…

Bonus ICE - Bar Chart

This example shows a 3D bar chart of the World Happiness Report data for selected countries, with each bar representing a country and its segments colored by social support, freedom, generosity, and perceptions of corruption. It uses the d3-x3d library to render the chart in X3DOM, a WebGL-based 3D viewer, while d3.v5 handles CSV parsing and data binding. The bars support hover highlighting, and the visualization is embedded in a React page with a pink background and tooltip styling.

Loading thumbnail…

World Happiness Report, which includes data on various factors related to happiness in different countries

This example visualizes the World Happiness Report, plotting three 3D scatter traces that compare social support, generosity, and perceptions of corruption against freedom of choice and country names. The code loads CSV data with `d3.csv`, then passes it to Plotly’s `scatter3d` trace type with custom marker colors and transparency. A layout configures axis titles and removes margins, and the chart renders in a `div` via `Plotly.newPlot`. The visualization highlights how these happiness factors vary across countries in three dimensions.

Loading thumbnail…

Bonus ICE - 3D Bar chart

This example visualizes happiness report data across several countries using a 3D bar chart. It displays multiple metrics—including log GDP per capita, life ladder, social support, health, freedom, and generosity—as grouped, stacked columns along the x-axis, with z-axis categories for each happiness source. The chart is rendered using the Highcharts library with the highcharts-3d module, enabling 3D depth, rotation angles (alpha and beta), and perspective distance. The data is embedded directly in the JavaScript code within an HTML page, with a pink background.

Loading thumbnail…

Scatter Plot-ICE7 from Reusable scatter plot

This interactive scatter plot visualizes the Iris dataset, cycling through four flower measurements on the x-axis (petal width, sepal width, petal length, sepal length) while keeping sepal length fixed on the y-axis. It uses d3.csv for data loading, d3.scaleLinear for axes, and d3.axisLeft/axisBottom for rendering ticks. The animation, driven by setInterval, updates the scatter plot's x-value accessor. Points are colored by species (green for setosa, yellow for versicolor, red for virginica) with a custom legend. SVG rendering and an animation loop showcase the reusable scatterPlot chart function.

Loading thumbnail…

Area Chart ICE-7 - Rajasri

This area chart visualizes gold prices over time, with the y-axis representing the "High" value and the x-axis representing timestamps. The chart’s filled area uses a smooth basis curve to connect data points. Built with D3 v5, the visualization employs `scaleTime` and `scaleLinear` for axes, and the `area` generator with `curveBasis` to create the path. Data is loaded via `csv` from a GitHub gist, and the SVG is rendered with grid lines and axis labels.

Loading thumbnail…

Line Chart ICE-7-Rajasri

This line chart visualizes gold prices over time, plotting the "High" value against the timestamp for each data point. The visualization uses D3 v5 with SVG rendering, employing `scaleTime` and `scaleLinear` for axes, a `line` generator with `curveBasis` for the smoothed path, and `axisBottom` and `axisLeft` for labeled ticks. Data is loaded via `csv` from a GitHub gist, with the chart styled through CSS properties like stroke color and font sizing defined in an external stylesheet.

Loading thumbnail…

ICE - 7 Pie chart Visualizations

This example visualizes the happiness distribution of the top few countries using a pie chart, with each slice labeled with its percentage and a corresponding legend. The code loads CSV data via d3.csv, computes pie angles with d3.pie, and renders the chart as SVG paths using d3.arc. It applies an ordinal color scale with predefined hex and named colors, and formats the percentage labels using d3.format. The accompanying legend lists each country and its value, with bar rects and text elements styled via CSS classes.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot-ICE7

This example presents a reusable scatter plot built with D3.js, visualizing the classic Iris flower dataset across multiple dimensions. The chart animates every two seconds, cycling the x-axis through four measured attributes—petal width, sepal width, petal length, and sepal length—while the y-axis remains fixed on sepal length. The code uses `d3.csv`, `scaleLinear`, `axisLeft`, and `axisBottom` to render axes and circles, with `setInterval` driving the parameter changes. The visualization is implemented as a reusable chart function, using SVG for rendering and data joins via `.join('circle')` to update points smoothly.

Loading thumbnail…

Fork of Reusable scatter plot

This interactive scatter plot visualizes the Iris dataset, encoding petal and sepal measurements as the x and y coordinates of colored circles that represent flower species. Built with D3 v6, it uses `d3.csv` for data loading, `d3.scaleLinear` and `d3.extent` for scales, and `axisBottom`/`axisLeft` for axes. The visualization cycles through different measurement pairings via `setInterval`, updates the x-axis label dynamically, and includes a color-coded legend for the three species.

Loading thumbnail…

Data Visualization - ICE-6 Scatter Plot Graph

This visualization displays a scatter plot of Iris species data, plotting petal length on the x-axis against petal width on the y-axis, with points colored by species (yellow for setosa, blue for versicolor, red for virginica). The SVG rendering uses D3 v6 APIs including `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `selectAll` with data joins, while loading the dataset via `d3.csv` from a GitHub gist. The code also maps sepal measurements to the circle’s `rx` and `ry` attributes, though these are not used for visual encoding.

Loading thumbnail…

Data Visualization - ICE-6 - Bar Chart

This visualization displays a horizontal bar chart comparing types of chest pain against age counts from a heart attack dataset. The chart uses React to manage state and render SVG elements, while d3-scale functions (scaleBand and scaleLinear) map categorical pain types to y-axis bands and age values to x-axis positions. The data is loaded via d3.csv from a GitHub gist, filtered to the first 12 records, and mapped with a switch statement to rename chest pain codes into descriptive labels. The visualization highlights the distribution of different chest pain types across age groups.

Loading thumbnail…

ICE-5: Welcome to ICE-5 Data visualization

This example displays a stylized welcome page for "ICE-5 Data visualization," combining a large title with a repeating ornamental image pattern. Rendered as a static SVG, it uses CSS for page styling and embeds D3 v7 via a script tag, though the visualization itself relies on hardcoded SVG markup including an embedded base64 JPEG image. The composition demonstrates layout and theming with HTML and SVG rather than dynamic data processing.

Loading thumbnail…

Fork of Rajasri ICE4

This visualization displays a dense field of semi-transparent diamond shapes rendered in bright, randomized colors, layered over a large, intricate path drawing. The diamonds are generated using nested `Array.map` loops, with their positions and fill colors determined by `Math.random()`. The complex vector path, likely representing a detailed illustration or map, is embedded as a static SVG path element. The visualization is built with React, leveraging ReactDOM to render the SVG scene, and demonstrates the layering of procedural, stochastic elements with fixed geometric data.

Loading thumbnail…

ICE4_Buddha_Forked_Image

A spiraling field of colorful lines and circles is clipped to the silhouette of a Buddha, rendered as an SVG in React. The image uses a d3.line generator and nested loops to position elements across a 960 by 500 canvas, with a radial gradient and drop shadow filter. The clipPath applies the Buddha path, while random stroke colors and radii create a vibrant, textured composition against a dark green-to-black gradient background.