SUSHMA CHIRRA

Tree

This interactive tree chart displays the libraries associated with four programming languages—Python, Java, JavaScript, C++, and PHP—with a hierarchical layout. Nodes can be clicked to collapse or expand their child libraries, triggering animated transitions. The visualization is built with D3.js version 3, using `d3.layout.tree` for the layout and `d3.svg.diagonal` for the curved links, all rendered as SVG with custom CSS styling for node circles and text.

Apr 12, 2023

World_Map

This visualization shows a world map using the Natural Earth projection, with landmasses filled in a warm beige and an ocean-colored sphere background. The code loads geographic data from the world-atlas TopoJSON dataset and uses `geoNaturalEarth1`, `geoPath`, and `geoGraticule` from D3 to render SVG paths. TopoJSON’s `feature` and `mesh` utilities extract land polygons and country borders, which are drawn as separate path elements in React. The map also displays graticule lines and country boundary strokes, with styling defined in CSS.

Africa Map

This example displays a map of Africa rendered as an SVG using D3.js version 5 within a React framework. The visualization loads GeoJSON data from a GitHub gist, applies a Mercator projection via `d3.geoMercator()`, and generates each country’s path with `d3.geoPath()`. The resulting paths are styled with a light fill and a blue stroke, showing the continent’s boundaries without additional interactivity.

Africa Map

This map of Africa visualizes the continent’s geographic features as a collection of vector paths, rendered in an SVG canvas. The visualization uses the D3.js library with a Mercator projection, centered on Africa, to convert GeoJSON feature geometries into drawable paths. The React framework manages the page structure, while D3’s `d3.geoPath` and `d3.json` API fetch and project the geographic data from a Gist-sourced JSON file, producing a white landmass outlined in grey.

Fork of Europe Map ICE8

This example displays a map of Europe using a Mercator projection centered on coordinates [13, 52], rendering country boundaries as grey strokes with white fill. The visualization uses React and D3 v5, with a `d3.geoPath` generator that converts GeoJSON features into SVG paths. Geographic data is loaded asynchronously from a GitHub-hosted GeoJSON file via `d3.json`, and the resulting paths are appended to an SVG element sized 600 by 500 pixels.

Untitled

This example displays a choropleth map of Canada using D3 v7, with provinces rendered as SVG paths via `d3.geoPath` and an Albers projection. Hovering over a province changes its fill color from green to red and triggers a tooltip div, positioned via mouse event coordinates, that shows the province name from the loaded GeoJSON data. The tooltip is shown and hidden by toggling a CSS class, and the map data is fetched from a GitHub-hosted GeoJSON file.

Fork of ICE - 8 Making Maps (Country Map) Maanas Katta

This example displays a map of Canada using the Albers USA projection, rendering the country as a single light green SVG path with black borders. It fetches world country geometries from the World Atlas TopoJSON dataset, filters the GeoJSON features to select Canada, and projects them with d3.geoPath. The visualization relies on D3 v5 and the topojson client library to convert TopoJSON into GeoJSON features for rendering.

Japan Map

This visualization displays a map of Japan rendered as SVG paths, with each geographic feature outlined in red and filled with aqua. The code uses D3 v5’s `d3.geoMercator` projection and `d3.geoPath` to convert GeoJSON features into drawable paths, centered on coordinates [13, 52]. It fetches geographic data from a remote GeoJSON URL via `d3.json`. The SVG is created with `d3.select` and appended directly to the page body, while React handles the page structure around the chart.

3D Bar chart

This example shows a 3D vertical bar chart of per-capita alcohol consumption across nine U.S. states from January to June 2020. Each month is a category on the x-axis, with a series of stacked bars for each state, colored distinctly, and the z-axis labels the states. The chart uses the Highcharts library with the highcharts-3d module, enabling a 3D column view with configurable alpha, beta, and depth parameters. Data is hardcoded as arrays of [month, value] pairs for each state series, rendered with a grouped, non-overlapping layout.

Apr 4, 2023

3D scatter plot

This 3D scatter plot visualizes insurance data, showing the relationship between BMI (x-axis), age (y-axis), and insurance charges (z-axis). Each point is colored according to the insured person's region, using a custom color scale that maps southwest, southeast, and northwest to distinct hues. The visualization is built with Plotly’s `scatter3d` trace type, with data loaded via D3’s CSV parser, and rendered in a WebGL-enabled browser. The plot features colored axis backgrounds, white gridlines, and a fully margin-less layout for an immersive view.

Fork of BONUS 1: 3D Scatter Plot

