BhanuMotupalli

@BhanuMotupalli·22 public vizzes

ICE 8 -Japan Map

This example displays a choropleth-free map of Japan’s prefectures, using skyblue fill and red strokes to delineate administrative boundaries. Built with D3.js, it employs `d3.geoMercator` projection, `d3.geoPath` for path generation, and `d3.zoom` for interactive pan and zoom. The geographic data is loaded from a TopoJSON file via `topojson.feature`, and `d3.scaleOrdinal` assigns categorical colors. The SVG-based visualization renders state-level polygons from the `JPN_adm1` layer.

Apr 13, 2023

Loading thumbnail…

ICE-8 Network Graph

This example visualizes a network of nine cricket players as nodes connected by eight links, with node color indicating group membership and link thickness proportional to weight. The graph is rendered in SVG using D3.js v4, with a force-directed layout created via `d3.layout.force` that applies gravity, charge, and distance parameters. Node positions update on each tick event, while drag interaction is enabled through `force.drag`. Data comes from the loaded `graph.json` file, and styling is applied through CSS classes for links, circles, and labels.

Apr 13, 2023

Loading thumbnail…

ICE-8 World Map Using TopoJson

This interactive world map uses the Eckert III projection to display landmasses and country boundaries. The visualization renders geographic features using `d3.geoPath` and `d3.geoNaturalEarth1`, with `d3.geoGraticule` drawing latitude and longitude grid lines. The React application fetches TopoJSON data from the world-atlas package, processing it with `feature` and `mesh` functions from the `topojson` library. SVG paths represent the sphere, graticules, land areas, and interior borders, styled with CSS colors like green for land and skyblue for grid lines.

Apr 12, 2023

Loading thumbnail…

ICE-8 Tree Chart

This interactive tree chart displays the hierarchical relationships among international cricket stadiums, organized by country. The visualization uses D3.js v3 with a tree layout, rendering SVG nodes and curved diagonal links with animation. Users can click on nodes to expand or collapse country branches, revealing individual stadiums like the Wankhede Stadium in India or Lord’s in England. The chart applies distinct styling—blue node strokes, aqua links, and a light green background—to enhance readability.

Apr 12, 2023

Loading thumbnail…

3D Scatter Plot

This 3D scatter plot visualizes Apple product data, mapping original price, discounted price, and ratings along the x, y, and z axes. The plotly.js library renders the interactive 3D scene, while the d3.csv method loads the data from a remote CSV file hosted on GitHub. Each marker’s size is fixed, with a semi-transparent fill and gray outline, and axis titles are colored distinctly to aid legibility. The layout’s margins are minimized to maximize the plot area within the page.

Apr 6, 2023

Loading thumbnail…

3D Bar Chart

This 3D bar chart visualizes worldwide truck sales for different manufacturers across six months of 2020. The visualization uses the d3-x3d library, which bridges D3.js and X3DOM, to render the multi-series data as interactive three-dimensional bars with labeled axes. The chart displays sales figures from April through September, parsed from a CSV dataset, and utilizes D3's CSV loader and scale functions to map the data values.

Apr 6, 2023

Loading thumbnail…

ICE-7 Area Chart

This area chart shows the number of medals won by the USA over time, with the area under the curve filled in orange. The visualization uses D3 v5 to load CSV data, apply a time-based x-scale and linear y-scale, and generate the area shape with `d3.area()`. Curve smoothing is applied via `curveBasis`, and both axes include custom tick formatting and labels. The chart is rendered as an SVG, with a title and axis labels styled in red and purple.

Mar 30, 2023

Loading thumbnail…

ICE-7 Line Chart

This line chart displays daily temperatures in San Francisco over one week, using data from the Data Canvas - Sense Your City project, with the y-axis labeled "Medals Won" and the x-axis labeled "Year" in the code. Built with D3 v5, the visualization uses d3.scaleTime, d3.scaleLinear, d3.axisBottom, d3.axisLeft, d3.line, and d3.extent to render an SVG path with styled tick lines, a green axis label, an orange title, and a purple stroke line. The data is loaded via d3.csv from a GitHub gist URL.

Mar 30, 2023

Loading thumbnail…

ICE-7 Pie Chart

This pie chart visualizes the prices of ten Burger King menu items. The visualization is built with React and rendered as an SVG using D3 v5, employing `d3.pie` to compute arc data and `d3.arc` for segment paths, with color encoding from `d3.scaleOrdinal` and `schemeCategory10`. Each slice displays the item name and price in dollars. Data is loaded from a GitHub Gist CSV file and sorted by price before rendering.

Mar 29, 2023

Loading thumbnail…

ICE-7 Reusable Scatter Plot

This interactive scatter plot animates through different pairings of Iris flower measurements, cycling between petal width, sepal width, petal length, and sepal length on the x-axis while keeping sepal length on the y-axis. The visualization uses the D3.js library loaded via React, rendering points as SVG circles whose colors map to three Iris species. It incorporates a dynamic legend and axis labels that update with each animation frame, driven by D3's `setInterval` and the reusable `scatterPlot` function.

Mar 29, 2023

Loading thumbnail…

ICE-7 Reusable D3 Scatter Plot

This interactive scatter plot visualizes the Iris dataset, mapping sepal and petal measurements to positions on a D3.js canvas. The visualization cycles through different attribute pairs every two seconds, updating the x-axis and redrawing circles using the `scatterPlot` reusable chart component. Data points are color-coded by species, with a legend indicating categories. The example demonstrates a modular approach to building dynamic charts, leveraging D3 v6's `scaleLinear`, `axisLeft`, and `axisBottom` APIs for scalable, animated data exploration.

Mar 29, 2023

Loading thumbnail…

ICE-6 Scatter Plot

