Ashutosh5333

@Ashutosh5333·5 public vizzes

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render a scatterplot of automobile data from a CSV file, plotting engine displacement against horsepower with tooltips showing car names. The visualization relies on `vl.markPoint`, `vl.x().fieldQ()`, and `vl.y().fieldQ()` to encode quantitative fields, while the `config.js` file customizes axis and label styling for readability. Data is loaded asynchronously via `d3.csv`, and the chart is embedded using Vega, Vega-Lite, and Vega-Tooltip, with the output fitted to the full viewport.

Mar 3, 2023

Loading thumbnail…

Fork of Making a Bar Chart

This horizontal bar chart displays the top 10 most populous countries based on 2018 United Nations World Population Prospects data. The chart encodes population values as bar widths using D3's `scaleLinear`, with country names positioned along a `scaleBand` y-axis. The visualization is rendered as an SVG, with axes generated via `axisBottom` and `axisLeft`, and tick labels formatted using D3's `format` function. Bars are styled with a steelblue fill, and the chart includes a title and axis label.

Mar 3, 2023

Loading thumbnail…

Fork of Pathetic Bar Chart

A pathetic bar chart displays the top 10 most populous countries using horizontal bars without axes or labels. Implemented in React with SVG rendering, it maps each country's 2020 population to bar width via d3.scaleLinear and d3.max, while d3.scaleBand positions rows vertically. Data comes from the United Nations World Population Prospects 2019, loaded via d3.csv. The chart intentionally omits axis ticks, gridlines, and text, emphasizing raw bar lengths for a minimalist, data-only comparison.

Mar 2, 2023

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization presents the Auto MPG dataset from the UCI Machine Learning Repository, plotting miles per gallon against horsepower. Each car is represented as a circle, with color indicating the country of origin, size mapped to vehicle weight, and tooltips revealing the car name. The chart is built using the Vega-Lite API, which translates a declarative specification into a rendered SVG. The code leverages `vl.markCircle` and the encode functions to bind data fields to visual channels. The underlying Vega and Vega-Lite libraries, along with the `vega-tooltip` handler for interactive hover details, render the final output.

Mar 2, 2023

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a simple smiley face drawn in SVG, with two black circles for eyes and a large yellow circle for the head, all set against a blank page. The HTML page uses inline CSS to remove margins and hide overflow. The visualization is rendered using the SVG circle element with coordinates and radius attributes, while the text "hello" appears above the graphic. The code relies on vanilla JavaScript and HTML, with no external libraries or data sources.

Mar 1, 2023