V

vryvarma5577@gmail.com

@Rajayaswanthvarma·55 public vizzes

Loading thumbnail…

Raja yaswanth varma vegesna network 11640007

This network diagram visualizes friendships between eight people, including Varun, Ravi, and pramodh, using a physics simulation. The visualization shows the connections as blue lines with arrowheads between green-bordered, cyan nodes labeled with names. Rendered as SVG, the graph uses `d3.forceSimulation` with link, many-body, collision, and center forces, allowing users to drag nodes. The code leverages D3 v6’s `select` and `join` APIs to structure the force-directed layout, with data loaded from an external JSON file.

Loading thumbnail…

Fork of Raja Yaswanth Varma Vegesna 11640007 Tree Map

This fork builds a family tree using a node-link diagram with animated transitions. The visualization maps individual data records with `child` and `parent` fields into a hierarchical structure using `d3.stratify()`, then lays out the nodes with `d3.tree()`. Golden circles represent the family members, connected by lime-colored paths that animate from parent to child positions over one second. Text labels display each member's name, and the initial render uses D3's `.transition()` API to smoothly grow the circle radii and draw the connecting links.

Loading thumbnail…

Raja Yaswanth Varma Vegesna 11640007

This interactive tree diagram visualizes a fictional family lineage using D3.js. It displays hierarchical relationships between parent and child nodes, with each person represented by a circle and label. The chart uses a left-to-right layout with green links connecting nodes, and users can click on nodes to expand or collapse branches. The visualization is rendered as an SVG with smooth animated transitions, and it uses D3's layout tree, diagonal paths, and transition methods to create the dynamic, collapsible hierarchy.

Loading thumbnail…

Raja Yaswanth Varma Vegesna 11640007 Tree Map

This example visualizes a family tree using a treemap layout rendered as an animated SVG diagram. Gold circles represent each family member, connected by lime-colored paths that animate into place, with bold black labels showing names. The code uses d3.stratify() and d3.tree() to compute the hierarchical layout from flat parent-child data, then transitions the link paths and circle radii to create the entrance effect.

Loading thumbnail…

Raja yaswanth Varma Vegesna 11640007

This example displays a map of Argentina with its departments and provinces, colored blue on an orange sphere background. The visualization uses a Transverse Mercator projection via `d3.geoTransverseMercator` and renders geographic features with `d3.geoPath`. It loads department boundaries from a GitHub-hosted TopoJSON file, converts them with TopoJSON’s `feature` method, and enables interactive pan and zoom through `d3.zoom`. Hovering over a department turns it maroon and reveals its name and province in a tooltip.

Loading thumbnail…

Fork of Anv_ICE8_Argentina_(Topojson)

This visualization displays Argentina’s provinces on a transverse Mercator projection using D3. The map renders provinces as interactive SVG paths with hover highlighting, and supports zoom via the `d3.zoom` API. It loads TopoJSON data from a GitHub gist, converts it to GeoJSON with `topojson.feature`, and draws paths using `d3.geoPath`. The projection is configured with `d3.geoTransverseMercator` from the `d3-geo-projection` module, with custom centering and rotation to fit the country’s shape.

Loading thumbnail…

Fork of Fork of Anv_ICE8_Argentina_(Topojson)

This interactive SVG map displays Argentina’s departments, coloring each province and showing its name and province in a tooltip on hover. The visualization uses the D3.js library with the `d3.geoTransverseMercator` projection, `d3.geoPath` for rendering shapes, and TopoJSON’s `feature` function to process geographic data from a GitHub-hosted JSON file. Pan and zoom are enabled via the `d3.zoom` event handler, while static CSS styles define the map’s color scheme and hover effects.

Loading thumbnail…

Fork of Anv_ICE8_Argentina_(Topojson)

This example displays an interactive map of Argentina, color-coded by province and highlighting individual departments on hover. It uses a Transverse Mercator projection via `d3.geoTransverseMercator` and renders geographic features as SVG paths with `d3.geoPath`. The map loads TopoJSON data from an external GitHub repository, converting it to GeoJSON with `topojson.feature`. Zoom and pan controls are implemented through d3’s `zoom` behavior, while CSS governs the hover color change. Background styling and a transparent sphere outline frame the visualization.

