T

ttummala17

@ttummala17·50 public vizzes

Loading thumbnail…

Australia country Map by Tejaswi_Tummala

This visualization presents a choropleth map of Australia, with each electoral region filled by a categorical color from `d3.scaleOrdinal` and `d3.schemeCategory10`, and labeled with its name. It uses `d3.geoMercator` with custom translation and scale to position the country, while `d3.geoPath` generates SVG paths from TopoJSON data. The map also displays region names via SVG text elements centered on each polygon’s centroid.

Loading thumbnail…

Social Network Graph by Tejaswi_Tummala

This social network graph visualizes friendships among a group of people, with nodes representing individuals and directed links indicating relationships. The network uses a force-directed layout via `d3.forceSimulation`, with forces for linking, repulsion, and collision. Each node is a pink circle with a label, and hovering highlights it with a green border. The SVG is rendered with D3 v6, and the data comes from a local `data.json` file containing explicit node and link definitions.

Loading thumbnail…

Fork of ICE8 - Social Network Graph

This example visualizes a small social network of eight people and their friendship connections, using a force-directed graph layout. Node size is uniform, and all links are styled identically, though the underlying data includes a relationship type and a weight value. The visualization is rendered as an SVG using D3 v6, with `d3.forceSimulation` handling the layout physics, including link distance, charge, collision, and centering forces. Nodes are draggable, and hovering highlights a node with a green stroke. Data is loaded from an external JSON file.

Loading thumbnail…

Tree graphic by Tejaswi_Tummala

A hierarchical tree diagram shows the parent-child relationships among Indian geographic locations, from country to city level. Circles represent each node, connected by animated straight-line paths that grow from parent to child. The visualization uses D3 v6’s `d3.stratify` to structure the data and `d3.tree` for layout, with SVG rendering. Node and label transitions animate over 800 milliseconds, while text opacity and delays vary by tree depth. Styling applies turquoise circle fills, salmon strokes, and black connectors.

Loading thumbnail…

Fork of ICE 8 example for Tree graphic

This interactive tree graphic visualizes a family hierarchy using a fork of the ICE 8 example. It displays named nodes connected by animated paths, with circles and text labels revealing each person’s name. The visualization uses D3.js v6, employing `d3.stratify()` to structure the data and `d3.tree()` to compute the layout. SVG elements—including circles, paths, and text—are rendered with transitions that animate the drawing of links and the appearance of nodes over time, while styling attributes are applied via CSS.

Loading thumbnail…

Fork of Fork of India Map: ICE-8

This visualization displays a map of Indian administrative regions, colored with a categorical palette from D3’s `schemeCategory10` and labeled with each state’s name at its centroid. The code uses `geoMercator` with custom translation and scale for projection, `geoPath` to generate SVG paths, and TopoJSON’s `feature` to extract geometries from a remote Argentine COVID-19 dataset mislabeled as Indian regions. It loads data asynchronously via `d3.json`, then renders the map and text labels into an SVG. The styling sets black state borders with a semi-transparent stroke.

Loading thumbnail…

Fork of India Map: ICE-8

This visualization displays a map of India, with each state rendered as a colored SVG path and labeled with its name. The map uses a spherical Mercator projection, achieved through `d3.geoMercator()` with custom translation and scaling. State boundaries are drawn with a black stroke, and each state’s fill color is assigned from a categorical color scale using `scaleOrdinal` and `schemeCategory10`. State names are positioned at each state’s centroid via `geoPath.centroid()`. The geographic data is loaded from a TopoJSON file containing India’s administrative divisions, processed with the `topojson` library’s `feature` function.

Loading thumbnail…

Fork of D3 Map Nederland

This interactive map of Dutch municipalities uses D3.js and TopoJSON to display the 2020 administrative boundaries. Users can click any municipality to zoom in and highlight it in red, while hovering turns regions orange. The visualization implements pan and zoom controls via d3.zoom, with smooth transitions between zoom levels. Geographic projections are handled with d3.geoMercator and d3.geoPath, loading data from a remote TopoJSON source. The SVG-based rendering includes dynamic stroke scaling to maintain consistent border visibility during zoom operations.

