K

KeerthipriyaBankuru

@KeerthipriyaBankuru·39 public vizzes

Loading thumbnail…

Fork of tree test

This visualization shows a hierarchical tree of cricket formats, with Cricket as the root branching into ODI, Test, and League categories, each with their own subcategories. The tree uses a collapsible layout where clicking a node toggles its children, and nodes transition smoothly to their new positions. The code uses D3.js version 3.5.17 with the `d3.layout.tree` API to compute the layout, `d3.svg.diagonal` for the curved links, and SVG transitions with a 750ms duration for animations. The styling is defined in CSS, with red links and circles for nodes.

Loading thumbnail…

Fork of Network graph

This network graph visualization displays character relationships from the Harry Potter universe, with nodes representing named characters and links showing connections between them. The graph uses node size and link thickness to convey relationship strength. The visualization is built with D3.js v4, utilizing the `d3.layout.force` API for the force-directed layout and SVG rendering for nodes and links. The data is loaded from a local JSON file containing node names and group assignments. The graph features interactive dragging capabilities, and custom styling applies yellow node fills with blue connection lines on a red background.

Loading thumbnail…

Fork of Japan Map

This example visualizes Japan’s administrative boundaries using a Mercator projection rendered as SVG paths. The map displays prefecture outlines in pink with black strokes, colored via d3.scaleOrdinal and schemeCategory10, and supports pan and zoom through d3.zoom. Data is loaded via d3.json from a TopoJSON file, converted to GeoJSON with topojson.feature, and drawn using d3.geoPath. The code imports d3 modules for selection, projections, scales, and event handling, while d3-geo-projection.v2 is included for additional projection support.

Loading thumbnail…

Fork of Japan Map

This map of Japan displays its prefectural boundaries as distinct orange regions against a white background. Built with React and rendered as SVG, it uses D3’s `geoMercator` projection and `geoPath` to draw the shapes, while `d3-geo-projection` extends the available projections. The visualization supports zooming via D3’s `zoom` behavior, and prefectures are colored using `scaleOrdinal` with `schemeCategory10` for categorical distinction. State boundaries come from TopoJSON data loaded from external GitHub gists, and the page includes CSS for styling.

Loading thumbnail…

Fork of Fork of D3 Map Nederland

This map of Dutch municipalities displays the country in a Mercator projection, initially in flat grey polygons which turn orange on hover and red upon selection. Clicking a municipality triggers a smooth, animated zoom for a detailed view; clicking the blank map resets the view. The visualization is built with D3.js version 6, using `d3.geoPath` for rendering and `d3.zoom` for pan-and-zoom interaction. It loads TopoJSON data from the `cartomap.github.io` repository.

Loading thumbnail…

Fork of Fork of Australia Map

This map of Australia displays individual regions colored by electoral division using a categorical color scale. Built with React and D3 v5, it loads GeoJSON data from a external URL via `json()` and renders each state as an SVG path using `geoPath` with a `geoMercator` projection. `feature` from topojson extracts the shapes, while `scaleOrdinal` with `schemeCategory10` assigns colors. Each region is labeled with its name positioned at the path centroid via `pathGenerator.centroid`.

Loading thumbnail…

Fork of Family Tree

A fork of a family tree example demonstrates a hierarchical animal classification using a tree layout with animated SVG circles and links. The visualization shows categories like Herbivorous, Carnivorous, and Omnivorous branching into specific animals, with circle colors indicating generation depth. Built with D3.js v6, the code uses `d3.stratify()` to convert flat data into a hierarchy, `d3.tree()` to compute positions, and `transition()` to animate link paths and circle radii over durations. Node labels appear as bold white text, and all elements are centered within the viewport.

Loading thumbnail…

World Map -ICE-8

This example renders a static world map using SVG, displaying country boundaries in blue with white strokes on a yellow background. It projects geographic coordinates with a Natural Earth projection via `d3.geoNaturalEarth1` and generates paths with `d3.geoPath`. The map is built from TopoJSON data loaded from the `world-atlas` package using `topojson.feature`. Each country is appended as a `path` element with the class `country`. The visualization uses D3 v5 within a React starter template, producing a simple, uncluttered geopolitical view.

Loading thumbnail…

Fork of Interactive 3D Bar chart

This visualization shows a 3D vertical bar chart comparing total employees across seven sectors (Health, Education, IT Firms, Agriculture, Clothing, Finance, Cosmetics) for six job roles, including Workers, Database Administrators, Security, Management Staff, Online Maintenance, and Support Team. Built with Highcharts and the Highcharts 3D module, the chart groups stacked columns by sector and job role, using the `options3d` settings to set alpha, beta, and depth for perspective view. Data appears as inline arrays in the JavaScript, with axes labeled for sectors, employee counts, and departments.