This example visualizes body mass index data as an interactive 3D scatter plot, mapping height, weight, and body fat percentage along the three axes. The plot uses green circular markers with orange outlines, and each axis is labeled with a distinct title color. The visualization loads data from a CSV file using D3.js, then constructs a 3D scatter trace with Plotly’s `scatter3d` type and renders it via `Plotly.newPlot`. The layout configuration sets margins and axis title styling within the 3D scene.

3D BarChart

This 3D bar chart visualizes monthly alcohol consumption rates across nine U.S. states from January to June 2020, with months on the X-axis and per-capita consumption on the Y-axis. Built with AnyChart, it uses the `anychart.column3d()` API to render the bars, with `chart.zAspect()`, `chart.zPadding()`, and `chart.zAngle()` configuring the three-dimensional perspective. The chart includes animation via `chart.animation(true)`, a legend, custom tooltips with dollar formatting, and hover interactivity set to *single* mode. Data is provided as hardcoded rows in the script, using the library’s built-in cartesian-3d module.

Fork of Bonus ICE - 3D Bar chart

This example shows a 3D vertical bar chart comparing total downloads for seven popular applications across six different app stores. Each app is positioned along the x-axis, with stacked volume bars extending along the z-axis to represent the download totals from each store, while the y-axis indicates the download count. The visualization uses the Highcharts library with its highcharts-3d module, enabling a rotated, perspective view through the chart’s `options3d` settings for alpha, beta, and depth. The data is hardcoded in the series arrays, with each store as a separate stacked series.

Area Death's

This area chart displays the average age of diabetic patients over time, using a red filled curve to emphasize the trend. The visualization loads CSV data via `d3.csv` and renders an SVG using D3 v5, with `scaleTime` and `scaleLinear` for axes. It employs `d3.area` with a `curveBasis` smoothing function, styled through external CSS. Axis labels and a title are added using SVG text elements, with tick formatting applied via `d3.format`. The data source is a remote gist, and the chart includes custom margins and gridlines.

Avg Diabetic Age

This line chart displays the average age of diabetic individuals over a range of years. It uses the D3 v5 library, with `d3.scaleLinear` for both axes, `d3.axisBottom` and `d3.axisLeft` for tick marks, and `d3.line` with a basis curve to create a smooth path. The SVG rendering includes gridlines, axis labels, and a title, with data loaded from a CSV file via `d3.csv`. The line is styled green with three-pixel width in CSS.

Pie Chart

This example displays a pie chart visualizing Hulu users across the top 10 counties, with each slice representing the basic cost of subscriptions. The chart uses d3.pie and d3.arc to generate the segments, with d3.scaleOrdinal and d3.schemeCategory10 assigning colors. Legends are rendered as SVG rectangles and text, listing country names alongside their user counts in thousands. Data is loaded via d3.csv from a remote gist, then sorted and filtered to the top 10 entries before rendering.

Reusable scatter plot with different symbols

This example presents the classic Iris Dataset as an interactive scatter plot rendered with SVG. It maps petal length to the x-axis and sepal width to the y-axis, using distinct symbols and colors (yellow, orange, navy) to differentiate the three iris species. Built with D3 v6, the code defines a reusable `scatterPlot` component that leverages `scaleLinear`, `scaleOrdinal`, `symbol`, and `axisBottom`/`axisLeft` to generate the chart. The visualization resizes to the full browser window and parses the CSV data via `d3.csv`.

Fork of Reusable_D3_Scatter_Plot.

This interactive scatter plot visualizes the Iris dataset, displaying sepal and petal measurements across four rotating combinations of axes. The chart cycles through different variable pairings every few seconds, with each of the three iris species color-coded by its species name. Built using D3 v6 and React, the visualization employs `scaleLinear` for axis scaling, `axisLeft` and `axisBottom` for tick rendering, and SVG circles for scatter marks. A custom legend and descriptive axis labels are included, while the animation uses `setInterval` to update the chart's x-value mapping.

Reusable_D3_Scatter_Plot.

This example shows an animated scatter plot of the Iris dataset, cycling through different combinations of sepal and petal measurements on the x-axis while keeping petal width on the y-axis. Data points are colored by species, with a legend and axis labels updating dynamically. Built with React and D3 v6, it uses the `scatterPlot` reusable chart function, `scaleLinear`, `axisLeft`, `axisBottom`, and `setInterval` to update the x-value mapping. The SVG rendering includes animated transitions and custom styling via CSS.

Fork of Line_Stroke_Death

