P

pavankalyan1507

@pavankalyan1507·29 public vizzes

Loading thumbnail…

Family Tree

This visualization shows a family tree for the Chennai Super Kings cricket team, organizing players into categories like Bowler, Batsmen, and Allrounder, with each player linked to their final placement. The tree layout uses d3.tree and d3.hierarchy to position nodes, while d3.linkHorizontal draws the connecting paths. Node labels display player names and placements with colors from the data.json file, and the SVG rendering includes zoom functionality through d3.zoom. The data is loaded asynchronously using d3.json from a local data.json file, with font sizes scaling based on node depth.

Loading thumbnail…

country map

This interactive visualization displays a choropleth map of India rendered as SVG paths. Using D3 v5 with the geoMercator projection and geoPath API, it draws country boundaries with colors assigned via scaleOrdinal. Data is loaded from a Gist-hosted TopoJSON file and parsed through the topojson library’s feature function. Hovering highlights regions in violet. The visualization also includes a white header text, with styling handled by an external CSS file.

Loading thumbnail…

Social Network

This social network visualization displays family relationships using a force-directed graph, with orange links connecting labeled nodes that represent individuals such as “husband,” “wife,” and “daughter’s son.” The code loads family data from a JSON file and uses `d3.layout.force` with gravity, charge, and distance parameters to position the nodes. Node circles are styled with a blue fill, and link thickness reflects each relationship’s weight. Text labels are placed beside each circle using SVG groups, and node dragging is enabled via `force.drag`.

Loading thumbnail…

Family Tree

This interactive family tree displays hierarchical relationships across multiple generations, with each node labeled by name and colored according to its position in the lineage. The visualization uses D3 v5’s `tree` layout to compute node positions and `linkHorizontal` to draw curved connecting paths, while the `zoom` function enables panning and scaling of the SVG canvas. The included JSON data file provides the family structure, and the code explicitly assigns font sizes based on tree depth and text colors from the data attributes.

Loading thumbnail…

world map

This example shows a world map of all countries rendered as grey SVG paths with black borders on a yellow background. It uses D3 v5's `geoNaturalEarth1` projection and `geoPath` to generate the geographic shapes. Country boundaries come from a TopoJSON file loaded from the world-atlas dataset via a URL, processed with the `topojson.feature` API. The code fetches the data asynchronously with `json()`, then appends each country as a `path` element to the SVG canvas.

Loading thumbnail…

World Map

This example displays a world map using a natural Earth projection, showing landmasses in green with country boundaries. The visualization is built with React and D3 v5, using the `geoNaturalEarth1` projection and `geoPath` to render geographic shapes. It loads GeoJSON data from the world-atlas package, then uses the topojson library’s `feature` and `mesh` functions to extract land and interior borders. The map also includes a graticule grid for latitude and longitude lines, all rendered as SVG paths within a React component.

Loading thumbnail…

World Map

A polished world map renders country boundaries from World Atlas TopoJSON data, using an orange land fill against a black sphere with light blue interior borders and grey graticules. The visualization uses React to manage state through a custom `useData` hook that fetches and converts topology via `topojson.feature` and `topojson.mesh`. D3's `geoNaturalEarth1` projection and `geoPath` generate the SVG paths for land, sphere, graticules, and country boundaries, displaying a clean, stylized geographic overview.

Loading thumbnail…

Fork of ICE 7 map

This example visualizes the world’s countries as green filled regions with yellow borders projected on a black sphere, highlighting a natural Earth projection. The map renders geographic boundaries from the world-atlas 110m dataset using d3.geoPath with the geoNaturalEarth1 projection, while the topojson library converts TopoJSON features into GeoJSON. The SVG output displays all countries as static paths, with styling applied via CSS classes. The visualization demonstrates a straightforward choropleth-style map without interactivity, relying on D3’s geographic utilities and the bundled world-atlas source data.

Loading thumbnail…

Area Chart

This area chart visualizes car sales in India from 2009 to 2019. Using D3 v5, it renders an SVG with a smoothed line and a pink filled area beneath it, showing the sales trend over time. The code loads CSV data, parses dates, and uses `d3.scaleTime` and `d3.scaleLinear` for the axes. It employs `d3.line`, `d3.area`, and `d3.curveBasis` to generate the paths, with styled tick marks and axis labels from `d3.axisBottom` and `d3.axisLeft`.

Loading thumbnail…

Fork of Line Chart

This line chart displays electronic sales in India from 2000 to 2013, with time on the x-axis and sales values on the y-axis. The visualization uses d3.scaleTime and d3.scaleLinear to map data from a CSV file loaded via d3.csv. It renders an SVG path generated with d3.line, with axes created using d3.axisBottom and d3.axisLeft. Grid lines, axis labels, and a title are styled through CSS rules defined in style.css.