Loading thumbnail…

Fork of Australia Electorate Map

This visualization displays Australia's electoral boundaries as colored regions on an SVG canvas, with each electorate labeled by name. It uses D3 v5 with the geoMercator projection and d3.geoPath to render the shapes from TopoJSON data, applying a categorical color scale based on electorate division. The map includes state boundaries with black strokes and interactive tooltips showing region names, all positioned using path centroid calculations.

Loading thumbnail…

Fork of Swedish map

This choropleth map displays the counties of Sweden, colored in a teal palette with distinct interior boundaries highlighted in a lighter shade. Built with React and D3 v5, it uses the `geoMercator` projection and `geoPath` to render geographic features from TopoJSON data. The counties are loaded via a simplified Swedish counties dataset, with `feature` and `mesh` from topojson used to extract regions and draw internal borders.

Loading thumbnail…

WorldMap ICE by Tejaswi_Tummala

This example displays a world map using a simple equirectangular projection, with countries rendered as white paths with red outlines on a bisque-colored sphere. It relies on D3 v5’s `geoEquirectangular` and `geoPath` to generate the SVG paths, and TopoJSON’s `feature` method to parse country boundaries from the world-atlas `countries-110m.json` dataset. The map highlights countries in gray on hover, and the visualization is entirely constructed with SVG elements.

Loading thumbnail…

Area Chart by Tejaswi_Tummala

This area chart displays Tesla sales in the USA from January 2021 to February 2022, using a smooth curved line to connect monthly data points and a filled green area beneath it. The visualization is built with D3 v5, using `d3.scaleTime` and `d3.scaleLinear` for the x and y axes, while `d3.line` and `d3.area` generators apply `curveBasis` for smooth interpolation. Data is loaded from a CSV file via `d3.csv`, and the SVG includes gridlines, labeled axes, and a rotated y-axis title.

Loading thumbnail…

Fork of Fork of Line Chart by Tejaswi_Tummala

This chart visualizes Tesla sales in the USA from January 2021 to February 2022, using an area chart to emphasize the trend in monthly sales figures. The visualization is built with D3.js (v7) within a React framework, leveraging `scaleTime` and `scaleLinear` for the axes, and `area` with `curveBasis` to generate the filled region beneath the line. The data is loaded via a CSV file hosted on GitHub, with sales values parsed as numbers and dates as Date objects. The chart includes styled axes with tick marks, labels, and a custom title.

Loading thumbnail…

Fork of Fork of Fork of Line Chart by Tejaswi_Tummala

This chart visualizes Tesla sales in the USA from January 2021 to February 2022, with months on the x-axis and sales figures in thousands on the y-axis. It uses React to manage state and render the SVG, fetching data from a CSV hosted on GitHub Gist. The visualization employs d3.scaleTime and d3.scaleLinear for axes, d3.line with a curveBasis interpolation to draw the smooth line, and d3.csv for data loading. Custom React components render the axes and the line path.

Loading thumbnail…

Fork of Fork of Line Chart by Tejaswi_Tummala

A line chart visualizes Tesla sales in the USA from January 2021 to February 2022, with months on the x-axis and sales figures in thousands on the y-axis. The chart is built with React and D3 v7, using `scaleTime` and `scaleLinear` for axes and `line().curve(curveBasis)` for the smooth path. Data is loaded from a CSV via `d3.csv`, and the SVG rendering includes custom tick marks and axis labels styled with black text and maroon titles.

Loading thumbnail…

Fork of Line Chart by Tejaswi_Tummala

This example visualizes Tesla sales in the USA from January 2021 to February 2022 as a line chart rendered with SVG. It uses React to manage state and fetch CSV data via `d3.csv`, then displays the monthly sales trend with a smooth curve generated by `d3.line()` and `curveBasis`. Axes are built using `scaleTime` for months and `scaleLinear` for sales values, with custom tick labels formatted via `timeFormat`. The chart includes labeled axes and a title, and data is loaded asynchronously from a GitHub gist.

Loading thumbnail…

Line Chart by Tejaswi_Tummala

