Marmiya

@Marmiya·5 public vizzes

Vega-Lite Bar Chart

This example embeds a Vega-Lite specification into a webpage using the vegaEmbed API, rendering an interactive bar chart of precipitation counts from Seattle weather data. The chart uses a binned x-axis for precipitation values and a y-axis showing aggregate counts, with the data pulled directly from a GitHub-hosted CSV file. The code loads Vega, Vega-Lite, and Vega-Embed libraries from a CDN, and the mark type is set to `bar`. A separate JSON file defines a point chart with nominal and quantitative encodings, but the index.html file demonstrates the primary bar chart visualization.

Jan 20, 2021

Loading thumbnail…

Fork of HTML Starter

This example displays a scatter plot with three categories on the x-axis and quantitative values on the y-axis, using Vega-Lite’s declarative JSON specification embedded within an HTML page. The page relies on CSS for centered, large-text styling and JavaScript to log a message to the console. The chart itself encodes data points as circles, with category "a" mapped to nominal positions and measure "b" mapped to quantitative coordinates, rendered by Vega-Lite’s default point mark.

Jan 20, 2021

Loading thumbnail…

Hello, D3!

This example demonstrates a simple D3.js visualization: a single large yellow circle centered within an SVG canvas. It introduces fundamental SVG and D3 selection patterns by creating, styling, and positioning a circle element using `d3.select`, `svg.append`, and `.attr` methods. The code sets the circle’s radius to 200 pixels, fills it with yellow, and centers it horizontally and vertically based on the SVG’s width and height attributes. The visualization serves as a minimal, hands-on introduction to rendering SVG shapes with D3 v5.

Jan 19, 2021

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a minimal D3 version 6 setup by selecting an SVG element and setting its background color to red. The page loads D3 from both the minified and unminified CDN scripts, then applies the style via `d3.select('svg')` and `svg.style()`. The code also imports `select` from D3 in an index.js file. No data is loaded or bound; the visualization simply shows the direct DOM manipulation capabilities of D3’s selection API.

Jan 19, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between vehicle horsepower, fuel efficiency (mpg), weight, and acceleration for a dataset of automobiles. It encodes weight as color and acceleration as circle size, with tooltips displaying car names. The visualization is built using the Vega-Lite API, which wraps Vega and Vega-Lite specifications, with data loaded asynchronously via D3’s `csv` function from an external URL. The chart is rendered in SVG using vega-tooltip for interactivity, while custom configuration adjusts axis appearance.

Jan 17, 2021