B

bhanuteja1807@gmail.com

@Bhanuteja-1807·46 public vizzes

Loading thumbnail…

Fork of D3 Starter

This example is a minimal D3 Starter template that displays a large, static number “13” centered on a blank page. The page is styled with a massive 13em font size and loads the D3.js v7 library from a CDN, though no data visualization or D3 API is actually used in the visible code. The repository also contains a separate HTML file embedding a Tableau dashboard for Airbnb analysis, indicating the project mixes D3 setup with an external Tableau embed, but the default view simply renders the oversized text without any interactive or graphical elements.

Loading thumbnail…

Airbnb Dallas Price Heatmap

This heatmap visualizes Airbnb rental prices across Dallas, using a color gradient to show how nightly costs vary by geographic location. The visualization plots price values against longitude and latitude coordinates, with the chart title and axis labels clarifying the spatial distribution. Built with Plotly's JavaScript API, the code loads data from a local CSV file using `Plotly.d3.csv`, then constructs a single heatmap trace with the `type: 'heatmap'` parameter. The resulting map is rendered into a designated HTML div element using `Plotly.newPlot`.

Loading thumbnail…

Fork of Fork of USA Country Map

This choropleth displays the fifty US states overlaid with white interior borders, using pink fill that shifts to a warm orange on hover. The map is rendered as an SVG using a React component that loads TopoJSON geographic data from the `us-atlas` package, projecting it with the `geoAlbersUsaTerritories()` function. The `d3.geoPath()` API converts the data into SVG paths, while `topojson.feature()` and `topojson.mesh()` extract boundaries and interior lines from the source topology.

Loading thumbnail…

Fork of Fork of Fork of ICE8 - Social Network Graph

This social network graph visualizes friendships among eight people, with nodes representing individuals and links showing their connections. The graph layout is computed using d3.forceSimulation, which applies link, charge, collision, and center forces to position the nodes and edges. The SVG rendering displays yellow circles with person names, using arrow markers on lines to indicate relationship direction. Dragging and hovering interactions are enabled through D3's drag behavior and CSS class toggling, allowing users to explore the network dynamically. The data comes from a JSON file containing node and link definitions.

Loading thumbnail…

Fork of Network graph

This example shows a small network graph of eight friends, with nodes labeled by name and grouped by color, connected by ten weighted links. The graph is laid out using `d3.layout.force`, with link thickness proportional to the data’s `weight` attribute. Nodes are rendered as brown circles and red text, and the simulation updates positions on each tick. Data is loaded from a local `data.json` file, and the visualization is drawn to an SVG canvas using D3 v4 and v2 libraries.

Loading thumbnail…

Fork of Fork of ICE - 8: Visualizing Tree MAYUa

This example visualizes a family tree as a collapsible hierarchical diagram. It shows three generations of the Reddy family, with each node representing a person and orange curved links connecting parent-child relationships. The tree layout uses D3.js version 3 to position nodes, while SVG circles and text labels render each individual. Users can click any node to expand or collapse its children, with smooth 750-millisecond transitions animating the layout changes. Node colors and text styling are controlled via inline CSS and per-node color properties.

Loading thumbnail…

Fork of React Starter

This example shows a full-screen React application displaying a single large message, "Hello World," centered vertically and horizontally in the browser window. The interface is minimal, with no interactive controls or dynamic elements. The application is built using React 16.13.1 for component rendering and ReactDOM to mount the root component into the DOM. The code relies on the production builds of both libraries loaded from a CDN, with a separate `bundle.js` file containing the transpiled application logic.

Loading thumbnail…

Fork of ICE 8 Family Tree

This example presents a family tree as a zoomable, horizontal node-link diagram. It visualizes hierarchical relationships across multiple generations, with each individual represented as a labeled node and colored links connecting parents to children. The visualization uses D3 v5's `tree` layout and `linkHorizontal` generator to position nodes and draw curved paths, while labels display each family member's name with distinct colors. The SVG scene supports pan and zoom through D3's `zoom` behavior, and the code loads data from a JSON file, using the `hierarchy` function to structure the nested family data.

Loading thumbnail…

Fork of Fork of Bhanu's USA Country Map

A fork of Bhanu’s USA country map draws every US state in blue with black interiors and turns a state purple on hover. It uses D3 v5’s `geoPath` with the `geoAlbersUsaTerritories` projection to render geographic features from TopoJSON data. React manages the loading state, and the SVG paths are styled through CSS.

Loading thumbnail…

Fork of Let's make a map with D3.js!