Loading thumbnail…

Bar chart Interactive

This interactive bar chart displays the "love meter" percentages for various programming languages, allowing users to hover over a bar to see its value highlighted with a reference line and divergence labels. The visualization uses D3.js v5 within a React environment, rendering SVG elements with animation transitions. It employs `d3.scaleBand`, `d3.scaleLinear`, and axes for structured plotting, while mouse events trigger opacity changes, bar enlargement, and the temporary display of difference annotations. The data is embedded directly in the code, inspired by the Stack Overflow 2018 developer survey.

Loading thumbnail…

Fork of 3D Scatter Plot

This interactive 3D scatter plot visualizes two sets of coordinates from a CSV dataset, using height, length, and corner positions as the three axes. Each of the two traces appears as a cluster of markers, with different colors, sizes, and opacities to distinguish the data groups. The visualization is built with Plotly’s `scatter3d` trace type and rendered via `Plotly.newPlot`, while the data loading and parsing rely on D3’s `d3.csv` function. The chart updates dynamically in response to the user’s rotation and zoom controls.

Loading thumbnail…

Fork of BONUS 1: 3D Scatter Plot

A 3D scatter plot visualizes the relationship between Height, Weight, and Body Fat from a CSV dataset. The plot uses Plotly’s `scatter3d` trace with pink circular markers, and each axis is labeled with the corresponding variable. Data is loaded asynchronously via `d3.csv` from a GitHub gist, and the `unpack` function extracts each column into arrays for the x, y, and z coordinates. The layout defines axis titles and font styles, and `Plotly.newPlot` renders the interactive chart inside an HTML div.

Loading thumbnail…

Fork of 3D Bar Chart using D3.js

This 3D bar chart visualizes car manufacturer sales data for the first six months across multiple years (2016–2021), sourced from a CSV file. The visualization uses D3.js v5 with the d3-x3d library and the x3dom engine to render the bars as interactive 3D objects in the browser. The code leverages D3’s `csv` loader, `scaleLinear`, `extent`, and axis utilities (`axisLeft`, `axisBottom`), while the `d3.x3d.chart.barChartMultiSeries()` component manages the multi-series bar layout. Data is parsed and attached to the chart holder using the `datum` and `call` methods.

Loading thumbnail…

kee area

This area chart visualizes car sales from 2012 to 2022, combining a smooth line with an orange filled area beneath it. The chart uses D3 v5 APIs including `d3.area`, `d3.line`, `d3.curveBasis` for smoothing, and `d3.scaleTime`/`d3.scaleLinear` for the axes. Data is loaded from a CSV via `d3.csv`, with the line and area paths rendered as SVG elements, styled with CSS classes for the line, area, and axis labels.

Loading thumbnail…

Fork of Line Chart