Loading thumbnail…

Raja Yaswanth Varma Vegesna 11640007

This example displays an interactive world map using an equirectangular projection, with countries filled in yellow and hover states shown in gray. The visualization loads geographic boundaries from a TopoJSON file via `d3.json` and converts them to GeoJSON features using the `feature` method from TopoJSON. It renders the map with `d3.geoEquirectangular` and `d3.geoPath`, appending SVG paths for both the Earth sphere and country outlines. A CSS hover rule changes country fill colors without additional JavaScript.

Loading thumbnail…

Scatter Plot for Apogee and Perogee

This scatter plot visualizes the relationship between Apogee and Perigee distances for different penguin species, with each circle colored by species (yellow, green, or brown). The x-axis maps Perigee_km while the y-axis maps Apogee_km, and the circle radii are scaled by the same values. Built with D3 v5 and React, it uses `d3.csv` to load data from a GitHub gist, `scaleLinear` for axes, and SVG circles for rendering. Axis labels and a title are added using D3’s `svg.append` methods.

Loading thumbnail…

Scatter plot for Inclination and Latitude

This scatter plot visualizes the Iris Dataset, showing the relationship between inclination and longitude. Using D3 v6 with SVG rendering, the chart displays data points as different shapes and colors based on species. The reusable chart component uses d3's scaleLinear, axisBottom, axisLeft, and scaleOrdinal APIs to map values and create categorical encodings. The visualization animates every 10 seconds, cycling through four columns (Inclination_degrees, sepal_width, petal_length, Longitude_of_GEO_degrees) for the x-axis, dynamically updating the scatter plot via the join API to transition between views.

Loading thumbnail…

Box Plot of Power and Class of Orbit

This interactive bar chart displays the distribution of satellite power (in watts) across different orbit classes. The visualization uses a box plot for each orbit category, showing the minimum, first quartile, median, third quartile, and maximum values. The code leverages d3’s `nest`, `quantile`, `scaleBand`, and `scaleLinear` functions to compute statistics and map data to SVG coordinates. Built with React and D3 v5, it renders directly to SVG elements, drawing box rectangles, center lines, and whisker caps using custom components like `Box`, `CenterLine`, and `UpLine`. The dataset is loaded from a Gist CSV file, and the y-axis is inverted to start from zero.

Loading thumbnail…

Box plot for Launch Mass and Class Of Orbit

This visualization uses box plots to show the distribution of launch mass (in kilograms) across different classes of orbit. The plot displays the minimum, first quartile, median, third quartile, and maximum for each orbit class, with whiskers extending to 1.5 times the interquartile range. Built with React and D3 v5, the chart uses `scaleLinear` and `scaleBand` for axes, `quantile` for statistical calculations, and custom SVG components for rendering the box rectangles, median lines, and whisker caps. Data comes from a CSV file loaded via D3’s `csv` function.

Loading thumbnail…

Box plot for Dry Mass and Class of Orbit

Box plots display the distribution of satellite Dry Mass (in kilograms) across different Classes of Orbit, summarizing the minimum, first quartile, median, third quartile, and maximum values. The chart uses a vertical layout with a reversed y-axis, colored teal boxes, and black whisker lines. Built with React and D3 v5, the visualization computes quartiles via `d3.quantile` and renders custom SVG components like `boxRect` and `CenterLine`. Data is loaded from a CSV file using `d3.csv`, filtered to non-negative mass values, and grouped by orbit class before plotting.

Loading thumbnail…

Fork of Box Plot

This visualization presents a fork of a classic box plot, summarizing the distribution of new COVID-19 cases across different locations using React and D3 v5. The view displays min, quartiles, median, and max values for each categorical group after filtering to cases above 5,500. The implementation uses D3's `scaleBand`, `scaleLinear`, and `quantile` functions to compute the five-number summaries and render SVG elements, including vertical range lines, interquartile rectangles, and median markers. Data is loaded from a CSV file hosted on GitHub via D3's `csv` loader.