This visualization renders a world map using a Natural Earth projection, displaying countries as light green polygons against a blue ocean sphere. It loads geographic data from the world-atlas TopoJSON dataset, which is converted to GeoJSON using the `feature` function from topojson. The map is drawn as SVG paths via `d3.geoPath`, with the projection defined by `d3.geoNaturalEarth1`. The code first draws the sphere outline, then appends country paths with a stroke for boundaries, all within a static 960x500 viewport.

Loading thumbnail…

Fork of world map w/ cities & countries pop!

This visualization displays a world map with cities and countries, using proportional symbols to encode population data. City locations are shown as circles, with their radius scaled according to population, while countries are shaded with an opacity value that reflects their total population, using data from the UN Population 2019 dataset. The map is rendered using D3.js geo projections with a Natural Earth projection, and the `d3.geoPath` API draws the geographic features. Country boundaries come from the World Atlas TopoJSON, and the city data is sourced from Simplemaps, with the entire scene rendered as an SVG.

Loading thumbnail…

Fork of ICE-7 Area Chart

This example shows the cost of sales from 2000 to 2013, drawn as a smooth area chart. A yellow area fills the space under a black line, with labeled axes for year and cost. The visualization is built using React and D3 v5, leveraging `d3.line` and `d3.area` with `curveBasis` for the smoothed paths, and `d3.scaleTime` and `d3.scaleLinear` for the scales. Data is loaded from a remote CSV, parsed into dates and numbers, and rendered as SVG with axes from `d3.axisBottom` and `d3.axisLeft`.

Loading thumbnail…

ICE-6: Rendering Marks and Channels with React & D3

This example visualizes the basic cost of Netflix subscriptions across 15 countries using a horizontal bar chart rendered as SVG. React manages the component state and lifecycle, fetching CSV data via D3’s `d3.csv`, while D3 scales (`scaleBand`, `scaleLinear`) and axis helpers (`axisLeft`, `axisBottom`) position the marks. The chart encodes cost with bar width and country names on the y-axis, with gridlines and tick labels drawn manually using SVG elements. Data comes from a GitHub-hosted CSV file.

Loading thumbnail…

ICE-6: Rendering Marks and Channels with React & D3

This example displays the basic cost of Netflix subscriptions across 15 countries using a horizontal bar chart. Built with React and D3 v5, it loads CSV data via `d3.csv` and renders SVG marks through React components. The chart uses `d3.scaleBand` for the categorical y-axis (countries) and `d3.scaleLinear` for the quantitative x-axis (cost in USD). Grid lines and axis ticks are generated with `xScale.ticks()`. The underlying dataset is derived from public Netflix pricing information.

Loading thumbnail…

Fork of ICE-7 Line Chart

This fork of ICE-7 Line Chart visualizes the cost of sales from 2000 to 2013 using an SVG line chart. The chart plots year-based data on the x-axis against cost values on the y-axis, with axis labels and a title displayed directly. Data is loaded from a CSV file via `d3.csv`, and the visualization is built with D3 v5, using `scaleTime`, `scaleLinear`, `line`, `axisBottom`, and `axisLeft` to construct the scales, path, and axes. The final rendering is a red stroke line path within a 960x500 SVG container.

Loading thumbnail…

Fork of ICE-7 Line Chart

