R

Ravi Teja Bonam

@ravitejabonam·20 public vizzes

Loading thumbnail…

Graph Example

This example shows a force-directed network graph of 13 named nodes connected by 13 weighted links, with each node colored according to its assigned color property and labeled with its name. The visualization uses the D3.js v2 library, creating an SVG rendering that lays out the graph through the `d3.layout.force` API, positioning nodes with charge and distance settings. Links are drawn as lines whose stroke width scales with the square root of the link weight, and nodes are draggable circles with text labels. Data is loaded from the `graph.json` file, and the layout updates position coordinates on each tick event.

Loading thumbnail…

Tree Example

This example shows an interactive family tree built with D3.js, displaying a hierarchical dataset of names and parent-child relationships. The visualization uses the `d3.layout.tree` layout to position nodes and `d3.svg.diagonal` for the curved links between them. Each node is rendered as an SVG circle with a text label, and clicking on a node toggles its children, collapsing or expanding that branch. The nodes and links animate smoothly via transitions, with colors indicating different levels in the hierarchy.

Loading thumbnail…

Map of India with D3 - chloropleth map

This choropleth map of India colors each state using D3’s `scaleOrdinal` and `schemeCategory10`, with state names placed at the centroid of each polygon via `geoPath.centroid`. It uses the `geoMercator` projection, `topojson.feature` to parse India’s states from a TopoJSON file, and renders SVG paths with black strokes between states. The map loads data from a remote TopoJSON source and appends interactive tooltips using SVG `<title>` elements.

Loading thumbnail…

World Map

This example displays a world map with green landmasses, black country borders, and an aqua ocean rendered as SVG. It uses `d3.geoNaturalEarth1` and `d3.geoPath` to project and draw geographic features, with `topojson.feature` extracting country polygons from a world-atlas TopoJSON source. The code also appends a sphere path to outline the globe, with styling controlled by CSS classes.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example shows an interactive scatter plot of the Iris dataset, where the x-axis cycles through four numeric columns (petal width, sepal width, petal length, sepal length) every 1.5 seconds, while the y-axis stays fixed to sepal length. Each point is colored by species using a d3.scaleOrdinal with a viridis-like palette, and a static legend identifies the three species. Built with D3 v6, the visualization uses d3.csv to load data, d3.scaleLinear and axisLeft/axisBottom for axes, and a reusable scatterPlot function that updates circle positions and axis labels on each interval.

Loading thumbnail…

Area Chart

This area chart displays annual US automotive sales from 2005 to 2022, with dates on the x-axis and sales numbers on the y-axis. Using D3 v5, the code loads CSV data and renders an SVG with `d3.scaleTime` and `d3.scaleLinear` for scales, `d3.axisLeft` and `d3.axisBottom` for axes, and `d3.area` with `curveBasis` to generate the filled path. The chart includes labeled axes and a title, with data sourced from a GitHub gist.

Loading thumbnail…

Line Chart

This line chart, titled “US Auto Sales from 2005 to 2022,” visualizes annual automotive sales trends over time. The chart plots sales values on the y-axis against yearly dates on the x-axis, using a red path to connect the data points. Built with D3 v5, the visualization uses `d3.scaleTime` and `d3.scaleLinear` for axes, with `d3.axisBottom` and `d3.axisLeft` for tick marks, and `d3.line` for the path. The data is loaded from a CSV file via `d3.csv` and rendered as SVG.

Loading thumbnail…

Pie Chart

This pie chart visualizes 2022 US auto sales by brand, using a CSV data source loaded from a GitHub gist. Each slice represents a brand's year-to-date sales, with colors assigned via `scaleOrdinal` and the chart drawn using `d3.pie` and `d3.arc`. A legend displays the brand name, its percentage of the total, and sales volume in thousands. The visualization is rendered as an SVG using D3 v5, with data parsed and aggregated in JavaScript.

Loading thumbnail…

Scatter Plot - ICE6

This scatter plot visualizes the Iris dataset, mapping petal length against sepal length. Points are colored by species using a viridis-like ordinal scale, with a legend showing the species categories. The visualization is rendered as an SVG using D3 v6, employing `scaleLinear` for axes, `axisLeft` and `axisBottom` for tick marks, and `select` to build the chart. Data is loaded via `csv` from a remote URL, with margin-based positioning and custom label styling.

Loading thumbnail…

Untitled

This 3D scatter plot visualizes the classic Iris dataset, showing sepal length, sepal width, and petal length as coordinate axes with points colored by species. The rendering uses Plotly.js’s `scatter3d` trace type via the `Plotly.newPlot` API, while data loading relies on D3’s `d3.csv` method. The code assigns per-species numeric color values (0, 0.5, 1) and maps them through a custom `pl_colorscale` with discrete bands in cyan, magenta, and purple. Three.js is referenced in the README, though the actual plot is drawn entirely through Plotly’s WebGL-backed scene.