This fork of Line_Stroke_Death displays one week of San Francisco temperature data in Celsius as a smooth orange line chart, with month on the x-axis and users on the y-axis. The visualization uses d3.scaleLinear for both axes, d3.line with curveBasis for the path, and d3.axisBottom and d3.axisLeft for tick marks. Data is loaded as CSV from a GitHub gist, styled with an orange stroke and thick line width, and rendered as SVG in a 960x500 viewport.

Mar 29, 2023

Fork of Line_Stroke_Death

This line chart displays temperature data for San Francisco over one week, sourced from Data Canvas - Sense Your City. It plots monthly usage values on both axes, with an orange curved line connecting data points. The visualization uses D3 v5’s scaleLinear, scaleTime, axisBottom, axisLeft, and line generator with curveBasis. SVG elements render the chart, including gridlines via tickSize, axis labels, and a title. Data is loaded from a CSV file using d3.csv.

Mar 28, 2023

Fork of ICE - 7 Pie Chart Maanas Katta

This pie chart displays the distribution of Amazon users across the top 10 countries, with each slice labeled by its value in thousands and a corresponding legend listing countries and their respective user counts. Built with D3 v5, the visualization uses the `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` APIs to generate and color the arcs, while `d3.select` and `d3.format` handle SVG rendering and tick labels. Data is fetched asynchronously from a CSV file via `d3.csv`, and the chart is rendered as SVG elements within a 960x500 canvas.

Mar 28, 2023

Fork of Reusable_D3_Scatter_Plot.

This interactive scatter plot visualizes the Iris dataset, with each point colored by species (setosa, versicolor, or virginica). The visualization cycles through four different x-axis attributes—petal width, sepal width, petal length, and sepal length—at regular intervals, updating the chart dynamically using `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft`. A legend and axis labels are rendered as SVG text elements. The animation is driven by `setInterval`, which re-calls the reusable `scatterPlot` function built on D3 v6.

Mar 28, 2023

Scatter Plot for Penguin Dataset

This visualization shows a scatter plot of the Palmer Penguins dataset, plotting culmen length against culmen depth for individual penguins. Each point is colored by species—pink for Adelie, blue for Chinstrap, and green for Gentoo—using a custom marker function. The D3 v6 code loads the CSV data via `d3.csv`, applies scales with `scaleLinear` and `extent`, and renders circles as SVG elements with `selectAll().data().join()`. Axes are generated with `axisLeft` and `axisBottom`, while labels describe flipper length and body mass, though the plot itself displays only the two culmen measurements.

Mar 24, 2023

ICE-6 Bar Graph

This bar graph shows average monthly rent prices for twelve US cities, with city names on the vertical axis and rent amounts on the horizontal axis. The visualization uses React hooks to manage state and fetch CSV data via `d3.csv`, then renders SVG rectangles scaled through `scaleBand` for the y-axis and `scaleLinear` for the x-axis. Grid lines are generated with `xScale.ticks()` and labeled using text elements. The data comes from a gist-hosted salaries CSV file, and the graph updates once the asynchronous data loading completes.

Mar 24, 2023

Scatter Plot

This scatter plot visualizes penguin measurements, plotting fil length against cul length, with colored circles representing species: blue for Adelie, yellow for Gentoo, and red for others. The SVG chart uses D3 v6 scales, axes, and data joins, loading CSV data via d3.csv. Point positions map to x and y scales derived from the data extents, while circle fill colors are assigned through a custom marker function. Axis labels and tick styling are configured through D3’s axis generators, rendering in a full-window responsive layout.

Scatter Plot

This scatter plot visualizes the relationship between body mass and flipper length for three penguin species, with data from a kangaroo CSV file. Using D3 v6 within a React framework, the SVG chart maps each point’s color to its species via a switch statement, while x and y axes are generated with `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`. Circles are positioned using `cx` and `cy` attributes, with additional `rx` and `ry` properties set but not visually altering the radius.

Fork of Fork of Fork of Fork of ICE-6 Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length and width on the axes while encoding sepal measurements into the circles' rx and ry attributes. Points are colored by species—blue for setosa, yellow for versicolor, and red for virginica—using D3 v6 methods like `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `selectAll().data().join()`. The visualization loads CSV data via `d3.csv`, renders as SVG in a React framework, and prominently labels both axes with custom text styling.

Fork of Penguin Data set scatter Plot

This fork of the Penguin Data set scatter plot visualizes the relationship between flipper length and body mass, with points colored by species (Adelie, Gentoo, and Chinstrap) using yellow, green, and brown. The plot is rendered as an SVG using D3 v5, with scales created via `scaleLinear` and axes drawn using `axisLeft` and `axisBottom`. Data is loaded asynchronously from a CSV URL with `d3.csv` and parsed into numeric fields; the code also includes a custom `join` operation to add circles for each data point, and axis labels are styled with cursive fonts. The implementation is a small React project, though the core plotting logic is entirely D3-based.