This example shows the basic cost of Netflix per month across different countries, with the x-axis representing countries and the y-axis showing the basic cost value. The visualization uses D3 v5 to load CSV data from a GitHub gist, which is parsed so that the country values are treated as numeric and the cost as dates. The line chart is rendered in SVG, using `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, `d3.axisBottom`, and `d3.axisLeft` to generate the chart elements. Gridlines are drawn via tick sizing, and a title labels the graph.

Loading thumbnail…

Fork of Pie Chart

This example visualizes the basic cost of Netflix per month for ten countries, sorting the data from highest to lowest cost. The visualization uses a pie chart to represent the proportional costs, with a color-coded legend listing each country, its corresponding color swatch, and its monthly price in dollars. Built with D3 v5, the code uses `pie` and `arc` to generate the chart’s segments, while `scaleOrdinal` with `schemeCategory10` assigns colors. The data is loaded from a CSV file via `csv`, and the chart is rendered as an SVG with React, with interactions logging the cost value on mouseover.

Loading thumbnail…

Fork of Reusable scatter plot with different symbols

This scatter plot displays the Iris dataset, plotting petal width against sepal length, with each species (setosa, versicolor, virginica) represented by a distinct symbol. The visualization is constructed as a reusable D3 function, `scatterPlot`, which uses `scaleLinear` for axes, `scaleOrdinal` to map species to symbol types via `symbols`, and `symbol().size()` to generate the marker paths. The `index.js` orchestrates loading CSV data with `csv`, parsing numeric fields, and applying the plot function to an SVG, while also adding custom axis labels and a title.

Loading thumbnail…

Reusable scatter plot with different symbols

This example presents a reusable scatter plot comparing sepal length and petal width from the Iris dataset. It uses a D3 v6 SVG rendering with `scaleOrdinal` to assign one of the `symbols` shapes to each iris species, and `symbol().size()` to generate the path data for the data points. The chart’s axes are created with `axisLeft` and `axisBottom` from a linear scale. The `scatterPlot` function is modular, allowing configuration of data, margins, size, and value accessors through its getter-setter methods, which are invoked via `selection.call()`.

Loading thumbnail…

Fork of Reusable scatter plot with different symbols

This example is a reusable scatter plot that visualizes the Iris Dataset, using distinct symbols to represent different species. The plot maps petal width to the x-axis and sepal length to the y-axis, with axis labels rendered via `d3.axisLeft` and `d3.axisBottom`. The implementation leverages `d3.scaleLinear`, `d3.scaleOrdinal`, and `d3.symbol` to generate SVG paths for each data point. Data is loaded asynchronously from a CSV file using `d3.csv` and parsed with a custom row handler. The plot’s dimensions adapt to the browser window, and styling is applied through a linked stylesheet.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This visualization displays the Iris dataset as an animated scatter plot, cycling through different feature pairs every two seconds. It uses D3.js v6 with reusable chart components, employing `scaleLinear` for axes, `scaleOrdinal` with `symbols` for point shapes, and `axisLeft`/`axisBottom` for tick marks. The plot transitions between four measurement columns—PetalWidth, SepalWidth, PetalLength, and SepalLength—using `setInterval` to redraw the SVG with new x-value assignments.

Loading thumbnail…

Distributed Chart for Iris Dataset

This visualization displays the classic Iris dataset as a scatterplot, mapping sepal length on the x-axis and sepal width on the y-axis, with each of the three species colored distinctly (red, green, blue). The code loads data from a CSV via `d3.csv`, uses linear scales (`d3.scaleLinear`) to map data coordinates, and renders circles (`svg.selectAll("circle")`) using the SVG rendering approach. Axes are constructed with `d3.axisBottom` and `d3.axisLeft` within a D3 v7 React-free HTML page.

Loading thumbnail…

Fork of Pie Chart

This example displays the basic cost of Netflix across countries using a pie chart, alongside a scatterplot of Iris flower measurements with axes and color-coded species. The visualization uses a React setup with d3.v5, specifically employing `pie()`, `arc()`, `scaleOrdinal`, and `schemeCategory10` to generate the pie segments and legends from CSV data. Scatterplot points are drawn with `selectAll("circle")`, and axes are created via `axisBottom` and `axisLeft`. The CSV data is fetched from a GitHub gist, and rendering is done via SVG.

Loading thumbnail…

Untitled

This example visualizes the Iris dataset by plotting sepal length against sepal width as colored circles, with red, green, and blue representing the three species. A scatterplot with labeled axes reveals the distribution and clustering of measurements. The code loads data via `d3.csv` from a GitHub gist, uses `d3.scaleLinear` to map coordinates, and renders axes with `d3.axisBottom` and `d3.axisLeft`. Each point is an SVG circle appended to a D3-selected body element, with fill colors assigned conditionally based on species.

Loading thumbnail…

Fork of Pie Chart

This fork of a pie chart visualizes the Iris dataset as a scatterplot, showing SepalLengthCm against SepalWidthCm with points colored by species (red, green, blue). The SVG is created using d3.select and appended with a `<g>` element, while d3.scaleLinear defines the x and y scales. Axes are added via d3.axisBottom and d3.axisLeft, with the chart title and data describing species distribution. The code imports d3 functions like select, csv, pie, arc, scaleOrdinal, and schemeCategory10, though the scatterplot implementation uses direct SVG circles and a remote CSV URL from a GitHub gist.

Loading thumbnail…

Untitled

This example shows a bar chart of the mean sepal length for each Iris species, highlighting differences among setosa, versicolor, and virginica. It loads the Iris dataset from a CSV file into a Dask dataframe, groups by species, and computes the mean of the sepal_length column. The resulting values are plotted using seaborn’s `barplot` and displayed with matplotlib’s `pyplot`, which sets the title, axis labels, and shows the figure.

Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This fork of ICE-6 combines React with D3 v5 to render a bar chart exploring Netflix subscription costs across countries, using data from a gist-hosted CSV. The chart visualizes four measurement categories—sepal length, sepal width, petal length, and petal width—for three Iris flower species. React manages the UI state while D3's `scaleBand`, `scaleLinear`, `select`, and `axisLeft`/`axisBottom` handle scaled axes and rendering. The example demonstrates how D3's low-level API can integrate with React components to produce an interactive, data-driven visualization without relying on abstraction layers.

Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This example visualizes the first 15 rows of the Iris dataset as a horizontal bar chart, encoding species counts along a linear scale. Built with React and D3 v5, it uses `d3.csv` to load data, `scaleBand` for the categorical y-axis, and `scaleLinear` for the quantitative x-axis. The SVG bars are rendered directly in JSX, with tick marks and labels generated manually from the scales. The page also embeds a YouTube video, while the chart itself updates reactively once data loads.

Loading thumbnail…

Fork of Fork of Fork of ICE-6 Bar Graph

This bar chart shows the monthly basic cost of Amazon services across twelve countries, with countries listed vertically and costs plotted horizontally on a red-tinted grid. The visualization loads CSV data from a GitHub gist using D3’s `csv` method and React hooks (`useState`, `useEffect`) to fetch and store the dataset. D3 scales (`scaleBand` and `scaleLinear`) position the bars, while SVG rectangles and manually rendered tick labels—instead of D3 axes—draw the chart. The React app renders the final SVG, with the data truncated to the first twelve rows for display.

Loading thumbnail…

Fork of Fork of ICE-6: Rendering Marks and Channels with React & D3

This visualization displays the basic cost of Netflix subscriptions across fifteen countries using a horizontal bar chart rendered as SVG. The code combines React hooks (useState, useEffect) to manage data loading with D3’s csv parser, scaleBand for the categorical y-axis, and scaleLinear for the numeric x-axis. Country labels and gridlines are manually generated from D3 scale domains, while bars are drawn as rect elements with widths proportional to the cost values. The chart reads from a raw GitHub-hosted CSV dataset, demonstrating a React-D3 integration for declarative mark and channel rendering.

Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This horizontal bar chart visualizes the basic monthly cost of Netflix subscriptions across fifteen countries, using data loaded from a CSV file. The visualization integrates React for component management and D3 v5 for scales and SVG rendering, with `scaleBand` and `scaleLinear` mapping countries to bars and costs to widths. React state and hooks (`useState`, `useEffect`) manage the asynchronous data loading, while custom React elements render axis ticks and rectangles directly, avoiding D3’s selection methods.

Loading thumbnail…

Fork of Piechart ICE - 7 Rohith Arabati

This pie chart visualizes the distribution of car sales across different companies, with each slice labeled by its sales value in thousands. The chart uses d3.pie and d3.arc to generate the segments, while d3.scaleOrdinal assigns colors to each company. Data is loaded from a CSV file using d3.csv, and the SVG rendering includes a legend showing company names and their corresponding sales figures. The visualization is built with D3.js version 5.

Loading thumbnail…

Fork of Piechart ICE - 7 Rohith Arabati

This pie chart visualizes the distribution of different Iris species from a dataset loaded via d3.csv. The code uses d3.pie and d3.arc to generate the chart, with d3.scaleOrdinal assigning distinct colors to each species. Each slice is labeled with a formatted value, and a legend displays the species names alongside their corresponding colors. The visualization is rendered as an SVG using D3 v5, providing a clear comparison of species proportions in the Iris dataset.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example presents the classic Iris dataset as an animated scatter plot that cycles through different feature combinations every two seconds. It demonstrates a reusable charting pattern where the plot’s axes, scales, and circles are recomputed on each update using D3 v6’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs. The visualization leverages D3’s `select` and `join` operations to update SVG circles and axis groups in place, producing a smooth transition between four variable pairings.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This fork of a reusable D3.js scatter plot animates through different iris flower measurements, cycling the x-axis every two seconds. It displays the classic Iris dataset, plotting petal width against sepal length initially. The implementation uses a custom `scatterPlot` function leveraging D3 v6 modules like `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`. The SVG visualization updates smoothly with a `setInterval`, re-binding data attributes to reflect new columns, while all points are rendered as circles with a constant radius.

Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This example shows the estimated 2010 religion breakdown of the 20 most populous countries as a stacked bar chart, with hover interactions for tooltips and legend highlighting. Built with React and D3 v5, it uses `d3.csv` to load data from a GitHub-hosted CSV, `d3.scaleBand` and `d3.scaleLinear` for axes, and renders SVG marks via React components. The data originates from the Pew Research Center’s Global Religious Landscape report.

Loading thumbnail…

Fork of #4 COVID-19 Deaths in US (NYT data) Reusable D3 Scatter Plot Framework Animated

This fork of a D3 scatter plot animates US COVID-19 rolling averages. The chart plots time on the x-axis and cycles between two y-axis metrics, cases_avg and deaths_avg, with circles animating to new positions. It uses a reusable `scatterPlot` function with d3 `scaleTime` and `scaleLinear` scales, `axisLeft` and `axisBottom` axes, and transitions on circle positions. The data is loaded via d3 `csv` from the NYT rolling-averages repository.

Loading thumbnail…

CovidStats

This visualization presents the global COVID-19 case and death counts in a dark-themed table. It uses jQuery’s `$.ajax` to fetch live country-level data from the `https://api.covid19api.com/summary` endpoint, then populates the HTML table with country, confirmed, and death figures. The DataTables jQuery plugin adds sorting and pagination, while Bootstrap 5 styles the layout, and the page uses a custom CSS gradient background.

