Fork of KFDA data using Vega-Lite API

100%

Fork of KFDA data using Vega-Lite API

✓ Published1🌍 Public

Last edited Sep 16, 2022

Created on Sep 13, 2022

Forked from 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.

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 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

88% match

Loading thumbnail…

KFDA data using Vega-Lite API

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.

Yyejichun@naver.com

88% 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

78% 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

77% 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

77% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays a genome dataset as a scatter plot, with each point positioned by chromosome position and protein accession identifier. The plot uses a minimal point mark with very small, fully opaque circles and no strokes, creating a dense field of data points. Built with the Vega-Lite API, it registers Vega, Vega-Lite, and D3, and loads CSV data from a GitHub gist. Custom axis styling and tooltips are configured, with the visualization rendered as an SVG that fills the browser window.

Ggon araseon

76% match

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization presents a scatter plot of Auto MPG data, showing relationships between vehicle attributes through a dense cluster of points. It uses the Vega-Lite API to construct the chart, with D3.js handling data loading via `d3.csv`. The visualization features tooltips that display RGB hex values when hovering over points. The chart is rendered dynamically, adapting its size to the browser window using the `vl.width()` and `vl.height()` methods from the vega-lite-api library, and includes custom styling from the config file for improved readability.

TtrwMK

75% match

Loading thumbnail…

Fork of Vega-Lite API Template

This interactive scatter plot visualizes the Auto MPG dataset from the UCI Machine Learning Repository, mapping fuel efficiency against horsepower, with color by origin and point size by weight. It uses the Vega-Lite API to declaratively define the visualization, with D3.js loading the CSV data. The example demonstrates integrating Vega-Lite's high-level grammar with a custom configuration for improved readability, including styled axes and labels, and fits the chart responsively to the full viewport while enabling tooltips through Vega Tooltip.

SSemyon

75% match