Interactive World Map

100%

Interactive World Map

✓ Published0🌍 Public

Last edited Feb 17, 2022

Created on Feb 16, 2022

Forked from emoji-like face with mouth (D3)

This interactive visualization displays kernel density estimates of iris sepal length distributions for three iris species, with a dropdown menu to switch between species. The d3.js code loads data from a CSV file, computes density curves using kernel density estimation, and renders them as smooth SVG paths. A transition animates the curve when a new species is selected.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Iris

This interactive scatterplot visualizes the classic Iris dataset, allowing users to compare any two measured features (sepal/petal length and width) via dropdown menus. D3 v7 axes and scales update with animated transitions when a new axis is chosen. Circles are color-coded by iris species, with a legend showing the three classes. The data is loaded from a CSV using `d3.csv`, and the visualization leverages `scaleLinear`, `axisBottom`, `axisLeft`, and `transition` for smooth updates.

ZZeroKurosakii

81% match

Loading thumbnail…

Interactive cl

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements across three iris species. Dropdown menus control which numerical attributes appear on the x and y axes, while a color legend indicates species via a categorical D3 scale. Built with React and D3 v5, the SVG visualization renders axes via custom components and data points as circles with tooltips. The chart uses D3's `scaleLinear` for positional encodings, `scaleOrdinal` for color, and `csv` for data loading.

EEugenio2192

80% match

Loading thumbnail…

Untitled

This example shows violin plots of sepal length distributions for three iris species, using a kernel density estimate to depict the shape of each group's data. The code loads the Iris dataset via `d3.csv`, then applies `d3.nest()` to group by species and computes densities with a custom `kernelDensityEstimator` using the Epanechnikov kernel. It renders the resulting smoothed areas as SVG paths with `d3.area()` and `d3.curveCatmullRom`, positioned using `d3.scaleBand` and `d3.scaleLinear` scales.

Ddaniel

80% match

Loading thumbnail…

Interactive Iris Scatter Plot

This interactive scatter plot visualizes the classic Iris flower dataset, allowing users to explore relationships between sepal and petal measurements across three species. The visualization uses React for state management and d3.scaleLinear and d3.scaleOrdinal to map data to positions and colors. Two dropdown menus let users switch which measurements appear on the x and y axes, while hovering over the color legend or data points dims unrelated marks via opacity transitions. The SVG rendering includes custom axes and a metadata tooltip powered by SVG title elements.

RRikibens

80% match

Loading thumbnail…

Iris

This interactive scatterplot visualizes the Iris flower dataset, plotting sepal and petal measurements against each other. Users select the x and y axes from dropdown menus, and the points animate smoothly to their new positions with staggered transitions. The visualization encodes the three Iris species with red, green, and blue semi-transparent circles. Built with D3 v7, it uses `scaleLinear`, `axisBottom`, `axisLeft`, and `transition` to handle scaling, axes, and animated updates when the selected columns change.

ZZeroKurosakii

80% match

Loading thumbnail…

iris

This interactive scatter plot visualizes the Iris flower dataset, letting users select which measurements (sepal length/width, petal length/width) map to the x- and y-axes via dropdown menus. It colors each point by species (setosa, versicolor, virginica) using a d3.scaleOrdinal with red, blue, and green, and includes a legend. Built with D3 v5, the visualization renders as SVG with animated transitions that grow circles from a central point over two seconds. It uses d3.csv to load data, d3.scaleLinear for axes, and d3.axisLeft/axisBottom with gridlines.

Iianjwo

80% match

Loading thumbnail…

Interactive Menus Scatter Plots

This interactive scatter plot displays the Iris flower dataset, plotting measurements of sepal and petal dimensions for three species. Users select which measurement appears on each axis via dropdown menus, with the chart and axis labels updating accordingly. The visualization uses React with D3 v7, employing d3.scaleLinear for the x and y axes, d3.scaleOrdinal for species color coding, and d3.csv for data loading. The SVG rendering includes custom axis components and a color legend for species identification.

SSiddharthMittal07

79% match

Loading thumbnail…

Dynamic Scatter Plot including Species

This interactive visualization displays the Iris flower dataset as a dynamic scatter plot, allowing users to explore relationships between sepal and petal measurements across species. Two dropdown menus let viewers select which quantitative or categorical attributes to plot on the X and Y axes, with smooth animated transitions updating the points and axes. The visualization uses D3.js scales, axes, and transitions within a custom React-based scatterPlot component, while the menu system leverages D3’s dispatch for event handling. Data is loaded asynchronously via d3.csv from a remote gist.

SSubhamChhetri

79% match