Loading thumbnail…

Fork of Penguin Data set scatter Plot

This fork of the Palmer Penguins dataset plots flipper length on the x-axis, body mass on the y-axis, and colors each circle by species (orange for Adelie, red for Chinstrap, blue for the default). The code, written in React with D3 v5, uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` for scales and axes, while SVG circles also encode culmen length and depth via the non-standard `rx` and `ry` attributes. Data is loaded asynchronously via `d3.csv` from a GitHub Gist.

Loading thumbnail…

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 for three penguin species, with color-coded circles distinguishing Adelie, Gentoo, and Chinstrap species. The code loads CSV data via `d3.csv`, parses numeric columns, and renders an SVG chart using `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom`. Circles are positioned with `d3.attr` for x and y coordinates, while fill colors are assigned via a custom marker function. The visualization includes labeled axes and a title, with axis text styled using cursive font.

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, with each point colored by species (orange, red, or blue). It also encodes culmen length and depth via the `rx` and `ry` attributes, though these have no visual effect on circles. The visualization is built with React and D3 v5, using `d3.csv` to load data, `d3.scaleLinear` for scales, and `d3.axisLeft` and `d3.axisBottom` for axes. Data comes from a CSV file of penguin measurements, rendered as SVG circles on a full-window canvas.

Loading thumbnail…

Fork of Penguin Data set scatter Plot

This scatter plot visualizes penguin measurements, mapping flipper length on the x-axis against body mass on the y-axis, with each point colored by species (Adelie, Gentoo, or Chinstrap) using yellow, green, and brown. The code loads CSV data via `d3.csv`, parses numeric fields, and renders SVG circles using `d3.scaleLinear` for axes and `d3.axisLeft` and `d3.axisBottom` for ticks. React and D3 v5 drive the full-window responsive layout, with axis labels and a title appended as SVG text.

Loading thumbnail…

Fork of Penguin Dataset Scatter Plot

This fork of the Penguin Dataset scatter plot visualizes flipper length against body mass, with points colored by penguin species and scaled by culmen dimensions. The code loads data via `d3.csv`, parses numeric fields, and renders an SVG using `d3.select`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`. Circles are positioned with `cx` and `cy`, colored by a species-based marker function, and styled with radius, `rx`, and `ry` attributes. The chart includes labeled axes and a title, sized to the window.