Loading thumbnail…

Fork of Fork of Box Plot

This example shows box plots for new COVID-19 cases by country, displaying minimum, first quartile, median, third quartile, and maximum values derived from a CSV dataset. The chart uses the D3 `scaleBand` and `scaleLinear` functions for positioning, with React components rendering each plot element as SVG. The data is aggregated using D3’s `nest`, `quantile`, and `rollup` functions, and the visualization is inspired by a D3 graph gallery example. Axis ticks are generated separately with custom React axis components.

Loading thumbnail…

Fork of Boxplot of Sex vs Age of Skin Cancer 100 Patients

This visualization compares the age distribution of skin cancer patients by sex using side-by-side box plots. The chart displays quartiles, medians, whiskers, and outliers for each group, with age on the y-axis and sex on the x-axis. Built with D3 v4, it loads CSV data from a GitHub gist and uses d3.nest() and d3.quantile() to compute summary statistics, then renders the boxes, median lines, and axes as SVG elements.

Loading thumbnail…

Fork of Box Plot

This example shows a box plot for daily new COVID-19 cases across countries, displaying the minimum, first quartile, median, third quartile, and maximum for each location. The chart uses React to render SVG elements, with D3 v5’s `scaleBand`, `scaleLinear`, `quantile`, and `nest` functions to compute summary statistics and position the boxes, whiskers, and median lines. Data is loaded as CSV from a GitHub gist and filtered to include only countries with case counts above 5,500.

Loading thumbnail…

Fork of Box Plot

This visualization presents a fork of a classic box plot, summarizing the distribution of new COVID-19 cases across different locations using React and D3 v5. The view displays min, quartiles, median, and max values for each categorical group after filtering to cases above 5,500. The implementation uses D3's `scaleBand`, `scaleLinear`, and `quantile` functions to compute the five-number summaries and render SVG elements, including vertical range lines, interquartile rectangles, and median markers. Data is loaded from a CSV file hosted on GitHub via D3's `csv` loader.

Loading thumbnail…

Fork of Box Plot

This example visualizes the distribution of sepal length across three iris species using a box plot. It displays the minimum, first quartile, median, third quartile, and maximum values for Setosa, Versicolor, and Virginica, with each species grouped along the x-axis. The plot is built with React and D3 v5, using `d3.scaleBand`, `d3.scaleLinear`, `d3.nest`, and `d3.quantile` to compute summary statistics. The SVG rendering includes separate components for the boxes, median lines, whiskers, and axes, with data loaded via `d3.csv` from a GitHub Gist.

Loading thumbnail…

Fork of D3 Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis and sepal length on the y-axis. Each point is rendered as an SVG circle with a fixed radius of 5 pixels. The code uses D3 v7 APIs including `scaleLinear` for axis scaling, `extent` for domain calculation, `axisLeft` and `axisBottom` for axes, and `csv` for data ingestion from a GitHub-hosted CSV file.

Loading thumbnail…

Fork of Penguin Data set scatter Plot

This scatter plot visualizes the relationship between flipper length and body mass for three penguin species, using color-coded circles (yellow for Adelie, green for Gentoo, brown for Chinstrap). The visualization uses D3 v5 APIs including `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load data from a GitHub-hosted CSV file and render an SVG with custom-styled axes and labels. A CSS rule increases tick label font size, and the plot includes axis titles and a title, though the y-axis label appears misaligned with the plotted variables.

Loading thumbnail…

Fork of Fork of Penguin Data set scatter Plot

This interactive scatter plot visualizes penguin measurements, mapping flipper length to the x-axis, body mass to the y-axis, and using circle color to distinguish species (Adelie, Gentoo, and Chinstrap). The SVG-based visualization uses d3.csv to load data, d3.scaleLinear and d3.extent for scaling, and d3.axisLeft/axisBottom for axes. Each circle’s rx and ry attributes are set from bill dimensions, creating an elliptical distortion, while d3.selectAll().join() manages the marks. Axis labels and a title are added via SVG text elements.

Loading thumbnail…

Fork of Penguin Data set scatter Plot

This scatter plot visualizes the relationship between flipper length and body mass for three penguin species, using color-coded circles (yellow for Adelie, green for Gentoo, brown for Chinstrap). The visualization uses D3 v5 APIs including `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load data from a GitHub-hosted CSV file and render an SVG with custom-styled axes and labels. A CSS rule increases tick label font size, and the plot includes axis titles and a title, though the y-axis label appears misaligned with the plotted variables.

