K

kaviya-ds

@kaviya-ds·39 public vizzes

Loading thumbnail…

K means clustering

This example shows the k-means clustering algorithm in action, animating the iterative process of grouping a small set of points from `data.csv` into three clusters. Initially, three randomly placed centroids are drawn, and each iteration assigns points to the nearest centroid using Euclidean distance, then moves the centroids to the cluster mean. The visualization uses D3 v6’s selection and `transition` methods to animate the points and centroids, with the centroid styled distinctly via a black stroke. The iteration count is displayed as text, and the animation stops after ten iterations.

Loading thumbnail…

Word Cloud-3

This visualization displays a word cloud built from frequency data in a TSV file, using font size to encode the magnitude of each term. The words are rendered as SVG text elements with random rotations and a categorical color scale. The layout is computed with the `d3.layout.cloud` plugin, which uses a collision detection algorithm to place words without overlapping. Data is loaded via `d3.tsv` and processed with array methods before the cloud is drawn and animated by the plugin’s step function.

Loading thumbnail…

Word Cloud-3

This word cloud visualizes the frequency of terms from a CSV/TSV dataset, with word size proportional to their numerical `frequency` values. It uses the Jason Davies `d3.layout.cloud.js` library to calculate word placements within a 800x500 space, applying random rotations and the "Impact" font. The visualization renders words as SVG `<text>` elements, with colors assigned from the `d3.scale.category20c()` palette and triggered via `d3.tsv()` data loading.

Loading thumbnail…

Word Cloud Example

This example demonstrates a word cloud visualization, where words from a CSV file (datas.csv) are displayed with varying font sizes proportional to their frequency counts. The visualization is built using D3.js v3 and the custom `d3.layout.cloud.js` library, which implements the word layout algorithm. The code uses D3's linear scale for color mapping and renders the words as SVG text elements. Animated placement occurs through the library's internal timer steps, positioning each word using a spiral placement algorithm.

Loading thumbnail…

Word Cloud

This word cloud visualization displays the frequency of terms related to physics, with larger words like "physics," "matter," and "energy" appearing more prominently. The visualization uses D3.js v4 with the d3.layout.cloud library to position words in a dense, rotated layout. Data from a JavaScript array supplies the text and size values, which are rendered as SVG text elements. The layout algorithm calculates word positions to fill the 560x400 canvas without overlapping.

Loading thumbnail…

Word Cloud Example

This example presents a word cloud visualization that arranges text tags by frequency, with larger words representing higher values in the input data. The layout algorithm, based on Jason Davies’s implementation, places words using an Archimedean spiral to avoid collisions. The code uses the `d3.layout.cloud` API with `.size()`, `.padding()`, `.rotate()`, and `.font()` configurations. After layout, the `d3.select("body").append("svg")` chain renders the results, applying font size and family via inline styles, with animated placement driven by the `setInterval` timer in the cloud layout process.

Loading thumbnail…

Word Cloud Example

This example displays a word cloud of physics-related terms, with font size encoding each word's frequency from the provided dataset. It uses the `d3.layout.cloud` plugin to compute the layout and renders the result as SVG text elements with D3 v3. The cloud rotates words at zero degrees and applies a grayscale color scale based on frequency. An animation gradually places each word into position as the layout algorithm runs.

Loading thumbnail…

Word cloud

This example displays a word cloud of 17 English words, such as "Hello," "Everybody," and "Coding," using the `d3.layout.cloud` API to position the words within a 450x450 SVG canvas. The implementation uses `d3.select`, `svg.append`, and `text` elements to render each word, with font size, rotation, and position determined by the cloud layout algorithm. The data consists of a static JavaScript array of words, and the visualization demonstrates how the `d3.layout.cloud` library integrates with the D3.js v4 framework within a React project.

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot explores the Auto MPG dataset from the UCI Machine Learning Repository, visualizing relationships between car attributes such as horsepower, weight, and acceleration. Users select which numeric columns to plot on the x- and y-axes via two dropdown menus built with a reusable `dropdownMenu` function. The visualization is rendered using D3 v5 with SVG elements, and circles animate into position over two seconds when the selection changes. Axes are generated with `axisBottom` and `axisLeft`, with scales computed using `scaleLinear` and `extent`.

Loading thumbnail…

choropleth map with interactions!

