Tomasz Stefaniuk

@tomaszstefaniuk·5 public vizzes

Fork of Stylized Line Chart

A fork of a stylized line chart visualizes weekly temperature trends in San Francisco using data from the Data Canvas Sense Your City dataset. The chart renders an SVG with React, using D3 v5 scales and the `line` generator with `curveNatural` to create a smooth path. Axes are drawn with custom React components, while a hidden set of circles includes tooltips via SVG `<title>` elements. The visualization applies a Poppins font and muted color styling.

Jan 16, 2023

Loading thumbnail…

Fork of Coronavirus Deaths Over Time by Country

A time-series line chart displays cumulative COVID-19 deaths over time for multiple countries, using a logarithmic y-axis to accommodate wide numeric ranges. Each country’s path is rendered with a randomly generated RGB stroke color, creating a multicolored comparison across time. The visualization is built with React and D3 v5, using `scaleTime`, `scaleLog`, and the `line` generator to plot data from the Johns Hopkins Coronavirus Dataset. SVG rendering handles the axes, with D3’s `axisBottom` and `axisLeft` providing grid lines and tick formatting.

Jan 16, 2023

Loading thumbnail…

Fork of Scatter Plot with Color

This scatter plot visualizes the Iris Dataset, showing petal length against sepal width with each of the three iris species encoded by color. The visualization uses React to render SVG elements, leveraging D3 v5 scales including `scaleLinear` for positioning and `scaleOrdinal` for categorical color mapping. Custom React components generate the axes and circular marks, with the data loaded asynchronously via D3’s `csv` function from a GitHub-hosted CSV file.

Jan 3, 2023

Loading thumbnail…

Fork of Stylized Bar Chart

This chart displays the top 10 most populous countries using horizontal bars, with a clean SVG layout and a Poppins font. The data is sourced from the United Nations World Population Prospects 2019 via a CSV file, loaded with `d3.csv`. The visualization uses `d3.scaleBand` for the y-axis categories, `d3.scaleLinear` for the population values, and a custom `format` function to display axis ticks in billions. React components structure the SVG marks, with each bar providing a tooltip on hover.

Jan 2, 2023

Loading thumbnail…

Fork of Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, displaying sepal and petal measurements as circles with x and y axes. Two dropdown menus allow users to select which quantitative attribute is plotted on each axis, with axis labels updating accordingly. The visualization is built with React and D3 v5, using `d3.csv` for data loading and `d3.scaleLinear` for positioning. SVG circles render the points, with tooltips showing numeric values and axes generated by custom React components.

Jan 2, 2023