This scatter plot visualizes heart stroke prediction data, showing the relationship between average glucose level (x-axis) and age (y-axis). Each circle represents a data point, with color encoding smoking status: blue for formerly smoked, yellow for never smoked, green for smokers, and red for unknown. The visualization uses D3 v6 APIs including `scaleLinear`, `axisLeft`, and `axisBottom` to construct the axes. The data is loaded from a GitHub gist CSV file using `d3.csv`, and the SVG is rendered to fill the full browser window with a custom legend implied by the color mapping.

Mar 29, 2023

Loading thumbnail…

ICE-6 Bar Graph

This example shows the prices of twelve Burger King menu items in a horizontal bar chart. Each bar’s length encodes the item’s price using a linear scale, with a red gridline for each tick on the x-axis. The chart is built with React and D3 v5, using `scaleBand` for the y-axis item categories and `scaleLinear` for price values, while `csv` loads the data from a GitHub gist. Bars are rendered as SVG rectangles, with axis ticks generated manually via `xScale.ticks()`.

Mar 23, 2023

Loading thumbnail…

ICE-6 Bar Graph

This bar chart visualizes the top 12 movie genres by IMDb rating, sourced from a CSV file. Rendered as an SVG via React, the code uses `d3.csv` to load data, `scaleBand` for the y-axis genres, and `scaleLinear` for the x-axis ratings. Red tick lines and axis labels are drawn manually, with genre names displayed on a 200-pixel left margin. The chart emphasizes horizontal bar lengths to compare ratings across genres, with a title header above the graphic.

Mar 23, 2023

Loading thumbnail…

ICE-6 Scatter Plot

This scatter plot displays Olympic medal data, comparing each country’s total medals against its bronze medal count. Each circle’s fill color encodes the country (orange for USA, blue for China, green for Japan, black otherwise), while the circle’s `rx` and `ry` attributes visually encode gold and silver medal counts, respectively. Built with React and D3 v6, it loads CSV data, uses `scaleLinear`, `extent`, and `axisLeft`/`axisBottom` for axes, and renders SVG circles via `select` and `.join`. The plot includes rotated axis labels for silver and gold medals.

Mar 22, 2023

Loading thumbnail…

Fork of Pokemon ICE 6 Scatter plot

This interactive scatter plot visualizes Pokémon attributes, mapping attack and defense values along the x and y axes. Each circle’s radius is fixed, while the fill color categorizes species, and the radius properties are set from height and weight data. The visualization uses D3.js v5, loads CSV data from a GitHub gist, and renders SVG via the `select` and `join` APIs. Axis labels and a title are added using `axisLeft`, `axisBottom`, and text elements, with the plot drawn in the browser using React’s full-window dimensions.

Mar 22, 2023

Loading thumbnail…

ICE-6 Scatter Plot

This animated scatter plot visualizes Olympic medal data for top countries, showing the relationship between total medals and gold, silver, or bronze counts. The visualization cycles through different x-axis variables using a setInterval, dynamically updating the scatter plot and axis labels. Built with D3.js version 6.7.0, it uses SVG rendering with custom color-coded markers for USA, China, and Japan. The implementation leverages D3's csv loader, scaleLinear for axes, and custom circle attributes for elliptical data points.

Mar 22, 2023

Loading thumbnail…

Fork of Fork of Fork of ICE-6 Bar Graph

This visualization displays a horizontal bar chart of the first 12 countries from an external CSV, ranking their basic monthly internet costs in US dollars. The chart encodes cost values as bar lengths on a linear scale, with a red axis grid for reference. Built with React and D3 v5, the code uses `csv` for data loading, `scaleBand` and `scaleLinear` for coordinate mapping, and renders the chart as SVG elements within a React component.

Mar 10, 2023

Loading thumbnail…

ICE-5

This example displays summary statistics about a film dataset loaded from a GitHub-hosted CSV file, showing the data’s size in kilobytes, row count, and column count. The page uses D3.js v7 to fetch and parse the CSV with `d3.csv`, formats the results via `d3.csvFormat`, and updates the text content of an HTML `<pre>` element. A static SVG background image is embedded as a data URI, while CSS styles apply layout and heading colors. The visualization focuses purely on textual data metrics rather than graphical charts.

Mar 9, 2023

Loading thumbnail…

Fork of Fork of Fork Buddha in colors -overlapping Buddha

A dense, colorful composition of overlapping, semi-transparent rectangles creates an abstract, layered visual field. The piece, titled "Fork of Fork of Fork Buddha in colors -overlapping Buddha," uses React with ReactDOM to generate a grid of randomly positioned and colored SVG `<rect>` elements. This rendering is complemented by a single, large SVG `<path>` element containing a complex, detailed curve that resembles a line drawing. The code leverages `Math.random()` for color and positioning, while the path data appears to define a filigree-like shape, all set against a black background.

Mar 2, 2023

Loading thumbnail…

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

A dense field of small, semi-transparent rectangles scatters across a black SVG canvas in a chaotic, colorful pattern, created by nested React map functions that generate random positions and RGB fill values. The visualization layers these overlapping shapes over a large, intricate Buddha path traced in white, with the geometric rectangles creating a stark contrast against the detailed line art. The code uses React and ReactDOM to render the SVG elements, with the Buddha path defined as a single complex SVG path data string and transformed and scaled within the composition.

Mar 2, 2023

Loading thumbnail…

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

A dense cluster of 8,000 semi-transparent rectangles overflows the screen, each positioned by a three-level nested map over the integers 0 through 20. The rectangles overlap heavily, creating a chaotic, layered composition of random RGB colors against a black background. React renders the SVG elements, while coordinates and color values are generated procedurally using `Math.random()`. The visualization highlights the visual noise produced by brute-force randomized geometry without any data input or layout algorithm.

Mar 2, 2023