This interactive choropleth map displays world countries colored by economy category, with a clickable color legend that highlights or dims countries in the selected group. Pan and zoom via d3.zoom transform the map, while d3.geoNaturalEarth1 and d3.geoPath render the GeoJSON features derived from World Atlas TopoJSON data. The legend uses d3.scaleOrdinal with a spectral scheme, and hover styling changes country fill to red.

Loading thumbnail…

choropleth map!

This choropleth map colors countries by economic grouping using an ordinal color scale with a spectral scheme. The visualization renders geographic boundaries with d3.geoPath and a Natural Earth projection, and includes a custom color legend built with SVG circles and text. Users can pan and zoom via d3.zoom, while hovering highlights individual countries. Data comes from the World Atlas TopoJSON and TSV files, loaded asynchronously with d3.json and d3.tsv.

Loading thumbnail…

Colour and size legends

This example demonstrates two types of legends for scatterplots: a color legend using `d3.scaleOrdinal` and a size legend with `d3.scaleSqrt`, both rendered as SVG groups with `circle` and `text` elements. The color legend maps fruit names to distinct colors, while the size legend uses `scaleSqrt` with `ticks()` and `reverse()` to display descending circle radii. The reusable `colorLegend` and `sizeLegend` functions handle enter, update, and exit selections via `selection.merge()`, with spacing and text offsets configured through props. Styling for tick labels and circles comes from CSS classes defined in `styles.css`.

Loading thumbnail…

World Countries Tree 1

This visualization displays a hierarchical tree of world countries, organized by continent and region, using a collapsible-free dendrogram layout rendered as an SVG. It presents the geographic structure from the root “World” down to individual nations, with text labels sized by depth. The implementation uses D3 v5’s `tree` layout, `hierarchy`, and `linkHorizontal` for curved links, while `zoom` enables panning and scaling. Data is loaded from a local JSON file, with styling applied via CSS for path strokes and text shadows.

Loading thumbnail…

Countries Tree

A hierarchical tree visualization displays the countries of the world organized by continent and subregion, with the root node labeled "World." The visualization uses an SVG rendering approach, with the D3.js library's `tree` layout and `hierarchy` function to compute the node positions from the nested JSON data structure. The `linkHorizontal` path generator draws the connecting links between parent and child nodes, while text elements label each country and region. The data source is a static `data.json` file containing the nested geographic classification.

Loading thumbnail…

Tree

This visualization shows a hierarchical tree of world regions and countries, with the root labeled "World" branching into continents like Asia and sub-regions such as Southern Asia, and further into individual nation names. It uses D3 v5’s `tree` layout to compute node positions and `linkHorizontal` to generate curved SVG paths for the connections. The code loads hierarchical data from a `data.json` file and renders links in an SVG element sized to the browser viewport, without displaying node labels.

Loading thumbnail…

Blank Canvas

A blank SVG canvas fills the browser viewport, rendered as a rounded rectangle that spans the full width and height of the window. The visualization uses D3 v5 and React, with the code selecting the SVG element via `d3.select` to set its dimensions based on the document body’s client size. The rendering approach is SVG, drawing a single rectangle with a 40-pixel corner radius. No data source is present; this serves as a minimal starting point for building interactive graphics.

Loading thumbnail…

interactions!

This interactive world map displays country boundaries using a natural Earth projection, with countries rendered in light green and hovering states highlighted in red. The visualization loads geographic data from the world-atlas TopoJSON dataset, merging it with a TSV file to map ISO numeric codes to country names for tooltips. Built with D3 v5, it uses `d3.geoPath` and `d3.geoNaturalEarth1` for projection and path generation, while `topojson.feature` converts the TopoJSON topology into GeoJSON features. The sphere background appears blue, with semi-transparent black strokes outlining each country.

Loading thumbnail…

World map with D3.js!

This example displays a world map using D3.js v5 and TopoJSON, with countries rendered as light green paths with subtle black borders on a blue background. It loads GeoJSON data from the world-atlas package via `d3.json`, converts it to features with TopoJSON’s `feature` function, and projects it using `d3.geoEquirectangular` and `d3.geoPath`. The SVG paths are generated and appended to the canvas, creating a simple, interactive-free geographic visualization.

Loading thumbnail…

Let's make a map with D3.js!

This example renders a world map using D3.js and topojson, displaying country boundaries as light green shapes on a blue sphere. The visualization loads geographic data from the world-atlas TopoJSON file and converts it to GeoJSON features using the topojson `feature` function. D3’s `geoNaturalEarth1` projection and `geoPath` generator draw each country as an SVG path, with a separate path for the global sphere. The code uses the v5 API with imported functions from the d3 module, and styling applies stroke opacity to delineate borders.

