T

Tekmal-Bhavana

@Tekmal-Bhavana·45 public vizzes

Loading thumbnail…

Map

This example visualizes a map of Taiwan using a Transverse Mercator projection, with geographic regions rendered as gold SVG paths that turn white on hover. The visualization uses d3-geo, including `d3.geoTransverseMercator` and `d3.geoPath`, to project and draw the geometry. A zoom behavior via `d3.zoom` enables interactive panning and scaling. The geographic data comes from a remote GeoJSON file loaded with `d3.json`, while the projection parameters are tuned to center and scale the map within the SVG canvas.

Loading thumbnail…

Fork of Fork of Portland Map

This visualization displays the neighborhoods of Portland, Oregon as a geographic map rendered using SVG paths. The map is projected using `d3.geoConicEqualArea` and drawn with `d3.geoPath`, with TopoJSON data converted to GeoJSON via the `feature` function. The React component `Marks` iterates over the map features to generate each neighborhood path, styled with teal strokes. The map title “Taiwan” appears in the HTML, though the actual data represents Portland boundaries.

Loading thumbnail…

Fork of Europe Map ICE8

This example renders a static map of Europe using React and D3 v5, drawing SVG paths from GeoJSON data fetched via `d3.json`. It applies a Mercator projection with `d3.geoMercator`, centered on coordinates [13, 52] and scaled to fit a 600×500 viewport. The `d3.geoPath` generator converts the geographic features into SVG path data, with each feature stroked in grey and filled white. The code explicitly requests state boundaries from a remote GeoJSON URL, indicating a straightforward choropleth-less basemap visualization.

Loading thumbnail…

Fork of ICE-8

This example shows a choropleth map of Indian states colored with a categorical scale, with each state’s name rendered at its centroid. Using d3.json to load TopoJSON data, the code applies a geoMercator projection and d3.geoPath to generate SVG paths for state boundaries. State names are positioned via pathGenerator.centroid, while a d3.scaleOrdinal assigns colors from schemeCategory10. The map updates hover effects through CSS on the `.states` class, with red strokes outlining each state.

Loading thumbnail…

Fork of ICE8

This visualization displays a map of Uruguay using a transverse Mercator projection, with country regions rendered in light green and outlined in black. The map is drawn as SVG paths generated by `d3.geoPath`, fed by TopoJSON data loaded from a remote GeoJSON source. Users can pan and zoom the map via `d3.zoom`, which applies transformations to the group containing the geographic features. The page also includes a title and hover styling that changes region colors to maroon.

Loading thumbnail…

Fork of fork

This social network visualization displays nine named individuals connected by weighted links, with node positions determined by a force-directed layout. Using the D3 v4 library through the `d3.layout.force()` API, the code creates a SVG canvas with yellow circular nodes labeled with each person’s name, while black link strokes vary in thickness according to the connection weight. The network is interactive, allowing dragging of nodes via the force layout's drag functionality, with gravity, distance, and charge parameters controlling the spatial arrangement. Data comes from a local JSON file containing node group assignments and link weights.

Loading thumbnail…

Fork of ICE-8

A force-directed graph displays nine named nodes, for example "Shashank" and "Divya," connected by weighted lines from a hard-coded JSON dataset. The visualization uses d3.v4 along with an older d3.v2 fallback. Circles and red text labels are manually styled with SVG attributes, while a custom `d3.layout.force()` applies gravity, distance, and charge parameters to position the nodes. Nodes are draggable, and their links update on each tick event.

Loading thumbnail…

Fork of bhavana

This interactive tree chart displays a hierarchical animal classification diagram, with categories like Animal, Reptile, Mammal, and their subcategories. Users can click nodes to collapse or expand branches, with smooth 750-millisecond transitions animating the layout changes. The visualization uses D3.js version 3.5.17, specifically the `d3.layout.tree` and `d3.svg.diagonal` APIs to compute the node positions and draw curved links. Node circles are styled cyan with black borders, links are red, and the page background is pink, all defined through CSS within the embedded HTML file.

Loading thumbnail…

Fork of bhavana

This interactive tree diagram visualizes a hierarchical dataset of car brands and their parent companies, including Volkswagen, BMW Group, and Hyundai. The visualization uses the D3.js library's tree layout and diagonal link generator to render nodes and connections as scalable vector graphics (SVG). Users can click on nodes to expand and collapse branches through an animated update function that transitions nodes between states. The graph displays custom-styled blue nodes with violet borders and sky blue connecting links on a white background.

