koubaib ben yedder

@koubaib-ben-yedder·3 public vizzes

Fork of Vega-Lite API Template

This example visualizes the relationship between engine displacement and horsepower for individual car models, using a scatterplot where each point represents a vehicle and hovering reveals its name via tooltips. Built with the Vega-Lite API, it streams data from a CSV file loaded through D3’s `csv` method, renders an SVG chart via Vega’s renderer, and applies a custom dark-themed configuration for axes and labels. The visualization fills the entire window and uses adaptive sizing, with data preprocessing and API registration handled in `index.js`.

Aug 29, 2022

Loading thumbnail…

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to create a scatter plot from the auto-mpg dataset, mapping displacement and horsepower on the x- and y-axes. It configures point marks with transparency and tooltips showing the car name. The code builds the visualization by importing `vega`, `vega-lite`, and `vega-lite-api`, fetches data via `d3.csv` from a GitHub gist, and renders with a custom dark theme. It also integrates `vega-tooltip` for interactive hover information.

Aug 28, 2022

Loading thumbnail…

Fork of Pathetic Bar Chart

This example displays the top 10 most populous countries as a minimalist set of horizontal bars, with no axes or labels, using React to manage state and render SVG rectangles. The code loads United Nations World Population Prospects 2019 data via `d3.csv`, then applies `d3.scaleBand` for the y-axis positioning and `d3.scaleLinear` for the bar widths. It uses `useState` and `useEffect` hooks to asynchronously fetch and slice the data, and `d3.max` to set the x-scale domain.

Aug 27, 2022