This line chart visualizes Tesla sales in the USA from January 2021 to February 2022, plotting opening bid prices over time. The visualization combines a blue line with a filled area beneath it, using a basis curve for smooth transitions. Built with D3 v7 and React, the code employs `scaleTime` and `scaleLinear` for axes, `axisBottom` and `axisLeft` for grid lines, and `line`/`area` generators with `curveBasis`. Data is loaded from a CSV file containing EUR/USD exchange rates, styled with Lato typography.

Loading thumbnail…

Fork of ICE - 7 Line Chart Maanas Katta

This fork of an ICE line chart visualizes the opening bid price of EURUSD throughout 2021 over time. The React application loads CSV data, formats dates, and renders an SVG line chart with gold tick marks, blue tick labels, and red strokes. It uses D3 v7 APIs including `scaleTime`, `scaleLinear`, `extent`, `line`, `curveBasis`, and `timeFormat`. The X-axis shows months, while the Y-axis represents opening bid prices, with labeled axes and a title.

Loading thumbnail…

Fork of Line Chart by Tejaswi_Tummala

This example visualizes Tesla sales in the USA from January 2021 to February 2022 using a line chart. The chart maps months on the x-axis and sales figures on the y-axis, applying a time scale and linear scale respectively. The line is drawn with d3.line() and a curveBasis interpolation. React manages component state and data fetching, while D3 v7 handles CSV parsing, scaling, and axis rendering. The background image and custom CSS styling enhance the presentation of the SVG-based visualization.

Loading thumbnail…

Fork of ICE - 7 Area Chart Maanas Katta

This fork visualizes the opening bid price of EURUSD across 2021 as an area chart. A smooth basis curve traces the price trend over months, with a semi-transparent aqua fill beneath the line. The chart uses D3 v5’s `scaleTime` and `scaleLinear` for axes, `area` and `curveBasis` to generate the filled path, and `axisLeft`/`axisBottom` for the labeled ticks. Data is loaded from a Gist-hosted CSV, and axes are rendered on an SVG canvas with custom tick styling.

Loading thumbnail…

Line Chart by Tejaswi_Tummala

This example uses D3 v7 within a React application to render a line chart tracking Tesla sales in the USA from January 2021 to February 2022. It demonstrates the use of `d3.csv` for data loading, `scaleTime` and `scaleLinear` for axes, and the `line` generator with `curveBasis` for the smoothed path. The SVG rendering includes custom axis components built with React, and the chart is titled “Tesla Sales in USA from Jan'21 to Feb'22.”

Loading thumbnail…

Pie Chart by Tejaswi Tummala

This pie chart visualizes electric vehicle sales in the USA for 2021, using a CSV dataset from a GitHub gist. The chart, built with d3.v5, renders each car model as a colored slice with sales values labeled in thousands, and includes a legend mapping colors to car names. It uses d3.pie, d3.arc, and d3.scaleOrdinal to generate the arcs and colors, while the SVG is selected via d3.select.

Loading thumbnail…

Pie Chart

This pie chart visualizes 2022 US auto sales by brand, showing each manufacturer's market share as a proportion of total sales. The chart uses D3 v5’s `pie` and `arc` generators to compute segment angles and render SVG paths, with a categorical color scale via `scaleOrdinal`. Sales percentages and totals are computed from a CSV dataset loaded using `d3.csv` from a Gist, and a legend displays brand names, percentage values, and sales in thousands. The visualization is rendered entirely as SVG, with labels positioned manually.

Loading thumbnail…

Pie Chart by Tejaswi Tummala

A pie chart displays electric vehicle sales for 2021, with each slice labeled as a percentage of total sales and a legend identifying car models. The visualization uses D3 v5 APIs including `d3.pie`, `d3.arc`, and `scaleOrdinal` to generate SVG paths and text. Data is loaded asynchronously from a CSV URL, and slices are colored by sales values, with labels positioned via `arc.centroid`.

Loading thumbnail…

Fork of D3 Starter