Fork of Temperature in San Francisco Line Chart

This area chart visualizes a week of temperature readings in San Francisco, with time on the x-axis and temperature on the y-axis. The chart uses a maroon-filled area beneath a smooth curve to emphasize the temperature trend over the week. The code relies on D3 v5’s `scaleTime`, `scaleLinear`, `area`, `curveBasis`, `axisBottom`, and `axisLeft` APIs to construct the SVG rendering. Data is loaded as a CSV from a GitHub gist, with timestamps parsed as dates and temperatures as numbers. Axis grid lines and labels are customized through D3’s tick and padding settings.

Fork of Temperature in San Francisco Line Chart

This line chart shows temperature readings over time at different locations, with a filled area beneath the curve. The visualization uses a time scale for the x-axis and a linear scale for the y-axis, with axes rendered via `axisBottom` and `axisLeft`. The area is drawn using the `area` generator with a `curveBasis` interpolation, and data is loaded from a CSV file using `d3.csv`. Titles and axis labels are added as SVG text elements, with styling defined in a separate CSS file.

Fork of Temperature in San Francisco Line Chart

This example visualizes the number of jobs across different metro areas using a filled area chart. The rendering is SVG-based, using D3 v5 APIs such as `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `area` with a `curveBasis` interpolation to smooth the path. The data is loaded as CSV from a GitHub gist, with the y-axis representing metro regions and the x-axis showing job counts as time-based values. The chart includes labeled axes, a title, and a maroon filled area to emphasize the distribution of jobs.

ICE-6 Bar Graph

This bar chart displays the basic monthly cost of COVID-19 cases for twelve countries, with countries listed on the vertical axis and cost values on the horizontal axis. The visualization uses React state management to asynchronously load data from a CSV URL, then renders the chart with D3’s scaleBand and scaleLinear functions. The SVG output includes axis ticks, red gridlines, and horizontal bars whose widths are proportional to each country’s cost data.

Fork of Fork of Fork of Fork of ICE-6 Scatter Plot

This scatter plot displays the Iris dataset, mapping petal length and width for each flower sample. Points are colored by species—blue for setosa, yellow for versicolor, and green for virginica—using a custom `switch` statement. The visualization is built with D3 v6 in a React-free HTML page, using `d3.scaleLinear` to establish scales, `d3.csv` to load the data, and SVG circles for rendering. Axis labels for petal length and sepal length are added via SVG text elements, with tick text formatted at 24 pixels.

Mar 10, 2023

ICE 5

This gallery entry displays a static, full-screen raster image of a landscape, likely a scenic or geographic view, rendered within an SVG container. The image is embedded as a base64-encoded JPEG and applied as a repeating pattern using SVG `<pattern>` and `<use>` elements, which reference the encoded image data via an `<image>` tag. D3.js version 5.11.0 is loaded as the sole JavaScript dependency, but the visualization itself relies on core SVG and XML namespace features rather than any D3 API or interaction logic. The accompanying HTML includes minimal CSS for styling the page, with no visible React or WebGL implementation present despite the framework and rendering metadata.

Mar 9, 2023

Fork of D3 Starter

This example demonstrates the minimal setup required to run a D3 visualization with version 7. It renders the text “Hello D3 version 7” in the center of the page using the `select` API from D3. The page loads D3 from a CDN, styles the body with a large font size, and calls `select('body').text(...)` to set the content. The code serves as a basic entry point for building more complex charts with the library.

Mar 8, 2023

Loading and Parsing Cs Datas

This example demonstrates the initial steps of data loading and parsing for CSV data, displaying file size, row count, and column count in a styled text container. The page fetches a raw CSV file from a GitHub gist using the Fetch API and parses it with d3.csvParse. The asynchronous fetchText function retrieves the file contents, and the resulting statistics are presented alongside a decorative image of tulips, with the code built on D3 v5 and plain HTML/CSS/JavaScript.

Mar 8, 2023

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

A grid of small, randomly colored diamond shapes overlays a large, ornate SVG path drawing of the Buddha. The shapes are generated by triple-nested React map iterations over a numeric array, with each point’s position, fill color, and rotation determined by repeated calls to `Math.random()`. The code uses React and ReactDOM to render the SVG elements directly within the JSX, while the Buddha silhouette is a static path defined in the same component.

Mar 1, 2023