Loading thumbnail…

Fork of Penguin Data set scatter Plot

This scatter plot visualizes a fork of the Penguin dataset, mapping each observation’s Perigee_km on the x-axis and Apogee_km on the y-axis, while coloring circles by species (Adelie, Gentoo, or other) and encoding bill length and depth as rectangle radii (rx, ry). The code uses d3.csv to load the data, d3.scaleLinear and d3.extent for scales, and d3.axisLeft and d3.axisBottom for axes, rendering SVG circles via a data join. Axis labels and a title are added with SVG text elements.

Loading thumbnail…

Fork of 3D Scatter Plot with Iris Dataset

This example shows a 3D scatter plot of dog breed measurements, comparing male and female maximum heights and weights. The first trace uses a cyan-colored marker with a semi-transparent fill to represent male weight, while the second uses a yellow marker for female weight. The visualization is built using the Plotly JavaScript library, with data loaded via D3’s `d3.csv` function from a GitHub-hosted CSV file. The chart is rendered inside a designated HTML div using `Plotly.newPlot`, with margins set to zero for a clean presentation.

Loading thumbnail…

Fork of Fork of Bonus ICE Scatter plot using D3.js

This example shows two 3D scatter plots of agricultural data, comparing crop production and district names against crop year, season, and area. The visualization uses Plotly's `scatter3d` traces rendered inside a `myDiv` container, with data loaded from a CSV file via D3.js’s `d3.csv`. Each trace maps distinct dataset columns to the x, y, and z axes, using marker size, color, and opacity to differentiate the points. The code relies on Plotly’s `newPlot` API to render the interactive chart.

Loading thumbnail…

Fork of 3D Bar Chart using D3.js

This example displays car manufacturer data for the first six months across ten years (2000–2009) as an interactive 3D bar chart. It uses the d3-x3d library to render D3.js-based bar chart multi-series visualizations within an X3DOM scene. The code loads CSV data from a GitHub gist, parses each row into key-value pairs, and binds the resulting dataset to the chart holder using d3.x3d.chart.barChartMultiSeries(). The visualization leverages D3 v5’s CSV parsing and selection APIs, with d3-3d for 3D geometry and X3DOM for WebGL rendering.

Loading thumbnail…

Fork of Fork of Bonus ICE - 3D Bar chart

This 3D bar chart visualizes total downloads for seven popular applications across six different app stores. Built with the Highcharts library, the visualization uses its 3D column module with enabled `options3d` to render the chart with a depth perspective. The `xAxis` categories list the apps, while the `yAxis` represents download totals. Each of the six series, such as "Playstore Downloads," is plotted with a distinct `stack` value, creating a grouped, 3D column layout without stacking.

Loading thumbnail…

Fork of 3D Bar Chart using D3.js

This example displays car manufacturer data for the first six months of a year as a 3D multi-series bar chart. It uses the `d3.x3d.chart.barChartMultiSeries` API from d3-x3d to render bars in X3D, with data loaded from a CSV file and parsed into month-specific values. The chart is embedded in an HTML page using D3.js v5 for data handling and scaling, while x3dom renders the interactive 3D scene. The visualization highlights monthly sales or production figures across multiple manufacturers.

Loading thumbnail…

Fork of Bonus ICE - 3D Bar chart

This visualization compares download figures for seven popular applications across six app stores using a 3D vertical bar chart. The chart is rendered with Highcharts and the highcharts-3d module, applying rotation angles (alpha and beta) to create the three-dimensional perspective. Each store’s data is represented as a series of stacked, grouped columns, with categories along the x-axis and download totals on the y-axis. The code explicitly sets chart depth, column depth, and group padding to enhance the spatial effect. The data values are hardcoded arrays, showing hypothetical totals per app and store.