This example is a minimal D3 starter page that renders the text “Hello D3 version 7” centered in the browser window. It demonstrates the basic setup for using D3 v7, including importing the `select` function from the d3 module and chaining it to set the text content of the `body` element. The code relies on D3’s selection API, with the script loaded from a CDN. No data source is used; the display is purely static text with CSS styling for font size and alignment.

Loading thumbnail…

Fork of ICE - 7 Pie Chart Maanas Katta

A pie chart displays the top 10 countries by deaths from air pollution in 2020, with each slice sized by the death count and labeled in thousands. The example uses d3.pie and d3.arc to generate segments, d3.scaleOrdinal for color mapping, and appends SVG paths and text for slices and a legend. Data is loaded asynchronously from a CSV via d3.csv. The chart is rendered with D3 v5 in an SVG canvas, styled with custom fonts and a blue title.

Loading thumbnail…

Fork of Pie Chart

This pie chart visualizes 2022 U.S. auto sales by brand, sourced from a CSV of electric vehicle deliveries. Each slice shows the proportion of total sales, while a legend lists brand names, their percentage of the total, and sales figures in thousands. The code loads data using `d3.csv`, computes pie angles with `d3.pie`, and draws SVG paths with `d3.arc`. Colors are assigned via `d3.scaleOrdinal`, and the legend uses formatted text for percentages and values.

Loading thumbnail…

Electric Vehicle Deliveries in USA (2019-2022)

This example visualizes electric vehicle deliveries in the USA from 2019 to 2022 as a donut chart. It uses D3 v4’s `pie` and `arc` generators to create the segments, with an ordinal color scale for differentiation. The chart displays brand names, percentage shares, and delivery counts in thousands within a legend, while the total is calculated from the loaded CSV data. Data is fetched asynchronously via `d3.csv` from a GitHub Gist, and the SVG is rendered using a custom background image and scaled to a 960x450 viewport.

Loading thumbnail…

Reusable D3 Scatter Plot submitted by Tejaswi_Tummala

This example presents a reusable D3 scatter plot visualizing the Iris dataset, with petal width and sepal length mapped to the x- and y-axes. The plot encodes species using distinct symbols from d3.symbol and d3.scaleOrdinal. An animation cycles through four dataset columns every three seconds, updating the x-axis mapping via the chart’s accessor methods. The visualization uses d3.axisLeft, d3.axisBottom, and SVG paths, with a legend and title added programmatically.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot- ICE7

This animated scatter plot visualizes the Iris dataset, cycling through four different flower measurements on the x-axis while keeping sepal length on the y-axis. It uses D3 v6 with a reusable scatterPlot module, SVG rendering, and a setInterval to rotate the x-axis variable. Points are colored by species, and the chart includes a custom legend, axis labels, and a title.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example presents a reusable scatter plot visualizing the Iris Dataset, cycling through four flower measurements—petal width, sepal width, petal length, and sepal length—as the x-axis every two seconds while the y-axis remains fixed on sepal length. Built with D3 v6, the code uses `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `scatterPlot()` to render SVG circles with animated transitions. Data is loaded via `d3.csv` from a GitHub Gist, and the plot updates in place by re-calling the chart function with new `xValue` accessors.

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example presents a reusable scatter plot visualizing the Iris Dataset, cycling through four flower measurements—petal width, sepal width, petal length, and sepal length—as the x-axis every two seconds while the y-axis remains fixed on sepal length. Built with D3 v6, the code uses `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `scatterPlot()` to render SVG circles with animated transitions. Data is loaded via `d3.csv` from a GitHub Gist, and the plot updates in place by re-calling the chart function with new `xValue` accessors.

Loading thumbnail…

ICE6-submitted by Tejaswi Tummala

This visualization displays the top five countries by population using a horizontal bar chart. The bars are rendered as red SVG rectangles within a React application, with blue grid lines and axis labels. The code employs D3.js modules including `csv`, `scaleBand`, `scaleLinear`, and `max` to load and scale the data. The chart is built with React's `useState` and `useEffect` hooks, while ReactDOM renders the final SVG output. Data is fetched from a CSV hosted on GitHub gists.

Loading thumbnail…

ICE6 submitted by Tejaswi Tummala

