test-0601-1

100%

✓ Published2🌍 Public

Last edited Jun 1, 2022

Created on Jun 1, 2022

This example displays the total number of user sessions and a bar chart of session counts by user type. It fetches JSON data from a GitHub gist using the Fetch API, then uses vega-lite-api with vega and vega-lite to render the bar chart. The total session count is extracted from the data and inserted into the page’s heading via `getElementById`. The chart encodes user type on the x-axis and session numbers on the y-axis.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Fork of test-0601-3

This example displays the total number of user sessions from a remote JSON dataset, rendering a horizontal bar chart that compares session counts across different user types. The visualization uses Vega-Lite and the Vega-Lite API to define a bar mark, with the x-axis encoding quantitative user numbers (scaled to a 0–300 domain) and the y-axis encoding categorical user types. The total session count is also injected into the page’s heading via `document.getElementById`. Data is fetched asynchronously from a GitHub gist using the Fetch API, and the chart is appended to a DOM container.

HHalcyonWjr

92% match

Loading thumbnail…

Vega-Lite API test

This example demonstrates a Vega-Lite API test using visitor session data from a JSON file, showing user counts by type, online durations, monthly user trends, and session time distributions. The visualization relies on the Vega-Lite API, vega-tooltip, and D3.js (d3.json) to load and process the data, though the page currently only logs the data to the console without rendering any charts. The code references vega.min.js, vega-lite.min.js, and vega-lite-api.min.js libraries, with a React starter project also mentioned in the README as an alternative approach. The HTML structure includes custom styling for tooltip elements, though no visual output is currently generated.

HHalcyonWjr

78% match

Loading thumbnail…

Fork of test-0601-2

This example displays the total number of user sessions as a plain numeric value on a webpage. It fetches a JSON file from a GitHub-hosted dataset using `$.getJSON` and the Fetch API. The retrieved `perDay` value from the `usersOnline` object is written directly into an HTML `<span>` element. The visualization is minimal, consisting solely of this headline number without charts or graphs.

HHalcyonWjr

72% match

Loading thumbnail…

Assignment2_Barchart

This example shows a horizontal bar chart displaying the number of users for various applications, sorted by the first 50 entries from a CSV dataset hosted on GitHub. The bars render through React components that leverage D3 v5’s `scaleBand`, `scaleLinear`, and `max` functions to compute positions and dimensions, with SVG `rect` elements for each mark. Custom `AxisBottom` and `AxisLeft` components generate tick lines and labels, while a `title` element inside each rectangle provides a native tooltip in the browser.

Aaniteshterala2000

68% match

Loading thumbnail…

Vega-Lite API Template

This example uses the Vega-Lite API to render a bar chart of student performance data, showing chapters on the x-axis and total scores on the y-axis, with bars colored by difficulty level and tooltips revealing the total score. The underlying data is a small set of chapter names, percentages, scores, levels, and elapsed times. The visualization is built with the `vega-lite-api` library, which generates a Vega-Lite specification that is rendered by the Vega engine. The code registers both Vega and Vega-Lite, applies custom configuration for axis styling, and uses the d3 `csv` function to fetch data from a remote URL, though the live render uses hardcoded data instead.

JJeyasuriya M

68% match

Loading thumbnail…

Vega-Lite API Template

This example shows a timeline of page visits, with a line mark for each session plotted against timestamps on the x-axis and page names on the y-axis, colored by session ID. The visualization is built using the Vega-Lite API, which registers Vega and Vega-Lite libraries, and loads data from a CSV file via d3.csv. It renders as an SVG that fits the window, using custom axis and label styling from a config object, with Vega Tooltip enabled for interactivity.

CCurran Kelleher

68% match

Loading thumbnail…

Vega-Lite API Template

This bar chart displays population by country from a 2015 dataset, using Vega-Lite’s API to build the visualization with horizontal bars sorted by value. The code loads CSV data via `d3.csv`, configures axes and styling through a custom config object, and renders SVG using vega-lite and vega-tooltip for interactive hover details. The example demonstrates programmatic chart construction and React state management for handling asynchronous data.

Hhamzavg

67% match

Loading thumbnail…

Vega(Lite)

This example shows a horizontal bar chart of six test data points (element 1 through 6 with values 4, 8, 15, 16, 23, and 42), with the bars extending rightward from the y-axis. The visualization is built using Vega-Lite’s JSON declarative grammar, embedded inline in the page. The chart renders as an SVG via `vegaEmbed`, and the code loads Vega, Vega-Lite, and Vega-Embed from CDNs, then enhances the chart with tooltips using `vegaTooltip.vegaLite` on mouseover.

EEleonore9

67% match