Fork of Fork of KFDA data using Vega-Lite API

100%

Fork of Fork of KFDA data using Vega-Lite API

✓ Published0🌍 Public

Last edited Sep 16, 2022

Created on Sep 16, 2022

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

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…

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

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

72% 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…

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

71% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between patients' NoShowRate and RiskScore, using color to indicate RiskLevel and shape to distinguish In-Care status. The visualization is built with the Vega-Lite API, a programmatic interface for Vega-Lite specifications, and renders through Vega and D3. Data comes from a CSV file loaded via D3’s `csv` function, sourced from UCI Machine Learning Repository’s Auto MPG dataset. The code demonstrates how to compose an interactive scatter plot with custom tooltips and a dark-themed configuration for improved readability.

Yyijunqian

70% match

Loading thumbnail…

Fork of Fork of Vega-Lite API Template

This scatter plot visualizes the relationship between two quantitative variables, "Marks" and "time_study," with each point’s tooltip revealing the value of "Marks." The visualization is built using the Vega-Lite API, which generates a specification that is registered with Vega and Vega-Lite for rendering. Data is loaded asynchronously via a CSV file from the UCI Auto MPG dataset, fetched using d3’s `csv` function. The chart’s layout adapts to the browser window using autosize with fit, and custom axis styling is applied via a config object.

NNaimisha-M

69% match

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the Auto MPG dataset from the UCI Machine Learning Repository, plotting array values against props4 as bar marks with a tooltip showing props2. Built with the Vega-Lite API, it registers Vega and Vega-Lite libraries, configures axis styling with dark labels and yellow ticks, and uses D3’s csv loader to fetch remote data. The visualization renders full-window with SVG output, enabling interactive tooltips via Vega-Tooltip.

AAnthony Zornig

69% match