Adnan

@md-tasnim-adnan·2 public vizzes

Vega-Lite API Scatter Plot

This scatter plot visualizes the relationship between vehicle weight and horsepower for a dataset of automobiles, with points colored by country of origin. The visualization is built using the Vega-Lite API, which is registered with Vega and Vega-Lite to render SVG graphics. Data is loaded via D3’s `csv` function from a remote Gist, and tooltips are handled by Vega-Tooltip to display car names on hover. The chart’s appearance is customized through a configuration object that styles axis labels and titles.

May 21, 2023

Loading thumbnail…

Rendering Data with React & D3

This example shows a radial burst visualization of CSS named colors, where each color is represented as a slice in a pie chart arranged around a central point. The code loads color data from a CSV file using D3’s `csv` utility and processes it with the `pie` and `arc` generators to compute slice angles and paths. React handles the rendering by mapping over the pie data to create SVG `<path>` elements, with each slice filled using the corresponding RGB hex value from the dataset. The visualization combines D3’s data manipulation with React’s declarative component structure, displaying the full color palette in a circular layout.

May 21, 2023