Loading thumbnail…

Fork of austrailia

This fork of a D3.js map visualization displays Argentina’s provinces using a transverse Mercator projection. The code loads GeoJSON data from a gist and renders each region as a styled SVG path with hover effects, using `d3.geoPath` and `d3.geoTransverseMercator`. A zoom behavior via `d3.zoom` allows interactive panning and scaling of the map. The visualization also incorporates `topojson.feature` and a sphere background, with a green-to-maroon hover fill for country outlines.

Loading thumbnail…

Fork of Australia map

This map displays Mexico’s states using a Mercator projection with d3.geoPath and d3.geoMercator. It fetches TopoJSON data from a GitHub gist, converts it with topojson.feature, and renders each state as a green SVG path with yellow borders. A blue graticule overlay is drawn using d3.geoGraticule. The visualization is built with React, which loads the data asynchronously via d3.json and displays a loading message until the geometry is ready.

Loading thumbnail…

Fork of Australia Map

This example displays a choropleth map of Australia’s administrative regions, rendered as red-filled paths with white strokes on an SVG canvas. It uses d3.geoMercator with a clipped projection and d3.geoPath to draw the features, while topojson’s feature method converts the loaded state and district datasets into GeoJSON. The map supports zooming via d3.zoom, and d3.scaleOrdinal with schemeCategory10 assigns categorical colors, though the current styling overrides fills with a uniform red.

Loading thumbnail…

Fork of map

This visualization presents a world map using a geographic projection, rendering countries as black shapes with red outlines on a light blue sphere. It highlights countries on hover by changing their fill to orange. The code uses D3 v5 for geo-spatial functions like `geoEquirectangular`, `geoPath`, and `select`, while TopoJSON’s `feature` method converts the external GeoJSON data to map features. The map data is sourced from a world-atlas JSON file hosted via CDN.

Loading thumbnail…

Fork of ICE7_Linechart

This visualization shows the relationship between BMI and sleep time as they relate to heart attack deaths in India from 2011 to 2019. The chart plots data points where BMI appears on the x-axis and heart attack deaths on the y-axis, connected by a smooth blue line generated using d3.line with a curveBasis interpolation. The visualization uses D3 v5 APIs including scaleLinear, axisBottom, axisLeft, and extent to map the data, with data loaded from a CSV file hosted on GitHub Gist. The SVG rendering includes custom styling for the line path and axis labels, displayed on a pink background with a centered title.

Loading thumbnail…

Fork of ICE-6 Scatter Plot