Loading thumbnail…

Fork of 3D Bar Chart using D3.js

This example shows a 3D multi-series bar chart of car land area data for the first six months, rendered with the d3-x3d library. It loads CSV data from a GitHub gist, parses it with `d3.csv`, and binds the result to the chart using `datum` and `call`. The scene uses x3dom for WebGL output, while D3 v5 handles scales and axes, with the `d3-3d` plugin providing the 3D layout.

Loading thumbnail…

Fork of Fork of Bonus ICE Scatter plot using D3.js

This example shows two 3D scatter plots of agricultural data, comparing crop production and district names against crop year, season, and area. The visualization uses Plotly's `scatter3d` traces rendered inside a `myDiv` container, with data loaded from a CSV file via D3.js’s `d3.csv`. Each trace maps distinct dataset columns to the x, y, and z axes, using marker size, color, and opacity to differentiate the points. The code relies on Plotly’s `newPlot` API to render the interactive chart.

Loading thumbnail…

Fork of ICE 7-1 Reusable Scatter Plot

This fork of the ICE 7-1 reusable scatter plot visualizes different dog breeds, using the Iris Dataset structure for its CSV data. Written in D3 v6, it renders an SVG with animated, shape- and color-coded symbols that cycle through four attribute axes every ten seconds via `setInterval`. The plot uses `scaleLinear`, `scaleOrdinal`, `axisLeft`, and `axisBottom` from D3, with a custom `scatterPlot` module managing dynamic updates.

Loading thumbnail…

Fork of D3.js Line Chart

This chart visualizes the minimum life expectancy of twelve dog breeds, using a categorical X-axis for breed names and a linear Y-axis for years. A thick steelblue line connects the data points, with labels for both axes. The visualization is built with D3.js v7, using `d3.scaleBand` and `d3.scaleLinear` for positioning, and `d3.line` to generate the SVG path. Data is loaded from a CSV file containing breed names and their corresponding life expectancy values.

Loading thumbnail…

Fork of Piechart ICE7

This pie chart visualizes the maximum female height of different dog breeds from a GitHub-hosted dataset, with each slice labeled with its height value and accompanied by a legend. Built with D3.js v5, it uses the `pie()` and `arc()` generators to compute the chart geometry, while `scaleOrdinal()` maps section colors. The SVG rendering includes slice labels positioned via `arc.centroid()` and a legend constructed with appended rectangles and text elements.

Loading thumbnail…

Fork of Piechart ICE7

A pie chart depicts the number of vehicles seized across various U.S. states, using a dataset loaded from a GitHub-hosted CSV. The chart displays each state as a colored slice with a value label (in thousands), accompanied by a legend that lists state names and their corresponding seized-vehicle counts. Built with D3 v5, the visualization employs `d3.csv` to fetch data, `d3.pie` to compute arc segments, `d3.arc` for path generation, and `d3.scaleOrdinal` for categorical coloring. The SVG output is rendered within a centered layout, with legends and labels formatted via CSS.

Loading thumbnail…

Fork of Fork of piechart icetmo7

This example shows the top 10 dog breeds by maximum male height using a pie chart. The chart displays each breed as a colored arc with a corresponding legend listing breed names and height values. Built with D3.js v5, it loads CSV data from a GitHub gist, uses `d3.pie` and `d3.arc` to compute and render the segments, and `d3.scaleOrdinal` for color mapping. Legends are positioned manually with SVG circles and text, while the total value is formatted using `d3.format`.

Loading thumbnail…

ICE-7 Area Chart 11640007

