Dean Bozic

@DeanDK·9 public vizzes

Responsive Axes

This example demonstrates axes that dynamically update their tick spacing and labels when the browser window is resized. A linear scale maps a domain of zero to ten trillion to the width of the plot area, while a second scale maps zero to one to the height. The visualization uses `d3.axisBottom` and `d3.axisLeft` to generate the ticks, and through a custom `render` function triggered by a `resize` event listener, the SVG and its axes adjust continuously to the new dimensions. The rendering uses `d3.select`, `marginConvention`, and labeled axis modules to manage layout and styling.

Nov 2, 2020

Loading thumbnail…

Covid cases with menu to select country

This interactive visualization shows COVID-19 case data for multiple countries, allowing users to compare trends through a dropdown menu to select a country. The SVG chart displays time-series lines with a color legend identifying each nation, using a linear y-scale for case counts and a time-based x-axis. Built with React and D3 v5, the visualization uses `scaleTime`, `scaleLinear`, and `scaleOrdinal` for scales, while `d3.line` with `curveNatural` renders smoothed paths. Data comes from a CSV file loaded via `d3.csv` from the COVID MAY Dataset.

Oct 30, 2020

Loading thumbnail…

Scatter Plot with Color Legend

A scatter plot of the Iris Dataset displays petal length against sepal width, with points colored by species and a legend identifying each species. Built with React and D3 v5, it uses `scaleLinear` for position, `scaleOrdinal` for color, and renders SVG circles via the `Marks` component. The chart includes custom axes and a color legend, with data loaded asynchronously using `d3.csv` and tooltips provided by SVG `<title>` elements.

Oct 28, 2020

Loading thumbnail…

Working with Time

This scatter plot displays temperature readings over the course of a week, with time on the x-axis and temperature on the y-axis. The chart uses React components for rendering and D3 scales—specifically `scaleTime` and `scaleLinear`—to map the timestamp and temperature values from the Data Canvas Sense Your City dataset. Each data point is drawn as an SVG circle with a tooltip showing the formatted day. The visualization incorporates custom axis components that generate ticks and grid lines.

Oct 28, 2020

Loading thumbnail…

Covid cases with menu to select country

This visualization displays COVID-19 case trends for ten countries using a multi-line chart, with options to filter by metrics like new cases, total cases, and deaths. The code uses React for state management and D3 v5 for scales, axes, and path generation. Data comes from the COVID May Dataset, loaded via D3’s CSV parser. A color legend doubles as a hover filter, dimming non-selected lines, while a dropdown menu allows metric selection. SVG rendering and D3’s curveNatural interpolation produce smooth temporal curves.

Oct 27, 2020

Loading thumbnail…

Refactored & Stylized Bar Chart

A vertical bar chart displays the top 10 most populous countries based on UN Population data for 2020, with the population values encoded by bar length on a linear scale and countries ordered along a categorical band scale. D3’s `scaleLinear` and `scaleBand` position the marks, while `format('.2s')` converts large numbers to readable abbreviations like “B” for billions. Tooltips expose exact values on hover. The React-based implementation separates axes and marks into reusable components, applying SVG rendering with margins and external Poppins font styling.

Oct 26, 2020

Loading thumbnail…

Bar chart #1 draft Rendering Data with React & D3

A draft bar chart displays the 20 largest U.S. cities by estimated 2020 population, with each rectangle’s height scaled linearly from zero to the maximum value. The data, loaded via `d3.csv` from a remote CSV file, is processed in React using the `useState` and `useEffect` hooks. Rendering uses React elements to create SVG `<rect>` shapes, while `d3.scaleBand` positions the bars horizontally and `d3.scaleLinear` maps population counts to pixel heights. The chart is intended as an early iteration, with the visualization gallery showing the integration of React for declarative SVG output alongside D3 utilities for data loading and scaling.

Oct 25, 2020

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the top 10 most populous countries for 2020, ordered along the y-axis with horizontal bars scaled by population counts. The visualization uses React components to render SVG elements, with d3.scaleBand and d3.scaleLinear for positioning, while d3.csv loads United Nations population data. The chart includes styled axes, a "Population" label, and hover tooltips via SVG `<title>` elements.

Oct 25, 2020

Loading thumbnail…

Refactored & Stylized Bar Chart

This bar chart displays the population of ten countries from the UN’s 2019 population dataset, with each bar’s length encoding population values. The visualization uses React components to render D3 scales and axes, including `scaleLinear` for the x-axis and `scaleBand` for the categorical y-axis. Rendered as SVG, the chart applies a custom Poppins font, styled tick marks, and a tooltip via the SVG `<title>` element. The code filters the data to the top ten entries before mapping it to marks.

Oct 20, 2020