Paweł Oleniak

@PawelOleniak·4 public vizzes

Fork of Stylized Scatter Plot

This fork of the Iris Dataset scatter plot visualizes petal length against sepal width, with each flower represented as a teal circle. The SVG visualization uses React components and d3.scaleLinear to map data points, while d3.extent and d3.max determine the domain. Axis labels and ticks are rendered via custom React components, and CSS styling applies the Poppins font. Data loads asynchronously through d3.csv from a GitHub gist, with numeric fields parsed for the scatter plot.

Nov 15, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This example demonstrates a scatter plot of automobile data from the UCI Auto MPG dataset, where each point represents a car, with horsepower on both axes, color encoding region of origin, and size encoding vehicle weight. Hovering reveals the car name via tooltips. The visualization is built using the Vega-Lite API and rendered with D3.js, incorporating custom axis styling and a dark color scheme from the configuration file. Data is loaded asynchronously via D3’s CSV parser, and the chart is displayed across the full window with automatic resizing.

Nov 13, 2021

Loading thumbnail…

Fork of Polished World Map

This example shows a polished world map with landmasses, country borders, and graticules rendered using a natural Earth projection. The visualization loads geographic data from the World Atlas TopoJSON dataset, converting it with `topojson.feature` and `topojson.mesh` for display. It uses React as the framework, with D3 v5 functions like `geoNaturalEarth1`, `geoPath`, and `geoGraticule` to draw the sphere, graticule grid, land features, and interior borders as SVG paths. The teal and gray color scheme applies visual styling to the map elements.

Nov 3, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This example shows a scatterplot of automobile data, plotting horsepower against model year, with points colored by vehicle weight and labeled interactively via tooltips. The visualization is constructed declaratively using the Vega-Lite API (vl) and rendered with Vega, while D3 is used to load the CSV dataset from a GitHub gist. The code applies custom configuration for axis styling and tooltip appearance, then dynamically sizes the chart to the full window. It demonstrates integrating Vega-Lite’s high-level grammar with D3’s data fetching capabilities.

Oct 31, 2021