This area chart displays the population of India from 2010 to 2023, using data from a local CSV file. The chart combines a smooth line and a grey filled area beneath it, with the y-axis labeled “Population” and the x-axis labeled “Year.” Built with D3 v5, the visualization uses `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, `d3.area`, and `d3.axisBottom`/`d3.axisLeft`. The area generator employs `curveBasis` for smoothing, and the chart is rendered as SVG with styled axes and tick labels.

Loading thumbnail…

Fork of Fork of Fork of ICE-7 Area Chart

This area chart shows average rent in Dallas, plotting minimum life expectancy against dog breed names. The visualization combines a smooth orange area fill with a black line overlay, using D3 v5’s `area` and `line` generators with `curveBasis` for interpolation. It loads CSV data from a GitHub gist, applies `scaleLinear` for both axes, and uses `axisLeft` and `axisBottom` with custom tick formatting. The chart is rendered as SVG within a React project, with axis labels and gridlines styled via CSS classes.

Loading thumbnail…

Fork of ICE-7 Line Chart

This fork of the ICE-7 line chart visualizes dog breed data by plotting maximum female height over time on the x-axis against breed names on the y-axis, with a red line path connecting points and labeled axes. The chart uses D3 v5’s `csv` loader to fetch data from a GitHub gist, `scaleTime` and `scaleLinear` for scaling, and `line()` to generate the SVG path. Axes are rendered with `axisBottom` and `axisLeft` inside an SVG container, with custom tick styling and static text labels for both dimensions.

Loading thumbnail…

Fork of ICE-7 Line Chart

This line chart visualizes the cost of sales from 2000 to 2013, plotting year on the x-axis and cost on the y-axis. The chart uses d3.scaleTime and d3.scaleLinear for axis scaling, with d3.line generating the path. Axes are rendered via d3.axisBottom and d3.axisLeft, with grid lines created through tickSize. Data is loaded as CSV from a GitHub gist, with date parsing for the year field. The SVG rendering includes labeled axes and a title, styled via CSS classes for ticks, labels, and the line path.

Loading thumbnail…

Fork of Pie Chart

This fork of a pie chart displays the top eight dog breeds by maximum male height, with each slice sized according to that value. The chart uses a categorical color scale and includes a legend listing breed names alongside their heights in inches. The visualization is built with React and D3 v5, using `d3.pie` and `d3.arc` to generate SVG paths, while `d3.scaleOrdinal` assigns the colors. Data is loaded via `d3.csv` from a GitHub gist, and the code sorts the dataset before rendering the top entries.

Loading thumbnail…

Fork of piechart ic7

This visualization shows the top 10 car-producing countries in 2019 as a pie chart, with each slice representing a country’s total production value and a legend listing country names alongside their values in thousands. The code loads CSV data via a gist URL using `d3.csv`, then processes it with `d3.pie` and renders SVG paths using `d3.arc`. Colors are assigned via `d3.scaleOrdinal`, and the chart is positioned with SVG transforms. The legend is built manually with circles and text elements, while values are formatted using `d3.format`. The page is styled with custom CSS.

Loading thumbnail…

Fork of Fork of Fork of piechart ic7

This example shows a pie chart of the top 10 car production countries, using the `max_height_male` column from a CSV dataset as the value for each slice. The chart is rendered as SVG with D3 v5, using `pie()` and `arc()` to compute the angles and `scaleOrdinal` for a custom color range. A legend on the right displays country names and their corresponding values, formatted with `format('.5~g')`. The data is loaded asynchronously via `d3.csv` from a GitHub gist, and the entire visualization is positioned with SVG groups and transforms.

Loading thumbnail…

Fork of Pie Chart

This example displays a pie chart of the basic cost of Netflix for the top eight dog breeds by maximum male weight, using data from a CSV file hosted on GitHub. The chart is rendered as SVG in a React app, with D3 v5 APIs including `d3.pie`, `d3.arc`, `d3.scaleOrdinal`, and `d3.csv`. A legend lists each breed with a color swatch and its associated dollar value, while mouseover events log the breed name to the console. The visualization uses `d3.schemeCategory10` for color encoding.

Loading thumbnail…

ICE-6 11640007 Scatterplot

This scatterplot visualizes male versus female maximum weight for dog breeds, with each point colored by species (blue for Great Dane, yellow for Border Collie, red for Schipperke, black otherwise). The code loads CSV data via `d3.csv`, maps it with `scaleLinear` and `extent`, and renders circles using `selectAll().join()`. It draws axes with `axisLeft` and `axisBottom`, sized to the window. Height values are stored as circle attributes (`rx`, `ry`) but only the radius is visually applied, leaving the scatter plot focused on weight dimensions.

Loading thumbnail…

Fork of Fork of Penguin Data set scatter Plot

This interactive scatter plot visualizes the Iris dataset, mapping sepal length against petal length for individual flowers, with each point rendered as a circle in an SVG. The visualization uses D3 v5’s `scaleLinear` and `extent` functions to compute scales, while the axes are drawn using `axisLeft` and `axisBottom`, with custom labels and a title.

Loading thumbnail…

Fork of ICE6 - Q2: Scatter Plot for Penguin Dataset

This visualization displays a scatter plot of the Palmer Penguins dataset, showing the relationship between flipper length and body mass for three penguin species, each represented by a distinct color. The plot includes labeled axes for flipper length (mm) and body mass (g), with a title. The code uses D3 v6 APIs such as `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to load data and render SVG circles. The data comes from a GitHub Gist URL, and the visualization fills the entire browser window, with circles sized at a fixed radius.