Loading thumbnail…

Pie Chart

This interactive pie chart displays survey responses on Google apps grouped by category, with each slice representing a data record from a TSV file. Clicking radio buttons changes the displayed category from art to beauty. The visualization uses React with d3.pie for arc generation, d3.nest() for data grouping, and transition.attrTween to animate fill colors while paths morph from a wider inner radius to a narrower one in SVG.

Loading thumbnail…

Bowl of fruit-3(click to select)

A bowl of fruit shows five apples that shrink, disappear, change type, and get removed over timed intervals as the dataset updates. The visualization animates circles representing fruit, with apples in red and lemons in yellow, using D3 v5’s data join, enter/exit transitions, and `transition().duration()` to smoothly resize elements. `scaleOrdinal` maps fruit types to colors and radii, while `selectAll('circle')` and `.merge()` handle updates. The demo runs automatically via `setTimeout`, highlighting dynamic data binding without user interaction.

Loading thumbnail…

Bowl of fruit-3

A bowl of pink fruit transitions through a sequence of apples and a lemon in an SVG scene, demonstrating dynamic data binding with D3 v5. The visualization shows five fruit items that shrink and reposition as apples are eaten and one is replaced by a yellow lemon. Using `scaleOrdinal` for color and radius mapping, the code employs selection joins with `enter`, `merge`, and `exit` methods to update circles and labels. Elliptical fruit shapes are drawn as `rect` elements with rounded corners, styled via CSS.

Loading thumbnail…

Smiley face

This example creates a simple smiley face using D3.js and SVG. It draws a yellow circle for the face, two black circles for the eyes, and a mouth using an arc generator with specified inner and outer radii. The code uses D3 selections from the `d3` module, including `select` and `arc`, to create the shapes. The visualization is rendered in a React starter template with a fixed SVG size of 860 by 400 pixels.

Loading thumbnail…

Bowl of fruit-2

Five fruit circles enter as apples, then one is removed, another changes from apple to lemon, and a third is filtered out, with each state transitioned over one second. The SVG animation uses D3 v5 data joins with enter, merge, and exit selections, and renders circles whose fill and radius come from ordinal color and radius scales.

Loading thumbnail…

Bowl of fruit

An SVG bowl of fruit shows five apples rendered as red circles, with two scheduled updates: one apple is removed after a second, and another apple turns into a lemon (yellow, smaller) after two seconds. The visualization uses d3-selection to bind and update circle elements, d3-scaleOrdinal for color and radius mappings, and d3-range to generate the initial fruit array. Data updates trigger enter, update, and exit selections, demonstrating a basic data join pattern in D3 v5.

Loading thumbnail…

Temperature[area chart]

This example visualizes temperature changes in San Francisco over time as a filled area chart. The data is loaded from a CSV file and parsed into a timestamp and temperature value for each record. The visualization uses d3.scaleTime and d3.scaleLinear to map time and temperature to the chart's axes, and d3.area with a curveBasis curve to render the smooth, red-filled area. Axis labels and a title are drawn using d3.axisLeft and d3.axisBottom with SVG text elements.

Loading thumbnail…

Temperature[line chart]

This line chart displays temperature in San Francisco over time, with a red smooth curve connecting data points along the x-axis for time and y-axis for temperature. Using D3.v5, the code employs `scaleTime` and `scaleLinear` for axes, `line` with `curveBasis` for the smooth path, and `axisBottom`/`axisLeft` for ticks. Data loads from a CSV file, parsing timestamps and numeric temperatures before rendering in SVG.

Loading thumbnail…

Temperature[line chart]

This line chart displays temperature readings in San Francisco over time, with a smooth curve and labeled axes. The visualization uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to generate the SVG path. Data comes from a CSV file loaded via `d3.csv`, where timestamps are parsed as dates and temperatures as numbers. The chart includes a title, rotated y-axis label, and grid lines styled through CSS classes on the SVG elements.

Loading thumbnail…

Scatter plot

This scatter plot visualizes the sepal lengths of three iris species (Setosa, Versicolor, and Virginica) from a CSV dataset. The vertical axis orders the individual data points, while the horizontal axis represents the numeric sepal length value. Built with D3 v5, the visualization uses `scaleLinear` for the x-axis, `scalePoint` for the categorical y-axis, and renders circles with SVG. The chart includes labeled axes and a title, with data loaded via `csv()` and processed in a custom render function.