Loading thumbnail…

Fork of ICE-6: Rendering Marks and Channels with React & D3

This bar chart displays the basic monthly cost of Netflix in 15 countries, derived from a CSV file loaded via d3.csv. The visualization uses React hooks (useState, useEffect) to manage data fetching, while d3.scaleBand and d3.scaleLinear construct the categorical and quantitative scales. SVG rectangles represent each country’s cost, with axis ticks generated manually using d3’s scale methods. The code combines React’s component model with D3’s data manipulation and scaling functions, rendering all marks directly in JSX within an SVG element.

Loading thumbnail…

ICE5

This example displays metadata for the Bike Share Demand dataset, showing the file size, row count, and column count after fetching the CSV with `d3.csv`. The page then renders a yellow smiley face using D3 selections, where the eyebrows animate up and down via chained `transition().duration()` calls. The visualization relies on D3 v7’s `select`, `arc`, and transition methods, while the background image and dataset are sourced from GitHub gists.

Loading thumbnail…

vizhub.js!

A D3.js visualization builds a smiley face in SVG, demonstrating fundamental DOM manipulation. The code uses `select('svg')` to access the canvas and `append` to create a green circle for the face, two eyes, eyebrows as rectangles, and a mouth drawn with an `arc()` path generator. Interactive eyebrow movement is shown in the accompanying YouTube video, though the static code only renders the initial face. The example illustrates core D3 selection and element-creation techniques within a 960x500 viewport.