This fork of a line chart displays car sales by year. The visualization is rendered as an SVG, with the time-based X axis showing the year and the linear Y axis showing sales volume. The code uses several D3 v5 APIs, including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line`, to construct the chart. Data is loaded from a CSV file hosted on GitHub.

Loading thumbnail…

ICE-7 Pie Chart

This pie chart visualizes 2022 US auto sales by brand, showing each brand’s market share as a percentage and total sales in thousands. The visualization uses D3 v5 with `d3.pie` and `d3.arc` to generate SVG paths, while `d3.scaleOrdinal` assigns distinct colors to each segment. Legends display brand names, percentage values, and sales figures formatted with `d3.format`. Data is loaded asynchronously from a CSV file hosted on GitHub Gist via a helper function that imports `d3.csv`.

Loading thumbnail…

Fork of ice 7 pie

This pie chart visualizes the top 10 global automobile sales in millions, with each slice representing a brand’s value and a legend detailing the data. It uses d3.pie and d3.arc to generate the SVG paths, with d3.scaleOrdinal and d3.schemeCategory20 assigning colors. Interactive hover effects, implemented via d3.selectAll and mouse events, dim other slices and display a tooltip with the brand name and value. The chart is rendered as SVG, with a fixed 400x400 viewport and semi-transparent styling.

Loading thumbnail…

Fork of ICE - 7 Pie Chart Maanas Katta

A pie chart displays the top 10 countries by deaths in 2020 from air pollution, with each slice labeled with its value in thousands and a legend listing country names and corresponding figures. The chart uses D3 v5 to load CSV data from a gist URL, then applies `d3.pie` and an arc generator to compute slice geometries, `d3.scaleOrdinal` for slice colors, and SVG `path` and `text` elements for rendering. Values are formatted with `d3.format` and the chart is centered in a 960×500 SVG canvas.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This fork of a reusable D3 scatter plot animates through four columns of a custom Iris dataset, cycling every two seconds between Height, Length, TopLeftCornerX, and TopLeftCornerY as the x-axis variable. Built with D3 v6, it uses `scaleLinear`, `axisLeft`, `axisBottom`, and data joins to render SVG circles and axes. The chart is driven by a `scatterPlot` closure that accepts configurable accessors, with `setInterval` triggering re-renders. The dataset is loaded via `csv` from a remote gist, with a full-viewport SVG and the Share Tech font.

Loading thumbnail…

Fork of d3 scatterplot

This scatterplot visualizes the Iris dataset, plotting petal length against petal width. The visualization uses the D3.js library (v6.6.1) to fetch CSV data, map it to Cartesian coordinates with `scaleLinear`, and render circles as SVG marks. Axes are drawn using `axisLeft` and `axisBottom`, with the plot filling the browser window via `window.innerWidth` and `window.innerHeight`. The implementation highlights D3's modern `join` API for efficient SVG element updates.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This animated scatter plot visualizes the Iris dataset, showing the relationship between petal width and sepal length for three flower species. The visualization cycles through different variable pairings every two seconds, rotating among petal_width, sepal_width, petal_length, and sepal_length on the x-axis. Built with D3 v6, the example uses `scaleLinear` and `scaleOrdinal` for axes and color encoding, with circles rendered as SVG elements. Data loads from a GitHub Gist CSV, and the reusable `scatterPlot` function updates axes and marks dynamically through a `setInterval` loop.

Loading thumbnail…

Fork of Fork of Reusable D3 Scatter Plot

This animated scatter plot visualizes the Iris Dataset, plotting student marks, study time, and course count as x and y coordinates. Built with D3 v6, it uses `scaleLinear`, `axisLeft`, `axisBottom`, and SVG `circle` elements to render points. Every five seconds, the x-axis value switches between the three numeric columns, updating the chart via a `setInterval` loop. The reusable chart pattern from Bostock’s article is implemented, with dynamic scaling of axes based on the current data extent.

Loading thumbnail…

Fork of Fork of ICE - 7

This example shows the top 10 countries by deaths from air pollution in 2020 as a pie chart with a legend. It uses D3 v5’s `pie`, `arc`, and `scaleOrdinal` to generate slices and color them, while `csv` loads data from a GitHub Gist. The chart renders in SVG, with each slice labeled by deaths in thousands and a separate legend listing countries and values.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This animated scatter plot visualizes the Iris Dataset, cycling through four attribute pairings every two seconds. Built with D3 v6, it uses reusable chart patterns via a custom `scatterPlot` function, employing `scaleLinear`, `axisLeft`, and `axisBottom` for rendering. SVG circles display sepal and petal measurements, with axes updating dynamically as the x-value changes from petal width to sepal width, petal length, and sepal length.

Loading thumbnail…

Fork of Fork of ICE - 6 Scatter Plot

This scatter plot visualizes the Iris dataset, showing the relationship between petal length and petal width for three species, color-coded as green, orange, and blue. Each circle's position maps the petal measurements, while additional sepal length and width values are embedded in the data model, though not directly used for positioning. Built with D3 v6, the SVG visualization uses linear scales, axes, and CSV data loading via `d3.csv` to render the chart across the full browser window.

Loading thumbnail…

Fork of ICE - 6 Scatter Plot

This visualization displays the Iris dataset as a scatter plot, mapping petal length on the x-axis and petal width on the y-axis, with points colored by species (setosa, virginica, and versicolor). It uses d3.csv to load the data, d3.scaleLinear for axes, and d3.axisLeft and d3.axisBottom to render the scales. Circles are drawn with SVG via d3.selectAll and .join, with dimensions derived from sepal length and width for additional context. The code runs in a vanilla HTML page with D3 v6, using window dimensions for a full-screen responsive layout.

Loading thumbnail…

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

This example shows a horizontal bar chart of cholesterol content for ten food items, sourced from a CSV file. The bars are rendered as SVG rectangles using React components. The code leverages D3's `scaleBand` and `scaleLinear` for coordinate mapping, and D3's `csv` for data loading, while React manages state and rendering the SVG elements.

Loading thumbnail…

Fork of Fork of ICE - 6 Scatter Plot

This scatter plot displays the Iris dataset, plotting petal length and width for each specimen. The points are colored by species: setosa, virginica, and versicolor. The visualization loads CSV data via `d3.csv`. Using `d3.scaleLinear`, it maps data to pixel coordinates for the SVG circles, and includes axes created with `d3.axisLeft` and `d3.axisBottom` for the petal dimensions.

Loading thumbnail…

Food

This example shows a horizontal bar chart of nutritional data for the top ten foods, using a bar’s length to encode each item’s 2019 nutrient value. The chart renders as an SVG using React, with the `d3.csv` loader fetching data from a GitHub Gist. Scales from `d3.scaleBand` and `d3.scaleLinear` position the bars and axes, while D3’s `axisBottom` and `axisLeft` are manually replaced by custom tick rendering. The visualization highlights the relative nutrient amounts across food categories.

Loading thumbnail…

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

This horizontal bar chart displays the top 10 most populous countries in 2019, with country names on the y-axis and population counts on the x-axis. The React component uses React hooks (useState, useEffect) to asynchronously load CSV data via d3.csv, then renders SVG marks with d3.scaleBand and d3.scaleLinear for positioning. Gridlines and tick labels are generated manually through array mapping rather than d3's axis components, while blue rectangles represent each country's population value.

Loading thumbnail…

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

This visualization presents a horizontal bar chart of the ten most populous countries, sorted by their 2019 population values. The chart uses React to manage state and render SVG marks, while D3 provides the scales and data processing. Specifically, the code employs `d3.csv` to load data from a remote URL, `d3.scaleBand` for the y-axis positioning, and `d3.scaleLinear` for the x-axis magnitude. Rectangles are drawn with widths proportional to population, and axes are generated using D3’s tick and label mappings.

Loading thumbnail…

Fork of ICE-5: Welcome to ICE-5 Data visualization

This visualization uses D3.js to load and summarize a CSV dataset of the top 100 actors. It fetches the data via `d3.csv` and displays a plain-text message indicating the file size in kilobytes, the number of rows, and the column count. The page also embeds an external SVG image and applies CSS styling for prominent headings and text. The chart focuses on conveying basic dataset metrics rather than complex graphical representations.

Loading thumbnail…

Fork of Global Food Prices ICE-5

This fork of Global Food Prices ICE-5 displays a welcome message and a summary of a Top 100 actors dataset, including file size in kilobytes, row count, and column count. The page uses D3 v7’s `d3.csv` to fetch and parse the data from a GitHub Gist, then writes the statistics into a `<pre>` element. The visualization also embeds a static SVG image hosted on VizHub, and applies simple CSS styling with cyan and red background colors to the text elements.

Loading thumbnail…

Global Food Prices ICE-5

This visualization displays a welcome page for the ICE-5 data visualization exercise, showcasing a static SVG image of global food prices and a summary message about a dataset of the top 100 actors. The page loads data from a CSV file hosted on GitHub using the D3.js library version 7.3, specifically employing the `d3.csv` method to fetch and parse the data, then using `d3.csvFormat` to calculate its size. The resulting information—file size, row count, and column count—is displayed in a styled `<pre>` element, while a large heading and cyan background provide a bold visual aesthetic.

Loading thumbnail…

Fork of HTML Starter

This example shows a single large “Hello HTML!” message centered on a plain page. It demonstrates the minimal structure of an HTML document that combines CSS styling with JavaScript-ready markup. The code uses a `<div>` element with a custom `.message` class, styled through embedded CSS to set its font size and alignment. No external libraries or data sources are involved; the page relies solely on native HTML and CSS for rendering.

Loading thumbnail…

smiley face

A yellow smiley face is drawn on an SVG canvas, with a circular head, two eyes, and a curved mouth created using D3’s `arc` path generator. The animation moves the eyebrows upward and back down over a four-second sequence using `transition.attrTween`. The scene is built with D3 v5 selections and transitions within a React framework, using hardcoded dimensions and offsets to position the facial features on a 960 by 500 viewport.

Loading thumbnail…

Fork of Fork of smiley face

A yellow smiley face rendered as a static SVG using React and D3. The code creates a face with a yellow circular background, two black eyes positioned symmetrically, and a smiling mouth drawn with D3's `arc` generator. The mouth arc uses specified inner and outer radii and angles to create a half-circle path, translated to the center of the face. The visualization is built with React components and D3's `arc` API, rendered directly into an SVG element within a React application.

Loading thumbnail…

smiley face with eyebrows

A smiley face with eyebrows is drawn in yellow with a black outline and a curved mouth. The eyebrows animate upward and back down in a repeated motion. The visualization uses D3 v5 to select the SVG element and construct shapes with `circle`, `rect`, and `arc` path generators. Transitions are driven by `transition.duration` and chained attribute updates to create the eyebrow movement.

Loading thumbnail…

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

This example builds a yellow smiley face with D3.js, featuring two eyes, a mouth drawn with the `d3.arc` path generator, and eyebrows that animate vertically via chained `transition().attr()` calls over two-second intervals. The face is centered using an SVG `g` element transformed to the viewport’s midpoint, with all shapes positioned relative to that origin. The code uses D3 v5 selections and transitions to demonstrate fundamental DOM manipulation and SVG attribute updates, rendering the animation entirely in the browser.