Loading thumbnail…

Fork 2 of Pie chart

This visualization displays a pie chart of the top 10 countries by population in 2022, with each slice labeled with its population value in thousands and accompanied by a color-coded legend showing country names and corresponding figures. It uses d3.csv to load population data from a gist URL, then constructs the chart with d3.pie, d3.arc, and d3.scaleOrdinal. The rendering relies on SVG elements generated through D3 v5 selection and data-join methods, with colors, text labels, and legend items all created inside a single SVG canvas.

Loading thumbnail…

Fork 1

This scatter plot visualizes flower measurements from an iris dataset, plotting petal width against sepal length with points colored by species (setosa in white, versicolor in red, and virginica in yellow). The visualization uses d3’s `scaleLinear`, `axisLeft`, `axisBottom`, and `extent` APIs to compute scales and axes, while circles are appended via d3’s selection join mechanism. The underlying data is fetched as CSV from a GitHub gist, and the plot is rendered as an SVG that fills the browser window, with species-specific coloring applied to each data point.

Loading thumbnail…

Line Chart

This line chart visualizes electronic sales in India from 2000 to 2013, with years on the x-axis and sales values on the y-axis. It uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` generator to render an SVG path with blue strokes and green tick labels. Data is loaded as CSV from a GitHub Gist via `d3.csv` and parsed into `Date` and numeric values. The chart includes axis labels, titled text, and a grid-like structure created with tick lines.

Loading thumbnail…

Fork of Pie chart

This visualization uses a D3 pie chart to display the top 10 countries by population in 2022. The code fetches data from a GitHub-hosted CSV file and renders the chart as SVG. Each slice is labeled with its population value in thousands, and a legend on the right side pairs country names with their corresponding values and color swatches. The chart uses D3’s `pie()`, `arc()`, and `scaleOrdinal()` APIs to compute slice angles, generate arc paths, and assign colors, respectively.

Loading thumbnail…

Fork of Fork of ICE 7 Area Chart

This visualization shows car sales in India from 2009 to 2019 using a combined line and area chart, with a smooth basis curve overlaid on a pink area fill. Built with d3.v5, the code uses D3’s `line`, `area`, and `curveBasis` generators to render the SVG, while `scaleTime` and `scaleLinear` handle the temporal and numeric axes. The chart’s green tick labels and red axis titles are styled via CSS, as defined in the accompanying stylesheet. The dataset is loaded from a CSV file hosted on GitHub, with sales and dates parsed for rendering.

Loading thumbnail…

Fork of Fork of ICE 7 Area Chart

This example shows supermarket sales across countries in India, with a smooth curved line tracing changing values and an orange area fill beneath it. The CSV data is parsed and mapped to a time-scaled x-axis and linear y-axis using d3.scaleTime and d3.scaleLinear, while d3.axisBottom and d3.axisLeft generate labeled ticks. The line and area paths are drawn with d3.line and d3.area, both using d3.curveBasis for interpolation, and rendered as SVG in a 930×450 viewport. The chart uses d3.csv to load the remote population dataset.

Loading thumbnail…

Fork of Data Visualization ICE-7 Area Chart

This example visualizes the profits of a software company from 2009 to 2018 using a smoothed area chart rendered as SVG. The chart combines a black, curved line with a pink filled area beneath it, while axes display blue tick labels and green grid lines. The code uses d3.scaleTime for the x-axis, d3.scaleLinear for the y-axis, and d3.line and d3.area generators with d3.curveBasis for smoothing. Data is loaded from a CSV file using d3.csv and parsed with d3.timeParse.

Loading thumbnail…

Scatter Plot

This animated scatter plot explores the Iris Dataset, cycling through four measured attributes on the x-axis while keeping sepal length on the y-axis. Built with D3 v6, it uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render axes and circles via SVG. Every two seconds, the plot updates its x-value mapping to a different column, smoothly redrawing points to reveal correlations between petal width, sepal width, petal length, and sepal length. The animation demonstrates a reusable chart pattern with configurable width, height, margins, and radius.

Loading thumbnail…

Pie chart

This pie chart displays the top 10 countries by population in 2022. It uses d3.js and is rendered as an SVG. The code fetches data from a CSV file and utilizes d3.pie, d3.arc, and d3.scaleOrdinal to generate the chart. Each segment is labeled with its population value, and a legend on the right lists the countries with their corresponding colors and population figures.

Loading thumbnail…

Fork of ICE 7 Pie chart

This visualization is a pie chart displaying the top 10 countries by population in 2022. Each slice is labeled with its population value in thousands, and a legend lists the country names alongside corresponding color swatches and population figures. The code fetches CSV data from a GitHub gist URL using the `d3.csv` function. It renders the chart as SVG using D3 v5’s `pie` and `arc` generators, with `scaleOrdinal` assigning colors to each data category.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This interactive visualization cycles through four attributes of the Iris dataset, displaying a scatter plot that updates every two seconds. Built as a reusable D3 chart, the code uses `d3.scaleLinear`, `d3.extent`, `d3.axisLeft`, and `d3.axisBottom` to render axes and circles via SVG. The x-axis switches between petal width, sepal width, petal length, and sepal length while the y-axis remains fixed to sepal length. Data loads from a remote CSV using `d3.csv`, with the animation driven by `setInterval` and `svg.call(plot)`.

Loading thumbnail…

plot

This scatter plot visualizes the Iris Dataset, with each circle representing an iris flower and colored by species to emphasize clustering according to petal length and sepal length. The visualization uses D3 v5 to load CSV data, apply linear scales for the axes, and render circles in an SVG. It includes a categorical color scale with a d3-legend color legend, axis labels, and gridlines generated via d3.axisBottom and d3.axisLeft.

Loading thumbnail…

Fork of ice

This example shows a horizontal bar chart of iPhone sales by year, with the top 20 records displayed as green bars scaled against the sales value on the x-axis and year labels on the y-axis. The visualization uses React with the `useState` and `useEffect` hooks to load data asynchronously from an external CSV file via `d3.csv`, then renders SVG elements generated with `d3.scaleBand` and `d3.scaleLinear`. Gridlines and tick labels are manually mapped from the scales, while bar heights derive from the band scale’s bandwidth, and the chart is drawn inside a 960×500 SVG canvas with a 200-pixel left margin.

Loading thumbnail…

Fork of ice

A horizontal bar chart displays the top 20 records of iPhone sales by year, with each bar’s length proportional to sales figures loaded from a CSV file. The chart uses React with hooks for state management and D3 v5’s `scaleBand` and `scaleLinear` to map years to vertical positions and sales values to bar widths. SVG rectangles render the bars, while x-axis ticks and y-axis labels are generated manually using D3’s `ticks()` and scale domains. Data comes from a remote GitHub Gist URL, fetched asynchronously via `d3.csv`.

Loading thumbnail…

ice

This visualization displays the top 20 countries by population as a horizontal bar chart, with each bar’s length proportional to the population value. The chart uses React hooks (useState, useEffect) to load and parse CSV data via d3.csv, transforming the “1/28/20” field into a numeric population. It employs d3.scaleBand for the categorical y-axis and d3.scaleLinear for the quantitative x-axis, rendering SVG rectangles and axis tick lines directly through React’s declarative JSX. The data comes from a GitHub Gist CSV file, and the visualization is built with D3 v5 and React 17.

Loading thumbnail…

loading of data

This example demonstrates how to load and parse a CSV dataset using D3.js. The visualization displays a title and a pre-formatted message area that reports the file size in kilobytes, the number of rows, and the number of columns after fetching data from a GitHub gist. The page also includes an embedded SVG illustration. The code uses the `d3.csv` method to retrieve and parse the remote CSV file, then calculates the formatted size with `d3.csvFormat` and updates the DOM via `document.getElementById`.

Loading thumbnail…

viz

This example displays a static, scalable "Hello HTML!" message centered on a blank page. The code uses a plain HTML document with a CSS class to set the font size and text alignment, making the message the primary visual element. It demonstrates a minimal setup for styling and rendering text in the browser, with no external libraries or data sources involved. The styling is applied directly through a `<style>` block, and the content is hardcoded within the markup.

Loading thumbnail…

smileyyyy

A grid of randomly generated smiley faces appears, each with a blue circular head, green outline, white-eyed expressions, and a varying mouth arc. The faces are created using React components that compose a face container, background circle, eyes, and mouth, with D3’s `arc` generator for the mouth path. The `range` function from d3 creates the grid count, while `Math.random` drives per-face variations in eye position, size, and mouth curvature. The SVG output is rendered by ReactDOM into the page.

Loading thumbnail…

nick

This visualization renders a cartoon face inspired by Danny Phantom using React and D3’s `arc` generator to draw the mouth. The SVG face includes circles for eyes, irises, and pupils, rectangles for eyebrows, and polygons for the nose and hair, all positioned relative to the window center. Styling relies on inline SVG attributes for stroke widths, fill colors, and rotations. The code computes all coordinates and sizes dynamically from `window.innerWidth` and `innerHeight`, and renders everything through a single React component.