Loading thumbnail…

Fork of Fork of Penguin Data set scatter Plot

This scatter plot visualizes the relationship between texture_mean and body_mass_g from the ICE6breastcacer dataset, with data points colored by species (yellow for Adelie, green for Gentoo, brown for the default). The visualization uses d3.v5 APIs including `csv`, `select`, `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` to render an SVG. It encodes additional dimensions by mapping radius_mean and texture_mean to ellipse `rx` and `ry` attributes, producing an unusual hybrid of circles and ellipses for each record.

Loading thumbnail…

Fork of Penguin Data set scatter Plot

This example presents a scatter plot of the Penguin Data set, displaying the relationship between texture_mean and body_mass_g for each penguin, with colors distinguishing species (Adelie, Gentoo, and Chinstrap). The code loads a CSV file from a GitHub gist using d3.csv, parses the data, and uses d3.scaleLinear to map values to pixel coordinates. It renders circular marks with an SVG selection and the join pattern, adds axes with d3.axisLeft and d3.axisBottom, and labels the plot with SVG text elements, all within a React-less D3 v5 setup.

Loading thumbnail…

ICE6 RAJA YASWANTH VARMA VEGESNA (11640007)

This example visualizes the maximum life expectancy of 15 dog breeds using a horizontal bar chart rendered as SVG. The chart displays each breed’s name along the y-axis and a numeric scale along the x-axis. It uses React with hooks (useState, useEffect) to load and parse CSV data via d3.csv, then d3.scaleBand and d3.scaleLinear to position bars and ticks. Grid lines and axis labels are drawn manually with SVG elements, while d3.max and d3.format support the data domain.

Loading thumbnail…

ICE6 RAJA YASWANTH VARMA VEGESNA (11640007)

This visualization displays the maximum life expectancy (in months) of twelve dog breeds using a horizontal bar chart. The chart ranks breeds along the y-axis with bar lengths proportional to their life expectancy values. Built with React and D3 v5, it uses `d3.csv` to load data from a GitHub gist, `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and renders SVG rectangles. Red gridlines are drawn from `xScale.ticks()` to aid readability.

Loading thumbnail…

VRYV ICE-6

This example displays the cost per month of basic internet plans for the first 12 teams in an IPL 2023 dataset, shown as a horizontal bar chart. Each team’s cost is encoded by bar width using `scaleLinear`, while team names are positioned on the y-axis with `scaleBand`, and red gridlines are drawn from `xScale.ticks()`. The React component loads data via `d3.csv` and renders SVG elements with `ReactDOM.render`, using D3 v5 scales and selection methods inside a functional component with hooks.

Loading thumbnail…

Fork of ICE5

This example presents metadata about an IPL 2023 players’ price dataset, displaying the file size, row count, and column count in a large, bold preformatted text block. The page uses D3 v7’s `d3.csv` to fetch and parse the CSV from a GitHub gist, then relies on `d3.csvFormat` to calculate the dataset size in kilobytes. Styled with a background image and red headings via CSS, the visualization is a minimal HTML page that summarizes the data’s structure without plotting any charts.