Loading thumbnail…

Fork of 3d scatter

This example shows an interactive 3D scatter plot of the classic Iris dataset, with sepal length, sepal width, and petal length mapped to the x, y, and z axes. The plot uses Plotly’s `scatter3d` trace to render markers, while D3’s `csv` method loads the data from a GitHub gist. The code applies pastel-colored axis panels, white gridlines, and zero lines within the `scene` layout, and removes the default margins for a clean, immersive view.

Loading thumbnail…

d3-x3d : 3D Bar Chart Example

This example shows 2021 quarterly sales for top US automotive brands as an interactive 3D bar chart. The visualization uses the d3-x3d library to render D3.js v5 selections into X3DOM scenes, with bars representing each manufacturer’s quarterly sales figures. Data is loaded asynchronously from a GitHub-hosted CSV using d3.csv, with each row parsed into a multi-series format. The chart is initialized via d3.x3d.chart.barChartMultiSeries() and bound to a DOM element through D3’s datum() and call() methods.

Loading thumbnail…

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

This interactive data visualization displays the top 10 most populous countries using a bar chart, with data sourced from a COVID-19 CSV dataset. Built with React and D3 v5, the code implements `scaleBand` and `scaleLinear` for chart axes and `csv` for data loading. It employs an SVG rendering approach, alongside a 3D bar chart visualization created with the d3-x3d library, which is initialized via `d3.x3d.chart.barChartMultiSeries()` to render the multi-series data.

Loading thumbnail…

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

This example shows a horizontal bar chart of the top 10 countries by active COVID-19 cases, with a blue grid and labeled axes. The visualization is built using React and D3 v5, where D3’s `scaleBand` and `scaleLinear` determine bar positions and lengths, while React renders the SVG elements. Data is loaded asynchronously from a CSV file using D3’s `csv` method, and the chart updates once the data arrives.

Loading thumbnail…

Fork of Fork of Fork of Episode 18 - Iterating Fast with Vega Lite API - Bar

This bar chart displays February 2022 US auto sales by brand, ranked from highest to lowest sales figures. The visualization uses the Vega-Lite API, registered through `vl.register` with Vega and Vega-Lite, to construct and render the SVG output. Data is loaded asynchronously from a CSV file via `d3.csv`, and the bar marks encode the Brand field on the x-axis and the Feb sales quantity on the y-axis, with tooltips showing exact values. The chart’s appearance is customized using the exported `config` object.

Loading thumbnail…

Fork of Religions of Largest 20 Countries

This stacked bar chart displays the estimated 2010 religion breakdown for the world's 20 most populous countries, with each bar segmented by religious affiliation. The visualization supports tooltips on bar hover and highlights specific religions when hovering over the legend entries. It uses D3.js v3 with the `d3.layout.stack` API for stacking, `d3.legend` for the color legend, and `d3-tip` for tooltips. The data originates from the Pew Research Global Religious Landscape, and the chart renders as an animated SVG.

Loading thumbnail…

Fork of Histogram

This interactive histogram visualizes the distribution of price data from a CSV file hosted on GitHub. The chart is rendered as SVG and automatically resizes with the browser window. The code uses `d3.histogram()` to bin the numeric values, `d3.scaleLinear()` for the x and y axes, and `d3.csv()` to load the dataset. Bars are drawn with SVG `rect` elements, colored steelblue, with a debounced resize handler that rebuilds the visualization on window changes.

Loading thumbnail…

Data Summary with URL

This example displays a text summary of a COVID-19 dataset loaded from a GitHub gist. It uses D3 v5’s `d3.csv` to fetch the file, then calculates and presents the data size in kilobytes, the total row count, and the column count within a `<pre>` element. A styled button links directly to the raw CSV file for viewing. The page also incorporates local ES6 modules and a CSS background image, demonstrating basic data loading and metadata extraction with D3.

Loading thumbnail…

Fork of Smiley Face Part I

This fork of the Smiley Face Part I example displays a static, stylized smiley face centered on an SVG canvas. It shows a golden circular face with a black outline, white eyes with dark pupils, and a black rectangular mouth. The visualization is built using React and D3.js, with D3’s `arc` API imported but not used. All shapes are rendered as SVG primitives—`circle` and `rect`—with hardcoded coordinates and dimensions, and the code does not include any interaction or animation.

Loading thumbnail…

Fork of Fork of HTML Starter

This example renders a smiling face using SVG circles composed with React components. The code uses React 17 and D3 v7 loaded via CDN, drawing a yellow face with black stroke, positioned eyes, and a circular boundary. It demonstrates composing SVG elements with JSX, using inline style objects and ReactDOM to mount the visualization.