mail.lohade@gmail.com

@yashlohade777·8 public vizzes

adasd

This scatter plot visualizes the relationship between acceleration and horsepower for various automobile models. The visualization is built using the Vega-Lite API, which generates a Vega specification that is rendered as an SVG. The data is loaded asynchronously from a CSV file using d3.csv, and the chart is configured with custom axis styling. Tooltips display the vehicle name when hovering over each point.

Jul 12, 2024

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a bar chart of salary by country, with bars colored according to a categorical "Purchased" field. Built with the Vega-Lite API, it registers the vega, vega-lite, and vega-tooltip libraries, then fetches CSV data via `d3.csv` and renders the visualization into the full browser window. The chart uses bar mark sizing, field encodings for x, y, color, and tooltip, and applies a custom configuration for axis styles and typography.

Jul 9, 2024

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile performance data, plotting engine weight against horsepower for individual car models. The scatter plot encodes car origin through color, while point size reflects fuel efficiency (mpg). It uses the Vega-Lite API (vl.markPoint, vl.x, vl.y) to compose the visualization declaratively, with data loaded from a CSV via d3.csv. The vega view renders as SVG, and vega-tooltip provides interactive hover details. Appearance is customized through a config object that adjusts axis styling and typography.

Jul 9, 2024

Loading thumbnail…

sensor

This example visualizes the relationship between nations and their ranks using a scatter plot. Each point represents a country, with its nation name on the x-axis, rank on the y-axis, and a tooltip revealing the country’s name on hover. The visualization is built with the Vega-Lite API, which registers Vega and Vega-Lite for rendering, and uses D3’s `csv` loader to fetch external data from a GitHub-hosted text file. The chart adapts to the full browser window size and applies custom axis and label styling.

Jul 9, 2024

Loading thumbnail…

my data

A bar chart displays the average salary by country, with bars colored according to a categorical "Purchased" field and tooltips revealing the corresponding name. It is built with the Vega-Lite API, which compiles specifications to Vega and renders as SVG, using the vega-lite-api, vega, and vega-tooltip libraries. Data is loaded asynchronously via d3.csv from a remote GitHub Gist, with the chart sized to fit the viewport and the appearance customized through a shared config object.

Jul 9, 2024

Loading thumbnail…

Fork of Smiley Face Part II

This example renders a full-screen smiley face using React and SVG. The face is centered on the window, with a yellow circle for the head, two black eye circles, and a mouth that is defined but not yet drawn. The code uses React's `ReactDOM.render` to inject the SVG into the DOM, and dynamically calculates dimensions and positions based on `window.innerWidth` and `window.innerHeight`.

Jul 8, 2024

Loading thumbnail…

Fork of Hello HTML

A React-based SVG drawing renders a simple yellow circle with a black outline, containing two smaller black circles positioned symmetrically on either side of its upper half. The page loads React 18.3.1 from a UMD bundle and initializes a React import, though the visualization itself is static and does not use React components for rendering. The SVG markup directly defines the shapes with fixed coordinates and styling. The example serves as a minimal test of HTML integration with React and SVG.

Jul 8, 2024

Loading thumbnail…

Fork of Hello HTML

A minimal HTML page that renders an empty document with the title "Hello HTML." The example demonstrates the foundational structure of an HTML file using standard markup elements such as the `<!DOCTYPE html>` declaration, `<html>`, `<head>`, `<title>`, and `<body>` tags. It serves as a starting point for web development, with no additional libraries or JavaScript APIs, and includes an embedded YouTube video for instructional context. The code is intentionally bare, highlighting the essential skeleton every web page requires.

Jul 8, 2024