This example visualizes the Iris dataset as a scatter plot, mapping petal length and width to the x- and y-axes. Each point is colored by species, with setosa in blue, virginica in red (via an empty string falling through to the default red), and versicolor in red. The visualization uses D3 v6’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` for scales and axes, with SVG circles. Data loading uses `d3.csv` from a GitHub gist, and the code also sets `rx` and `ry` attributes based on sepal dimensions, though these have no visual effect on circles. The layout is responsive to the window size.

Loading thumbnail…

Iris Dataset Scatter Plot by Tejaswi_Tummala

This example visualizes the Iris dataset as a scatter plot, mapping petal length along the x-axis and sepal length along the y-axis. Each circle represents one flower, with no color or categorical encoding. The code loads data via `d3.csv` from a remote GitHub gist, parses numeric fields, and uses `d3.scaleLinear` with `d3.extent` to set the domains. Axes are rendered using `d3.axisLeft` and `d3.axisBottom`, and the plot is drawn as SVG circles with a fixed radius within a full-window viewport.

Loading thumbnail…

ICE-6: Rendering Marks and Channels with React submitted by Tejaswi_Teummala

This example renders a static SVG visualization using React and D3 v7, displaying country-level data on working hours and population from a CSV file sourced via GitHub gist. The code loads data with `d3.csv`, scales values with `d3.scaleBand` and `d3.scaleLinear`, and hand-codes a decorative geometric composition of rectangles, lines, and polygons in JSX. Although channel mappings are defined, the visible output is a fixed abstract artwork of brown, yellow, and red shapes rather than a data-driven chart.

Loading thumbnail…

Fork of Upgrade WIP - Religions of Largest 20 Countries

A stacked bar chart displays the estimated 2010 religious breakdown of the world's 20 most populous countries, using data from the Pew Research Global Religious Landscape. Built with D3 v5 and SVG, the visualization encodes countries along the y-axis and population counts along the x-axis, with each bar segmented by religion. Interactive tooltips via d3-tip reveal exact population values on hover, while hovering over the color legend highlights a specific religion by dimming other layers. The color legend is generated using the d3-svg-legend library.

Loading thumbnail…

Fork of Let's make a Bar Graph with D3.js

This bar chart displays the number of employees for various service categories, using a horizontal layout where each bar’s length corresponds to the recorded value. The visualization is built with D3.js v7, loading data from a CSV file and rendering SVG rectangles. It employs `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `axisLeft`/`axisBottom` for the axes, with data mapped from the “No.of Employees” column.

Loading thumbnail…

Untitled

This example presents an interactive visualization of a custom message, rendered as a network of connected nodes that respond to mouse movement. The code uses d3.forceSimulation to position and animate the nodes while continuously updating their positions. A dynamic label is drawn on an HTML5 Canvas using getImageData and putImageData, with the text "myMessage" seeded from the myMessage.js file. The visualization shows a particle system that forms and rearranges around the cursor, creating a fluid, text-based interaction. Custom styles in styles.css control the overall appearance.

Loading thumbnail…

ICE5-Tejaswi_Tummala - Learning and Parsing the CSV data with D3.js

This example parses a remote CSV file using D3.js and displays its metadata, including size, row count, and column count, in a styled HTML page. The visualization combines a static SVG illustration with CSS styling, showing a geometric shape and a red rectangle on a brown background. The code loads data from a GitHub Gist using `d3.csv()`, formats the result with `d3.csvFormat()`, and updates a `<pre>` element to present the summary. The SVG is embedded directly in the markup, while React is listed as the framework, though the example primarily relies on vanilla D3 v7 and DOM manipulation.

Loading thumbnail…

ICE5-Tejaswi_Tummala - Learning and Parsing the CSV data with D3.js

