Mahesha999

@Mahesha999·7 public vizzes

fm viz - students vs ratios

This visualization shows student-to-teacher ratios across different students using two overlaid line charts, comparing two quantitative variables (d and e) for each student name. The data comes from a CSV file referenced from the UCI Machine Learning Repository. Built with Vega-Lite API and d3, the code uses vega-lite-api’s `markLine` and `encode` methods to map the categorical student names to the x-axis and the quantitative values to the y-axis, with the second line layered on top using `vl.layer` to combine both series. The visualization is rendered as an SVG, with custom styling for axes and labels defined in a configuration object.

Feb 8, 2022

Loading thumbnail…

Vega-Lite API Template - religion - circle

This example visualizes the world’s major religions by country using a circle plot, where each circle’s area encodes population size and its position maps country and religious affiliation. The visualization is built with the Vega-Lite API, registered within D3.js (v5), and renders as an SVG. It loads data from the UCI Machine Learning Repository via a CSV file, fetched with `d3.csv`. The chart’s appearance is customized through a Vega-Lite config, adjusting font sizes and axis styling for readability.

Feb 7, 2022

Loading thumbnail…

Vega-Lite API Template - religion - stacked bar chart

This stacked bar chart visualizes the distribution of religious affiliations across countries, using data from the UCI Machine Learning Repository via a Gist. The chart is built with the Vega-Lite API, running on top of Vega, Vega-Lite, and D3, and renders as an SVG. Population values are encoded on the y-axis, countries on the x-axis sorted by total y-values, and religion mapped to color. The code includes a custom config for dark-axis styling and employs Vega Tooltip for interactive hover details.

Feb 7, 2022

Loading thumbnail…

Vega-Lite API Template - bar chart

This bar chart, built with the Vega-Lite API, visualizes the population of each country in 2015. It encodes country names on the x-axis, sorted by population, with the quantitative population value on the y-axis. The visualization is generated from a CSV file loaded via d3’s `csv` function. The chart uses `markBar` for rendering, and a tooltip displays each country’s population on hover, with the chart sized to fit the window.

Feb 7, 2022

Loading thumbnail…

Fork of Fork of Vega-Lite API Template - line chart

This fork of the Vega-Lite API template renders a simple line chart of temperature over time, with the line drawn thick and semi-transparent. The visualization is built using the Vega-Lite API through the `vl` object, which registers Vega and Vega-Lite, and fetches data from a CSV file via `d3.csv`. The chart is rendered as an SVG, sized to fill the browser window, with a dark theme and larger fonts for readability. A tooltip is enabled via `vega-tooltip`, though the code appears to have a typo in the tooltip field name.

Feb 7, 2022

Loading thumbnail…

Fork of Vega-Lite API Template - scatter plot

A scatter plot visualizes the relationship between miles per gallon (mpg), horsepower, and weight for vehicles from the Auto MPG Data Set. The circles are colored by origin, with size encoding weight, and hovering reveals the vehicle name via tooltip. Built with d3.v5 and the Vega-Lite API, it uses `vl.markCircle`, `.encode()`, and `vl.x()`/`vl.y()` scales, while `getData.js` loads the CSV using d3.csv and config.js customizes axis and label styling.

Feb 7, 2022

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using both the D3.js `d3.csv` method and the native Fetch API with `async`/`await`. It displays statistics about the dataset—file size in kilobytes, row count, and column count—in a large `<pre>` element. The data source is a CSV file containing CSS named colors, hosted as a GitHub gist. The code also includes commented-out alternatives using the older Promise-based `fetch` pattern.

Feb 6, 2022