Loading thumbnail…

Scatter plot

This scatter plot displays the relationship between sepal length and petal length for Iris flowers, with each data point represented as a green circle. The visualization uses d3.scaleLinear for the x-axis and d3.scalePoint for the y-axis, with axes rendered via d3.axisBottom and d3.axisLeft. Data is loaded asynchronously from a CSV file using d3.csv, and values are converted to numbers before rendering. The chart includes labeled axes and a title, with the SVG canvas sized at 2000 by 900 pixels.

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for a dataset of cars from the UCI Machine Learning Repository's Auto MPG Data Set. The visualization shows each car as a red, semi-transparent circle positioned along the x-axis for horsepower and the y-axis for weight. The code uses D3 v5 functions including `select`, `csv`, `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render an SVG graphic. Axes are labeled with tick marks and text, with the chart including a title and axis labels for clarity.

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars, with each red semi-transparent circle representing a vehicle. The visualization uses D3 v5’s `scaleLinear`, `extent`, and `axisBottom`/`axisLeft` to map the data and render gridlines, while data is loaded from a CSV of the auto-mpg dataset. The SVG rendering includes axis labels and a title, with the code converting all numeric fields from strings on import.

Loading thumbnail…

Scatter plot

This chart displays population figures for ten countries using a scatter plot, where each circle’s horizontal position corresponds to its population value and its vertical position aligns with the country name. The visualization is built with D3 v5, using `scaleLinear` and `scalePoint` to map data, `axisBottom` and `axisLeft` for the axes, and SVG rendering. Data is loaded from a local CSV file and formatted with a compact tick format.

Loading thumbnail…

Bar chart

This bar chart displays population estimates for ten countries, using horizontal bars ordered by decreasing population with the largest at the top. The visualization loads data from a CSV file and renders it as SVG rectangles. It uses D3 v5 APIs including `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, `axisBottom`, and `format` to create the scales, axes, and tick labels. The y-axis labels show country names, while the x-axis uses abbreviated population values formatted with the `.3s` specifier.

Loading thumbnail…

Bar chart[salary analysis]

This bar chart visualizes salary range distributions, showing the count of individuals within each salary bracket. The horizontal bars represent salary ranges on the y-axis with their corresponding counts on the x-axis, ordered from lowest to highest salary range. The visualization uses D3.js v5 with React, rendering as an SVG. Data is loaded from a CSV file containing salary ranges and their frequencies. The chart employs d3.scaleLinear for the x-axis and d3.scaleBand for the categorical y-axis, with axis components created using d3.axisLeft and d3.axisBottom.

Loading thumbnail…

Shapes

This example displays a collection of simple SVG shapes in a React application, including circles and rectangles positioned on a 1000x1000 canvas with varied colors like green, yellow, brown, red, blue, and pink. The code directly uses the SVG API through JSX elements such as `<circle>`, `<rect>`, and `<g>` for grouping and translation transforms. It demonstrates basic static rendering of geometric primitives without any data bindings or interactions, illustrating how SVG markup is embedded within an HTML page styled with the `shape` class.

Loading thumbnail…

Eyes!

This example renders a pair of cartoon eyes using basic SVG shapes. Two white ellipses form the eye outlines, with brown circles for irises and smaller black circles for pupils, all positioned statically on a 500×500 canvas. The visualization demonstrates manual coordinate placement and shape styling through D3 v5 selection methods like `svg.append` and `.attr` within a React framework, outputting directly to SVG elements.

Loading thumbnail…

js

This example displays salary range data from a CSV file using D3.js. A static SVG scene shows a title, a list of sample car prices, and geometric shapes including circles, lines, and a path. The code imports `select` and `csv` from D3, loads the external `data.csv` file, and logs the parsed data to the browser console. The SVG is hard-coded in the HTML, with styling applied through CSS classes for the line and path elements.

Loading thumbnail…

Emoji

This visualization displays a simple green emoji face composed of SVG circles, with two black eyes positioned symmetrically on either side of the center. The code uses D3 v5’s `select` to target the SVG element and dynamically reads its width and height attributes to center the face. Each circle is appended with explicit `attr` calls for radius, position, fill, and stroke, demonstrating basic D3 shape creation without data binding or interactive behavior.