MuhammadAaqib137

@MuhammadAaqib137·5 public vizzes

Fork of SANKEY Experiment

A fork of an earlier Sankey experiment, this visualization maps a simplified five-node flow from Sector to Industry to Stock, then splits into Buy and Sell actions. The diagram uses the custom d3.sankey plugin to calculate node positions and link paths, rendered as SVG with D3 v3. The example hand-codes its data in a sankeydata.json file rather than loading it externally. Styling applies crisp node rectangles, bold text labels, and semi-transparent black links that darken on hover to show the proportional flow of values between each stage.

Apr 10, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes trading-day data as a scatterplot, mapping the trading day on the x-axis, trading time on the y-axis, and encoding color by count and circle size by percentage of buy orders, with tooltips showing buy counts. It uses the Vega-Lite API (`vl.markCircle`, `vl.encode`) with D3’s `csv` loader to fetch data from a GitHub-hosted CSV file. The visualization is rendered as SVG via Vega, with custom config for improved readability and a Vega Tooltip handler for interactivity.

Apr 4, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization presents a scatter plot of auto-mpg data, showing the relationship between fuel efficiency and horsepower. Each point represents a car, with its origin encoded by color and weight by size. The tooltip displays the car's name and displacement. The example uses the Vega-Lite API to construct the visualization, which is then rendered by Vega with a custom configuration for improved readability. Data is loaded from a CSV file using d3.csv, and the plot fills the browser window with a responsive layout.

Apr 4, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a scatter plot of auto-mpg data, where each point represents a car, with engine displacement on the x-axis, horsepower on the y-axis, and color encoding the country of origin. The point size is also encoded by the vehicle’s weight, with tooltips revealing the car’s name on hover. The visualization is built using the Vega-Lite API, which constructs a Vega-Lite specification programmatically, and is rendered with Vega’s SVG renderer. Data is loaded asynchronously from the UCI Machine Learning Repository via D3’s `csv` function, and the tooltip interaction is handled through `vega-tooltip`’s `Handler`.

Apr 4, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization renders a scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository. Each circle represents a car, with miles per gallon on the x-axis, horsepower on the y-axis, color encoding the country of origin, and point size reflecting vehicle weight. Tooltips reveal the car names. The code uses the Vega-Lite API (vl) configured with vega, vega-lite, and vega-tooltip, while d3.csv fetches the remote data. Custom axis and label styling is applied through a shared config object before the SVG view renders to fill the window.

Apr 3, 2021