Fork of Vega-Lite API Template

100%

Fork of Vega-Lite API Template

✓ Published0🌍 Public

Last edited Sep 30, 2022

Created on Sep 30, 2022

This example visualizes the Iris flower dataset, plotting sepal length against sepal width as a scatter plot with points colored by species class. Hovering over a point reveals its class via a tooltip. The visualization is built using the Vega-Lite API for D3, with `vl.markCircle`, `vl.x().fieldQ`, and `vl.y().fieldQ` to encode quantitative fields, and `vl.color().fieldN` for categorical coloring. Data is loaded asynchronously via `d3.csv` from a Gist-hosted CSV file, and the chart renders with a custom dark-themed axis configuration.

AI-generated description

A visualization constructed using the vega-lite-api.

The data shown here comes from the UCI Machine Learning Repository: Auto MPG Data Set, via Gist: Scatter Plot with Menus.

MIT Licensed

Similar vizzes

Loading thumbnail…

iris

This visualization displays the classic Iris flower dataset as a scatterplot, mapping sepal length and width to the x and y axes, petal length to point size, and species to color. The rendering uses D3 v4’s SVG output. Data loading relies on `d3.csv` for parsing the CSV file, while scales are built with `d3.scaleLinear`, `d3.scaleSqrt`, and `d3.scaleOrdinal`, plus axes from `d3.axisBottom` and `d3.axisLeft`. A categorical legend, built with circle elements, identifies the three species (setosa, versicolor, virginica), and a tooltip div is appended to the body but never made visible.

GGTHamonville

82% match

Loading thumbnail…

Iris Scatter Vega Lite

This scatter plot shows the relationship between petal length and petal width for iris flowers, distinguishing species by color and filtering out the Iris-setosa type. It is built using the vega-lite-api library, which constructs a Vega-Lite specification that is then rendered as an SVG by Vega. The data is loaded from a CSV file via d3.csv, and the visualization is configured with custom axis and label styling for improved readability. The chart is sized to fit the window and includes interactive tooltips provided by the vega-tooltip handler.

Ddvinubius

82% match

Loading thumbnail…

Fork of Iris Dataset Scatter Plot

This example visualizes the Iris Dataset as a scatter plot, mapping petal length and width to the x- and y-axes. Points are colored by species (setosa, versicolor, virginica) using blue, red, and black. The chart also encodes sepal length and width into the `rx` and `ry` attributes of each circle, though these do not affect rendering since they are not recognized SVG circle properties. The implementation uses D3 v6 to load CSV data with `d3.csv`, scales with `scaleLinear`, and draws axes via `axisLeft` and `axisBottom`.

SShivaKarpe

82% match

Loading thumbnail…

Fork of Iris Dataset Scatter Plot

This example visualizes the Iris Dataset as a scatter plot, mapping petal length and width to the x and y axes while colors denote the three species (setosa, versicolor, and others). It also embeds sepal length and width as additional attributes on the circles. The code loads CSV data via `d3.csv`, scales the values with `d3.scaleLinear`, and renders SVG circles using `d3.select` and `.join()`. Axes are generated with `d3.axisLeft` and `d3.axisBottom`, and the visualization fills the browser window using `window.innerWidth` and `window.innerHeight`.

Eeravellisaimeghana

82% match

Loading thumbnail…

Fork of Iris Dataset Scatter Plot

This example visualizes the Iris Dataset, plotting petal length against petal width, with each point colored by species. A scatter of circles maps these measurements, while additional sepal dimensions are stored as unused properties on each data point. The visualization loads CSV data via `d3.csv`, constructs scales with `d3.scaleLinear`, and renders circles and axes using SVG. The code uses D3 v6, with styling applied through `d3.axisLeft` and `d3.axisBottom`. The plot fills the browser window, and tick labels are enlarged for readability.

Ppreethamkesa

82% match

Loading thumbnail…

Fork of Iris Dataset Scatter Plot

This visualization displays the Iris dataset as a scatter plot, mapping petal length to the x-axis and petal width to the y-axis, with points colored by species (orange, darkpink, and gold). It loads CSV data via `d3.csv`, parses numeric fields, and uses `d3.scaleLinear` with `d3.extent` to set domains. Axes are rendered with `d3.axisLeft` and `d3.axisBottom`, while circles are drawn using SVG `selectAll().data().join()`. Although labels mention sepal dimensions, the axis text is inconsistent, and the `rx`/`ry` attributes do not affect circle rendering.

Vvegurusaiprathyusha

81% match

Loading thumbnail…

Untitled

This example visualizes the Iris flower dataset, plotting sepal length against petal length with points colored by species (setosa, versicolor, virginica). It uses d3.scaleLinear for the x and y axes, d3.scaleOrdinal for categorical colors, and d3.axisBottom/axisLeft with tickSize to create a ggplot2-style gray background with white gridlines. The SVG circles are appended via d3.selectAll and .enter(), with data loaded through d3.csv. The chart includes axis labels and a legend-free design, emphasizing the three species clusters through distinct color ranges.

SSheela2930

81% match

Loading thumbnail…

Fork of Iris Dataset Scatter Plot

This example visualizes the Iris dataset, plotting petal length against petal width for individual flower specimens while color-coding points by species (setosa, versicolor, and virginica). It uses D3 v6’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs to generate axes and map data to screen coordinates. The SVG circles are rendered with `select`, `append`, and a join operation, and the data is loaded via `d3.csv` from a raw GitHub source.

Bblikitha

81% match