pakoensi

@pakoensi·4 public vizzes

Fork of D3 Scatter Plot

This example visualizes the Iris Dataset using a D3 scatter plot, mapping petal length on the x-axis and sepal length on the y-axis. It uses d3.csv to load the data, d3.scaleLinear and d3.extent to compute scales, and d3.axisLeft and d3.axisBottom to render axes. The SVG circles are positioned using the d3.select and join API, with a radius of 5 pixels. The plot fills the entire browser window by setting the SVG dimensions to window.innerWidth and window.innerHeight.

Jul 18, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This example presents an interactive scatter plot of the Auto MPG dataset from the UCI Machine Learning Repository, showing vehicle fuel efficiency against horsepower. Each point encodes the car’s country of origin by color and its weight by size, with tooltips revealing the model name. The visualization is built using the Vega-Lite API, registered with Vega and Vega-Lite libraries, and renders as an SVG. Data is loaded asynchronously via d3.csv, while the Vega Tooltip handler enables interactive inspection of individual data points.

Jul 13, 2021

Loading thumbnail…

Fork of Fork of Stylized Scatter Plot

This visualization is a scatter plot of the Iris dataset, showing petal length on the x-axis against sepal width on the y-axis. Each point is a semi-transparent teal circle with a hover tooltip displaying its exact x-value. The plot uses a clean, minimal design with labeled axes styled with the Poppins font. Built with React and rendered as SVG, the code uses D3 v5 functions like `scaleLinear`, `extent`, and `format` to scale the data and generate axis ticks. The data is loaded asynchronously from a CSV file using D3's `csv` method, and the axes and marks are constructed via custom React components (`AxisBottom`, `AxisLeft`, `Marks`).

Jul 13, 2021

Loading thumbnail…

Fork of Stylized Scatter Plot

This interactive scatter plot visualizes the classic Iris dataset, plotting petal length against sepal width for individual flowers. Built with React and D3 v5, the visualization uses `scaleLinear` for both axes and renders SVG circles as marks, with tooltips showing exact values. The code imports data via `d3.csv` from a GitHub gist, while custom React components handle axis rendering and mark placement. A Poppins font and teal color scheme give the plot its stylized appearance, with loading state shown until data arrives.

Jul 13, 2021