This fork of an ICE-6 scatter plot visualizes Commonwealth Games data, mapping sleep time on the x-axis and BMI on the y-axis. Points are colored red for smokers and black for non-smokers based on the Smoking attribute. Built with D3 v6 and React, the SVG chart uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` for scales and axes, with data loaded via `d3.csv` from a remote gist.

Loading thumbnail…

Fork of 3D Bar chart

This example visualizes tomato production volumes across six countries (USA, India, China, Australia, Japan, and UK) for each financial year from 2017 to 2022 using Highcharts with the highcharts-3d extension. It renders grouped, stacked 3D columns along a depth-scaled axis, with rotation angles (alpha 20, beta 20) providing perspective. The chart uses category-based x-axis labels, a numeric y-axis in dollars, and a z-axis titled “From 2017 to 2022.” Data originates from Macrotrends population sources, though the series values represent production figures.

Loading thumbnail…

Fork of ICE-7 Area Chart

This fork of the ICE-7 area chart visualizes gold price trends in India from 2019 to 2020 using an SVG rendered with D3 v5. The chart employs `scaleTime` for the x-axis and `scaleLinear` for the y-axis, with an area path generated by `d3.area` and `curveBasis`. Data is loaded from a remote CSV via `d3.csv`. The visualization features a pink background, a red title, and purple axis labels, with grid lines extending from both axes.

Loading thumbnail…

Fork of Gold prices

The visualization displays "Death By Stroke" data, plotting average life expectancy against year as a single orange area chart. It uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `area`, `curveBasis`, `axisLeft`, and `axisBottom` to render an SVG. Data is loaded via `csv` from a GitHub gist, with year parsed as a date and life expectancy as a number. The chart includes labeled axes, grid lines, and a red title.

Loading thumbnail…

Fork of Fork of ICE-7 Pie Chart

This fork of an ICE-7 pie chart visualizes 2022 laptop market share in India, displaying each company’s sales as a colored wedge. The chart uses d3.pie and d3.arc to construct the segments from CSV data, with d3.scaleOrdinal assigning categorical colors. The code loads data via d3.csv from a Gist URL, renders SVG paths, and appends a legend with d3.select and classed elements.

Loading thumbnail…

Fork of ice7

This example shows the top 10 countries by COVID-19 deaths using a static pie chart rendered as SVG. The code loads CSV data from a GitHub gist via `d3.csv`, computes each country’s death count as a percentage, and maps those values to pie segments using `d3.pie` and `d3.arc`. Color encoding is handled with `d3.scaleOrdinal`, while a legend with rectangles and text labels is built manually using D3’s selection and append methods. The chart includes a heading and numeric percentage labels formatted with `d3.format`.

Loading thumbnail…

Fork of Piechart ICE7

This pie chart visualizes laptop market share in India for 2022, using data loaded from a GitHub-hosted CSV file. The chart displays each company’s sales percentage as colored slices with value labels, rendered as SVG paths via the `pie()` and `arc()` generators. A legend lists companies with their corresponding colors and values. The visualization uses D3 v5’s `scaleOrdinal` for color mapping, `csv()` for data fetching, and `format()` to display tick values.

Loading thumbnail…

Fork of bhavana Scatter plot

This visualization displays the Iris dataset as an animated scatter plot, cycling through different pairings of sepal and petal measurements on the axes every two seconds. Species are distinguished by color-coded markers with a legend. Built with D3.js (v6.7.0), it uses `scaleLinear`, `axisLeft`, and `axisBottom` to construct the plot, with SVG rendering and a `setInterval` loop driving the animation.

Loading thumbnail…

Fork of Fork of Fork of ICE-6 Bar Graph

This bar chart displays the number of noncitizen removals (labeled "Amazon Prices") across the top 12 years in different states, sourced from a CSV file of immigrant data. Built with React and D3 v5, it uses `scaleBand` for the categorical year axis and `scaleLinear` for the quantitative values, rendering SVG rectangles and axis ticks. The chart updates reactively when the CSV loads, with D3 utilities like `max` and `format` driving the scales.

Loading thumbnail…

Fork of ICE-6 Scatter Plot

This example presents a scatter plot of an insurance dataset, visualizing the relationship between patient height and age while encoding weight and income through non-standard circle radius properties (`rx` and `ry`), which distorts the marks into ellipses. The code colors each point by gender (red for female, green for male) and builds the SVG chart using D3 v5 APIs such as `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`. Data is loaded from a GitHub-hosted CSV file, with axes labeled “Charges” and “bmi” despite the actual mapped fields being age and height.

Loading thumbnail…

Fork of Anv_ICE-6 Scatter plot

This scatter plot visualizes the relationship between age groups and their average deep sleep percentage, with each data point representing an individual. The visualization uses D3.js v7 within a React framework, rendering as an SVG. The code employs `d3.csv` to load the dataset, `d3.scaleLinear` for both axes, `d3.extent` to determine domains, and `d3.axisBottom` and `d3.axisLeft` for axes. A legend is added using color ticks. The data comes from a GitHub gist, and the page uses a light blue background with Arial font.

Loading thumbnail…

Fork of Fork of Fork of Fork of ICE-6 Scatter Plot

This scatter plot visualizes the Iris dataset using D3 v6, mapping petal length and width on the x and y axes while coloring each point by species (setosa, versicolor, or virginica) in blue, yellow, or red. The SVG rendering includes axis labels for petal length and sepal length, though the sepal dimensions are also encoded as the horizontal and vertical radii of each circle, creating elliptical markers. Data is loaded as CSV via `d3.csv`, with scales built through `scaleLinear` and axes generated using `axisLeft` and `axisBottom`.

Loading thumbnail…

Fork of Fork of ICE-6 bar graph

This example shows a horizontal bar chart ranking twelve cities by their pollution index scores from the “Healthy lifestyle city 2021” dataset, with blue bars and labeled axes. It uses React to manage state via useState and useEffect, loading data with d3.csv. The chart is rendered as an SVG, using d3.scaleBand for the y-axis city labels, d3.scaleLinear for the x-axis pollution values, and d3.max to set the domain.

Loading thumbnail…

Fork of ICE-6_BM

This visualization displays the average hourly wages for the top 25 areas from a prevailing wage dataset. It presents a horizontal bar chart using React and D3 v5, where each bar’s length corresponds to the average wage value. The code loads CSV data via `d3.csv`, scales positions with `d3.scaleBand` and `d3.scaleLinear`, and renders SVG rectangles and axes with `d3.axisLeft` and `d3.axisBottom`. Red gridlines and tick labels are manually generated, and the chart updates through React’s `useState` and `useEffect` hooks.

Loading thumbnail…

Fork of Fork of Fork of ICE-6 Bar Graph

This bar chart displays the monthly cost of Amazon's basic service across twelve countries, with country names on the vertical axis and cost values on the horizontal axis. Built with React and D3 v5, the visualization loads CSV data from a GitHub Gist and renders as an SVG. The code uses D3's `scaleBand` and `scaleLinear` for axes, `max` for domain calculation, and `csv` for data parsing, while React's `useState` and `useEffect` manage the data loading state.

Loading thumbnail…

Fork of Fork of Fork of ICE-6 Bar Graph

This horizontal bar chart displays the cost of Netflix subscriptions across twelve countries, sourced from a CSV file via `d3.csv`. The React-based SVG visualization uses `d3.scaleBand` for the y-axis country labels and `d3.scaleLinear` for the x-axis cost values, with red tick lines and text labels generated through `xScale.ticks()`. Each country’s bar is rendered as a `rect` positioned by the y-scale and sized by its cost, all within a 960x500 canvas. The chart is titled “Breast cancer wisconsin” in the HTML header, though the data pertains to streaming costs.

Loading thumbnail…

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

This bar chart visualizes the basic monthly cost of Netflix in 15 countries, ordered vertically by country. The visualization is built with React and D3 v5, using an SVG rendering approach. The code loads CSV data from a GitHub gist and uses `d3.scaleBand` for the y-axis, `d3.scaleLinear` for the x-axis, and `d3.max` to determine the domain. Each country is represented as a `rect` element, with bars drawn from the left margin.

Loading thumbnail…

Fork of ICE-5

This example displays CSS Named Colors parsed from CSV data, rendering each color as a cell within a grid on an SVG canvas. The visualization uses React to manage the component state and lifecycle, while D3.js v5 handles data loading and parsing through its `fetch` and `d3.csv` APIs. The code constructs an SVG pattern with embedded image data to display the collection of named colors, with styling applied through CSS classes defined in the page. The layout presents the colors in a tabular format, showing the full set of CSS color names with no interactive elements or force simulation.

Loading thumbnail…

ICE-5

This example shows a static map of the world rendered as a grid of colored squares, with each cell’s color determined by the country it overlaps. The visualization uses D3 v5 to load and parse color data from a CSV file, then maps those named colors to geographic regions defined by an embedded PNG image. The SVG pattern and image data are used to generate the final output, with no interactive elements or animations. The code relies on D3’s data-loading utilities and React for rendering the result.

Loading thumbnail…

Fork of ICE-5

This example displays an image of Earth embedded within an SVG, using CSS Named Colors from a CSV dataset. The code loads and parses the CSV with D3 v5’s fetch and promise methods, then renders the visual as an SVG pattern. The background features a light gray rectangle overlaid with the Earth image via a pattern definition, while the `<pre>` styling suggests a text-output component. The example demonstrates basic data-loading and SVG composition within a React framework, though no interactive elements are present.

Loading thumbnail…

ICE 5

This visualization presents a blank SVG canvas with a light gray background, overlaid with an image pattern defined in the SVG defs. The main interactive element is a text display showing metadata about a dataset loaded from a CSV file, including its size, row count, and column count. The code uses D3 v5 to fetch and parse the CSV data from a GitHub gist URL, then formats and displays this information in a styled `<pre>` element. The rendering approach combines static SVG markup with dynamic data-driven text output.

Loading thumbnail…

newviz

This example demonstrates basic SVG shapes arranged in groups with varied styling, including a red circle, a green rectangle, and a semi-transparent shape with a black stroke. The visualization also incorporates lines and a polyline path, both styled with thick strokes and rounded joins. It uses raw SVG elements like `circle`, `rect`, `line`, and `path` within transformed `<g>` groups, with CSS classes controlling stroke properties. The rendering is static, produced entirely in an inline SVG, with no external libraries or data inputs.

Loading thumbnail…

ICE-5

This example displays metadata about a CSV dataset loaded from a GitHub Gist, showing the file size in kilobytes, the row count, and the column count in a black-and-white text panel. It uses D3 v5’s `d3.csv` to fetch the remote CSV file and `d3.csvFormat` to calculate its size. The page also demonstrates local ES6 module imports, including a message from `myMessage.js`, and applies basic CSS styling to the layout.

Loading thumbnail…

ICE-5

This example loads a CSV file containing cause-of-death data from a GitHub gist and displays basic file statistics as plain text in a preformatted block. Using D3 v5’s `d3.csv` and `d3.csvFormat`, the code calculates the estimated data size in kilobytes, then reports the number of rows and columns in the dataset. The rendered output is styled with black background and white text, while the page structure relies on a simple HTML script tag linking D3 from a CDN.

Loading thumbnail…

Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

A field of overlapping, colored circles is generated above an SVG line drawing of the Buddha, whose path data is transformed and scaled. The circles' coordinates and fill colors are determined by random multiplication of array values, resulting in a chaotic, scattered overlay. The visualization combines React for component structure, ReactDOM for rendering into the DOM, and SVG primitives for both the abstract points and the traced Buddha figure, with the Buddha's path rendered via a `path` element containing complex `d` attribute data.

Loading thumbnail…

Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

A grid of small, semi-transparent squares is overlaid with a complex, multi-colored Buddha path, creating a dense, overlapping visual texture. The squares are generated from a nested loop in React, and each rectangle’s position, fill, and rotation are randomized. The Buddha vector path is drawn from an inline SVG path string, scaled and translated within the same React-rendered `<svg>` element.

Loading thumbnail…

Buddha in colors -overlapping Buddha

The visualization displays an abstract, overlapping Buddha silhouette composed of hundreds of small, rotated squares in a random spectrum of colors. Each rectangle is positioned at random coordinates within a 960-by-1000 viewport, uses an opacity of 0.8, and is rotated 45 degrees. The code employs React and ReactDOM to render the SVG, with nested array maps generating the shapes and `Math.random()` controlling color, position, and transform values, while the Buddha’s path is drawn from a predefined SVG path string.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

A black background displays a densely layered composition of randomly generated, rotated squares in vibrant colors, overlaid with a large, translucent Buddha path rendered in SVG. The React component maps over nested arrays to produce multiple overlapping rectangles with random positions, sizes, rotations, and fill colors, while the Buddha shape is drawn using an SVG path element. The visualization combines procedural geometric chaos with a fixed religious icon, using React's declarative rendering to manage the SVG output.

Loading thumbnail…

Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

A field of overlapping, colored circles is generated above an SVG line drawing of the Buddha, whose path data is transformed and scaled. The circles' coordinates and fill colors are determined by random multiplication of array values, resulting in a chaotic, scattered overlay. The visualization combines React for component structure, ReactDOM for rendering into the DOM, and SVG primitives for both the abstract points and the traced Buddha figure, with the Buddha's path rendered via a `path` element containing complex `d` attribute data.

Loading thumbnail…

Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

A colorful abstract visualization displays a central Buddha-like figure rendered in black alongside a dense field of overlapping, semi-transparent polygons. The polygons are generated by nested loops and randomly positioned vertices, with random RGB fill colors and opacity, creating a layered, chaotic composition against a black background. The Buddha path is drawn using an SVG `<path>` element with a transform, while the polygons use SVG `<polygon>` elements. The visualization is built with React and renders entirely through SVG.

Loading thumbnail…

Fork of Fork of Fork of Fork of Fork of Buddha in colors -overlapping Buddha

A colorful, chaotic scatter of small circles overlaps a stylized Buddha silhouette drawn as a complex SVG path. The circles are generated via triple-nested React `.map()` loops, with random positions and RGB fill values, while the Buddha path is rendered using React elements and SVG coordinates. The visualization uses React 16.10 and ReactDOM to render the SVG output, with a black background and no interactive behavior.