B

bhanuprasadk19

@bhanuprasadk19·17 public vizzes

Loading thumbnail…

Fork of Social Network Graph --> ICE-8

This visualization shows a social network graph of ten individuals connected by friendship links. Each node is rendered as a circle with a person’s name, and directional arrows on the connecting lines indicate the relationship’s source and target. The layout is computed using `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, `d3.forceCollide`, and a center force. Nodes are draggable via `d3.drag`, with hover effects toggling a CSS class. Data comes from a local `data.json` file, and the SVG is rendered with D3 v6.

Loading thumbnail…

Bhanu Prasad ICE-8

This visualization shows a hierarchical tree of car brands, grouping companies like Volkswagen, BMW Group, and Hyundai with their subsidiaries such as Audi, Rolls Royce, and KIA. The diagram uses D3.js version 3 to compute the layout and render interactive SVG nodes and links, with click events that trigger smooth transitions for expanding or collapsing branches. Styling applies blue circles, violet strokes, and skyblue links, while text labels identify each brand.

Loading thumbnail…

Fork of USA Country Map

This choropleth displays the 50 U.S. states on an SVG map, using a pink fill for each state and white borders to delineate the interiors. Built with React and D3 v5, it employs the `geoAlbersUsaTerritories` projection and `d3.geoPath` to render the geographic features loaded from the `us-atlas` TopoJSON source. Hovering over a state changes its fill to orange.

Loading thumbnail…

Bhanu Prasad ICE-8 World Map

This example displays a simple world map with countries and a sky-blue sphere background. It uses the D3.js library, specifically `d3.geoNaturalEarth1` for the projection and `d3.geoPath` to generate SVG paths for the country outlines. The map loads geographic data from the world-atlas TopoJSON dataset via `d3.json` and converts it with the `topojson.feature` API. Countries are rendered as pink shapes with a thin blue stroke, providing a clear, minimal visualization of global landmasses.

Loading thumbnail…

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

This example presents a static world map rendered as SVG, showing countries as pink regions on a sky-blue spherical backdrop. The map is built using D3.js version 5 and the topojson library, which decodes GeoJSON-like data from the `world-atlas` package. The `d3.geoPath` and `d3.geoNaturalEarth1` APIs handle the projection and path generation. The code first draws a full sphere, then loads country boundaries from a remote JSON file and appends them as separate paths. The styling uses a faint blue stroke for country borders.

Loading thumbnail…

Fork of Area Chart of Uk Population

This fork of a D3.js area chart visualizes the population of Australia from 2006 to 2023, using a smooth basis curve to render both a filled area and an overlaid line. The SVG chart employs `scaleTime` and `scaleLinear` for axes, with `axisBottom` and `axisLeft` for ticks, and labels the y-axis in compact notation. Data is loaded from a local CSV file, with population values multiplied by 1000. Custom CSS styling colors the tick text orange and the area chart a light cyan.

Loading thumbnail…

Fork of D3.js Line Chart

This visualization displays country crime indices as a line chart, using a bar-chart-style categorical X axis for countries and a linear Y axis for crime scores. Built with D3 v7, it loads data from a CSV file using `d3.csv`, applies a `scaleBand` for country positioning and `scaleLinear` for the crime index range, and draws the line with `d3.line()`. The SVG chart includes axes, labels, and a thick steel-blue stroke, rendered within a fixed 960×400 pixel canvas and styled with external CSS.

Loading thumbnail…

Fork of Fork of Fork of D3.js Line Chart

This line chart displays the Crime Index for ten countries, using a categorical x-axis and a linear y-axis scaled to the maximum value in the dataset. The visualization is built with D3.js v7, employing `d3.csv` for data loading and `d3.scaleBand` and `d3.scaleLinear` for coordinate mappings. A single SVG path is drawn with `d3.line`, with the line rendered in steel blue and a stroke width of six pixels. The chart includes labeled axes, with the data sourced from the embedded CSV file.

Loading thumbnail…

Fork of Fork of D3.js Line Chart

This line chart visualizes crime indices for ten countries, with each country plotted along a categorical x-axis and its index value on a linear y-axis. The visualization uses D3.js v7, loading data from a local CSV file via `d3.csv`. The chart is rendered as an SVG using `d3.scaleBand` for the x-axis, `d3.scaleLinear` for the y-axis, and a `d3.line` path with a thick steelblue stroke. Axis labels and ticks are generated with `d3.axisBottom` and `d3.axisLeft`, while custom CSS styles the axes and line.

Loading thumbnail…

Fork of Pie Chart

A donut chart displays the top ten countries by crime index for 2020, using D3 v5 with React. The visualization renders SVG arcs via `d3.pie` and `d3.arc`, with colors from `scaleOrdinal` and `schemeCategory10`. Each slice is paired with a legend showing country names and crime index percentages, sorted descending from the CSV data loaded with `d3.csv`. Hovering over a slice logs the value to the console. The chart is styled with CSS and positioned within an SVG canvas.

Loading thumbnail…

Fork of ICE- 7 Reusable Scatter Plot

This visualization displays the Iris Dataset as a scatter plot of petal width against sepal length, with each species colored according to the d3.schemeCategory10 ordinal scale. The chart uses d3.scaleLinear for both axes and d3.axisLeft/axisBottom for gridlines. A setInterval updates the x-axis variable every 10 seconds, cycling through petal_width, sepal_width, petal_length, and sepal_length. Data points render as SVG paths with d3.symbol shapes differentiated by species, animated through D3’s data join and update pattern.

Loading thumbnail…

ICE-6

This example visualizes the relationship between flipper length and body mass across three penguin species from a CSV dataset. D3.js v7 loads the data with `csv` and renders an SVG scatter plot, coloring each point by species using a custom marker function. The x-axis maps flipper length, the y-axis maps body mass, while radius and color are also encoded with culmen dimensions and species. Axes are generated with `axisLeft` and `axisBottom`, paired with scaleLinear and extent domains.

Loading thumbnail…

Fork of Penguin Data set scatter Plot

This scatter plot visualizes the Palmer Archipelago penguin dataset, mapping flipper length against body mass for three species (Adelie, Gentoo, and Chinstrap), with each species represented by a distinct color. The D3 v5 code uses `d3.csv` to load data, `d3.scaleLinear` for axes, and manual SVG circle creation with per-species coloring. Axes are generated via `d3.axisLeft` and `d3.axisBottom` with cursive fonts, while the plot includes a title. The visualization operates within a React environment but uses direct D3 DOM manipulation rather than React components.

Loading thumbnail…

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

This horizontal bar chart displays the crime index for fifteen countries in 2020, with bars sorted by country name. Using the React framework, the example integrates D3’s `scaleBand` and `scaleLinear` to map categorical and quantitative data, while rendering SVG rectangles for bars and axes via `axisLeft` and `axisBottom` logic. Data is loaded asynchronously from a CSV file using D3’s `csv` function, and the visualization updates upon fetching the top 15 entries.

Loading thumbnail…

ICE5

This example summarizes the metadata of an employee dataset loaded from a remote CSV file. It uses D3.js v7’s `d3.csv` to fetch the data, then calculates and displays the file size in kilobytes, the total row count, and the number of columns. The computed metrics are presented as text inside a `<pre>` element, while a background SVG image (ICE-5) and hyperlinks provide context and access to the raw dataset.

Loading thumbnail…

Fork of React Starter

This example displays a centered "Hello React!" message in oversized, 13-em text. The code uses React and ReactDOM to render a single functional component into a DOM element with the ID `root`. Styling is applied via a `.message` CSS class that sets the font size and text alignment. The page loads React 16.13.1 from a UMD CDN bundle, and the JavaScript is bundled separately into `bundle.js`. The visualization is a minimal demonstration of React’s component rendering and styling capabilities.

Loading thumbnail…

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

A playful SVG face built with D3.js v5 shows a green circle with movable eyebrows, red ears, white teeth, and a frowning mouth. The code demonstrates fundamental DOM manipulation using `d3.select` and `d3.append` to construct shapes, while `transition()` animates the eyebrows upward and back down over four seconds. An `arc()` generator creates the mouth path, and rectangular teeth are bound to data via `selectAll().data().enter()`.