This example demonstrates the process of loading a CSV dataset from a remote URL using D3.js. The visualization presents the parsed data's metadata as a text message, including its size in kilobytes, the number of rows, and the column count. It utilizes the `d3.csv` function to fetch and parse the data, then employs `d3.csvFormat` to calculate the dataset's size. The interface displays a linked dataset source, an SVG house image, and the computed data summary within a styled HTML page. The code is implemented in vanilla JavaScript, leveraging D3 version 7.3.0.

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates how VizHub supports modular ES6 JavaScript and D3.js integration. It renders a fixed text message, “Hello VizHub!”, centered on the page via a CSS style. The code imports the `select` function from D3 and a local `message` string from a separate module, then uses `select('#message').text()` to update the DOM. D3 v5 is loaded from a CDN, while local styling and modules are imported through standard HTML and JavaScript syntax.

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal web page that displays the text “Hello HTML!” centered on the screen using CSS styling within a `<style>` tag. The page renders a single div element with a class of `message`, which applies a large font size and centers the text horizontally. The code uses basic HTML, CSS, and JavaScript structure without any external libraries, frameworks, or data sources. The rendering approach is static, with no interactive behavior or dynamic updates visible in the provided files.

Loading thumbnail…

ICE5-Tejaswi_Tummala - Learning and Parsing the CSV data with D3.js

This example demonstrates the process of loading a CSV dataset from a remote URL using D3.js. The visualization presents the parsed data's metadata as a text message, including its size in kilobytes, the number of rows, and the column count. It utilizes the `d3.csv` function to fetch and parse the data, then employs `d3.csvFormat` to calculate the dataset's size. The interface displays a linked dataset source, an SVG house image, and the computed data summary within a styled HTML page. The code is implemented in vanilla JavaScript, leveraging D3 version 7.3.0.

Loading thumbnail…

ICE5-Tejaswi_Tummala - Learning and Parsing the CSV data with D3.js

This example demonstrates how to load and parse a CSV file using D3.js version 7, displaying basic dataset statistics in the browser. The code fetches a remote CSV from a GitHub gist via `d3.csv`, counts the rows and columns, and computes the data size in kilobytes using `d3.csvFormat` and `Math.round`. The resulting message, including the row and column counts, is rendered inside a styled `<pre>` element with an aquamarine background. The page provides a minimal, text-based overview of CSV data properties without any charts or visualizations.

Loading thumbnail…

Fork of Smiley Face Part III

This example renders a stylized, cartoon-like smiley face using React components and D3’s `arc` generator. The face features pink circular ears, red eyes and pupils, a red nose, a white mouth, and a tongue, all layered via SVG primitives within a central `<g>` transform. The code explicitly defines each facial part as a separate React component, while D3’s `arc()` and `d3.arc()` are used to create the mouth and ear paths. The visualization is static, drawing from hardcoded geometry rather than external data.

Loading thumbnail…

Fork of Cat smiley

A fork of a cat smiley face rendered in SVG via React and D3.v7. The code uses D3’s `arc()` generator to create the mouth, eyes, and ears, with circles and ellipses for facial features. React components define the SVG structure, while D3 handles geometric paths. The face features pink, purple, red, and orange fills with distinct stroke colors.

Loading thumbnail…

Fork of Smiley Face Part III

This example builds a smiley face using React and D3 v5, rendering all shapes as SVG elements. It uses D3’s `arc()` generator with custom start and end angles to create the mouth and both eyebrows, which are then rotated and translated via SVG transform attributes. The face includes yellow and lightblue eyes with dark pupils, a purple triangular nose, and black hair and facial hair paths. The code demonstrates composing geometric primitives with D3 path generators within a React component.

Loading thumbnail…

Fork of Smiley Face Part III

A smiling face is rendered as a collection of SVG shapes, with a mint-green head, white eyes with offset pupils, a red nose, and a white mouth created using a D3 arc. The entire composition is drawn within a React component and centered using an SVG group with a translation. The code relies on React for the component structure and D3's `arc` function to generate the mouth's path, while all other facial features are basic SVG circles and paths.

Loading thumbnail…

Fork of Smiley Face Part III

A yellow smiley face rendered with SVG shapes, including eyes, pupils, a red nose, tongue, and a curved mouth, is centered within a square canvas. The code uses React components for each facial feature and leverages the D3.js arc generator (`d3.arc`) to define the mouth’s path. The visualization is built with React 16.9.0 and D3 v5, with all elements positioned relative to the center using SVG transforms.