FRC Charts

100%

✓ Published0🌍 Public

Last edited Dec 30, 2021

Created on Dec 30, 2021

This example displays a multi-line chart of male FRC (Forecast Risk Coefficient) values across equations, with lines colored by age. The visualization is built using the vega-lite-api library, which registers with vega and vega-lite for rendering. Data is loaded asynchronously from a CSV file via d3.csv. The chart uses a line mark with points, and the y-axis is scaled to exclude zero. Styling is customized through a config object that adjusts axis labels and titles.

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…

Line chart

This line chart visualizes temperature data over time, using a line mark to represent temperature values on the y-axis against timestamps on the x-axis. Built with the Vega-Lite API (vl) and D3.js, the example loads CSV data from a remote URL via d3.csv, then renders the chart with configurable axis styling and an SVG renderer. Tooltips are enabled through the Vega tooltip handler, and the visualization auto-fits to the browser window size.

NNikhil Sharma

68% match

Loading thumbnail…

Vega-Lite Line Chart

This visualization displays temperature readings over time as a single semi-transparent line, with tooltips revealing the associated location name for each data point. Built with the Vega-Lite API, it renders as an SVG using vega-lite v4 beta and vega-tooltip for interactive hover information. The code loads CSV data from a remote GitHub gist using d3.csv, then configures the chart dimensions to fit the full window while customizing axis colors and label styles for readability. The line mark uses explicit size and opacity settings to achieve its subtle visual effect.

Bbakstorage00001

68% match

Loading thumbnail…

line chart

This line chart visualizes temperature readings over time, with each point along the line representing a recorded temperature value and a tooltip displaying the exact temperature on hover. It renders as a single continuous stroke, styled with a dark color scheme for axis labels and a light grid. The visualization is built using the Vega-Lite API, which composes the chart specification and renders it through Vega. Data is loaded asynchronously from a CSV file using `d3.csv`, and the chart is configured with custom axis styles and a responsive sizing that adapts to the browser window dimensions. A Vega tooltip handler enables interactive data inspection.

Hhuashe418

67% match

Loading thumbnail…

Vega-Lite API Template

A scatterplot of age against number of convictions displays a dense, overlapping point cloud. Built with the Vega-Lite API, it composes the chart declaratively via `vl.markPoint` and `vl.encode`, then renders to SVG through vega and vega-lite. D3’s `csv` loads the dataset from a GitHub gist. A custom config sets dark labels on light-gray axes, with semi-transparent, filled points sized at 900 and tooltips showing age.

Llscholz1

67% match

Loading thumbnail…

Multiple Line Chart

This example displays a multiple line chart tracking alpha power EEG signals across F3, F4, C3, Cz, C4, P3, P4, O1, and O2 electrode channels over time (Epoch). Each channel is rendered as a separate line using d3.line() with curveBasis smoothing on an SVG canvas. The code implements linear scales for both axes, axis generators for ticks and labels, and loads the dataset from a CSV file. Styling is defined in an external CSS file, with the visualization built entirely with D3 v6 APIs.

HHariprashanth75

67% match

Loading thumbnail…

Vega-Lite API Template

This example renders a scatterplot of individual-level data, plotting age against the number of convictions, using the Vega-Lite API. The visualization is built with the `vega-lite-api` library, which wraps Vega-Lite specifications in JavaScript, and relies on D3’s `csv` loader to fetch data from a GitHub gist. Circle marks are configured with size and opacity, and scales disable zero baselines for both axes. The chart’s appearance is customized through a config object, and the final SVG output is generated with Vega.

Llscholz1

66% match

Loading thumbnail…

Vega-Lite API: NACRO Survey Data

This visualization displays the distribution of survey responses by age, with bars colored by gender, using a bar chart. It is built with the Vega-Lite API, which registers Vega, Vega-Lite, and Vega-Tooltip to render the chart as SVG. The data is loaded asynchronously from a CSV file of NACRO member survey responses using d3.csv, and the chart dimensions adapt to the window size. A custom config object styles the axes and text with darker colors for readability.

CCurran Kelleher

66% match

Loading thumbnail…

Line Chart

This line chart visualizes the F4 electrode’s alpha power across Epoch values, using a smooth curved path to highlight trends over time. The chart includes labeled axes, gridlines, and a title. Built with D3 v6, it loads CSV data and renders an SVG, employing `d3.scaleLinear`, `d3.axisLeft`, `d3.axisBottom`, and `d3.line` with a `curveBasis` interpolation for the line.

HHariprashanth75

66% match