Skip to main content
SimilarExport ZIP
100%

KFDA data using Vega-Lite API

✓ Published1🌍 Public
Yyejichun@naver.com
Last edited Sep 13, 2022
Created on Sep 9, 2022

This scatter plot visualizes KFDA data, showing the relationship between the index of each metabolite (e.g., Alanine, Glycine, Histidine) on the x-axis and its corresponding beta coefficient (beta1) on the y-axis. The circles are colored by the metabolite's group classification, such as "Amino acids" with subgroups like "Branched-chain amino acids." The visualization is built using the Vega-Lite API, which constructs the chart specification, and rendered with Vega and Vega-Lite libraries, while the data is loaded from a CSV file using D3's `csv` function.

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…

Fork of KFDA data using Vega-Lite API

A scatter plot visualizes the relationship between metabolite index and beta coefficients from the KFDA data, with points colored by metabolite group. Clicking a point navigates to a detail page for that metabolite. The visualization uses the Vega-Lite API with D3.js for data loading, and customizes the chart appearance through a configuration file, including tooltips displaying p-values.

Yyejichun@naver.com
88% match
Loading thumbnail…

Fork of Fork of KFDA data using Vega-Lite API

This visualization displays the beta coefficients of statin exposure on various metabolite concentrations across three different covariate adjustment models, with each bar colored by metabolite group. It uses the Vega-Lite API to encode `idx` on the x-axis and `beta1` on the y-axis, with tooltips showing p-values. The data comes from a KFDA study (Korean Food and Drug Administration) and is loaded via `d3.csv`. Clicking a bar redirects to a separate `clicked.html` page that displays the metabolite title, implemented through a URL-encoded `href` link and the `URLSearchParams` API.

Yyejichun@naver.com
80% match
Loading thumbnail…

Fork of Vega-Lite API Template

A scatterplot shows the relationship between potassium and calcium content in various foods, with circle size encoding protein amount. The visualization loads CSV data from a GitHub-hosted NutritionFacts dataset using d3.csv, then renders the chart through the Vega-Lite API's vl.markCircle and vl.encode methods. Opacity and size settings improve readability, while config.js customizes axis styling and tooltip formatting. The page integrates Vega, Vega-Lite, and vega-tooltip libraries to display the interactive SVG output.

AAliaksandr
71% match
Loading thumbnail…

Vega-Lite API Template 5

This example presents two scatter plots of the Auto MPG dataset, visualizing relationships between different cellular attributes. The main chart maps Mitosis against Bland Chromatin, while a smaller navigation chart shows Bare Nuclei versus Uniformity of Cell Shape, both colored by class. The visualization uses the vega-lite-api to construct the plots, d3 to load the CSV data, and vega-tooltip for interactive tooltips. The plots are rendered using Vega's SVG renderer with a custom configuration for improved readability.

OOleJRask
69% match
Loading thumbnail…

Fork of Fork of Vega-Lite API Template

This scatter plot visualizes the relationship between patient no-show rates and risk scores, with points colored by risk level and shaped by care status. The visualization is built using the Vega-Lite API on top of vega-lite and vega, rendering to SVG. Data comes from the Auto MPG dataset via a CSV file, and the chart includes interactive tooltips displaying patient names. The design uses customaxis and label styling to improve readability.

Yyijunqian
68% match
Loading thumbnail…

Fork of Fork of Vega-Lite API Template

This visualization displays a scatter plot of data from the UCI Auto MPG dataset, plotting intensity against end year and coloring points by pestle, with tooltips showing sector information. Built with the Vega-Lite API, it uses d3’s `csv` function to load remote data, `vl.markCircle` for the marks, and encodes x, y, color, and tooltip channels. The code registers Vega-Lite with a custom config to adjust axis styling and label fonts, and renders the chart as an SVG fitted to the window size.

KKIRRAN P L
68% match
Loading thumbnail…

Vega-Lite API Template II

This interactive scatter plot visualizes the Auto MPG dataset, showing the relationship between Mitoses and Bland Chromatin, with points colored by Class and tooltips displaying the class label. Built with the Vega-Lite API, it registers Vega and Vega-Lite through `vl.register()`, loads CSV data via d3’s `csv` function, and applies custom axis and label styling from a config object. The visualization dynamically sizes to the window and uses SVG rendering with a Vega Tooltip handler for interactivity.

OOleJRask
67% match
Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, encoding horsepower, miles per gallon, origin, and weight for each vehicle. The visualization uses the Vega-Lite API to construct a circle mark with quantitative fields mapped to x and y axes, a nominal field for color, and a tooltip displaying the vehicle name. Built with vega-lite-api, vega, vega-lite, and vega-tooltip, the chart is styled with a custom configuration that disables axis domains and uses light gray ticks. Data is loaded asynchronously via d3.csv, with the plot sized to fill the viewport.

GGyromighty
67% match