K

kragovic

@kragovic·38 public vizzes

Loading thumbnail…

Fork of Ways of giving - new menu

This dashboard shows charitable giving in Serbia, breaking down total donations into those specifically for COVID-19 relief versus other causes, with each bar segment showing the relative share of the total. A menu lets the user switch between these three aggregate views. The visualization is built with React and D3 v6, using `scaleBand` and `scaleLinear` for the axes, and SVG masks and patterns to create striped overlays on the donation segments for clarity. Data is loaded as CSV and rendered as a horizontal bar chart.

Loading thumbnail…

Simpler JI Bar with Table

This interactive bar chart visualizes how philanthropic donations are distributed across various causes, with a toggleable menu to switch between total actions, COVID-19-specific, and other purposes. The horizontal bars are segmented into two stacked rectangles, showing the proportion of each category, with a striped pattern overlay and hover tooltips revealing exact percentages. A supplementary HTML table below the SVG reorganizes the same data into intervals (e.g., '0-1 %', '5-10 %') for non-key themes, using React state to update both visualizations dynamically. The chart is built with React and D3 v6, utilizing `scaleBand` and `scaleLinear` for axes, and reads data from a CSV file via `d3.csv`.

Loading thumbnail…

Refactored key themes pie chart

A pie chart displays the proportion of Serbian citizens prioritizing five key themes: support for marginalized groups, poverty reduction, COVID-19, healthcare, and education. The chart uses a D3 pie generator and arc shape, colored via a D3 ordinal scale with varying orange and teal opacity. A React legend lists each theme with its percentage, while a separate HTML table, populated through D3 grouping and custom data reshaping, summarizes all non-key themes by their proportion intervals (e.g., 0-1%, 1-3%). Data comes from a CSV file loaded with d3.csv.

Loading thumbnail…

Key themes - pie chart

This example visualizes survey responses on key themes important to Serbian citizens, combining a donut pie chart with a color-coded legend and a supplementary data table. The pie chart aggregates responses for predefined themes like COVID-19, healthcare, and education, while grouping all remaining themes into an "Ostalo" (Other) category. Built with React and D3 v6, it uses `d3.pie()` and `d3.arc()` to generate the SVG slices, `d3.scaleOrdinal` for the color scale, and `d3.csv()` to load the dataset.

Loading thumbnail…

Refactored Area Chart (don activity)

This area chart displays monthly blood donation activity, comparing total donations against the portion attributed to COVID-19. The visualization includes a legend that uses a striped pattern to distinguish the COVID-19 subset. Users can toggle between three menu options—total, COVID-19, and other purposes—to switch which data series the chart highlights, with values labeled directly above the area path. Built with React and D3 v6, the chart uses `scaleTime` and `scaleLinear` for axes, `area` generators for the filled regions, and `csv` to load data from a gist.

Loading thumbnail…

Polished Area Chart (don activity)

This interactive area chart displays monthly Croatian Red Cross donation activity, aggregating total donations and isolating COVID-19 contributions. Users switch between viewing total, COVID-19, or other purpose categories via a custom menu. The visualization uses React with D3’s `scaleTime` and `scaleLinear` to render SVG areas, with a stripe-pattern mask distinguishing the COVID-19 subset. Data comes from a CSV file loaded via D3’s `csv` and `useData` hook, with axes built through reusable components.

Loading thumbnail…

Info box

Four rounded black rectangles arranged in a two-by-two grid display donation statistics. Each pair of boxes shows a large white number and a smaller gray label, such as estimated donated sum, recorded donated sum, recorded actions, and average donation per individual. The React components render SVG elements directly, using JSX to define rectangles and text with configurable widths and vertical offsets. Boxes are differentiated by fill colors applied through CSS classes, with values hardcoded as strings.

Loading thumbnail…

Donations Effects - fixed rect height TEST

This stacked bar chart visualizes how donation amounts are split between COVID-19 and other purposes across different giving categories. Users can toggle between total donations, COVID-only, and other-purpose views via an interactive menu. The visualization uses React with D3 v6, employing `scaleBand` for the y-axis and `scaleLinear` for the x-axis, rendering SVG rectangles with fixed heights. A striped pattern masks the first segment to distinguish it visually, while tooltips show percentage values. Data comes from an external CSV file about giving methods.

Loading thumbnail…

Donations Effects - fixed rect height

This visualization displays donation campaign data across categories, showing the proportion of total actions, COVID-19-related contributions, and other purposes as horizontal stacked bars with fixed rectangle heights. Interactive menu labels allow switching between aggregate totals, COVID-only, and other-purpose views. The bars use SVG patterns and masks to distinguish segments, with tooltips via `<title>` elements. Built with React and D3 v6, it employs `scaleBand` for the y-axis, `scaleLinear` for the x-axis, and `csv` for loading external data.

Loading thumbnail…

Donations Effects

This visualization uses grouped horizontal bar charts to show the effects of donations in Croatia, comparing the percentage of actions, known donated sums, and the share for COVID-19 causes. The bars are rendered with SVG rectangles, using a stripe pattern to differentiate COVID-19 from other purposes. Data is loaded from a CSV file with D3 v6 and rendered through React. An interactive menu lets users switch between total, COVID-only, and other-purpose views, updating the chart and legend dynamically with `scaleBand` and `scaleLinear`.

Loading thumbnail…

Ways of giving

This interactive visualization from the v3 gallery compares the total number of giving actions and amounts, further segmented by purpose (COVID-19 vs. other causes). The chart uses a bar layout with striped markings to distinguish the COVID-19 portion from the rest, and the left axis labels each category. Users can click on a menu to switch the primary quantitative attribute between total actions, COVID-only actions, and other-purpose actions, updating the bar lengths and legend accordingly. The visualization is built with React and D3 v6, using SVG rendering and the `d3.csv` loader to fetch data from a remote source.

Loading thumbnail…

Type of donation

An interactive bar chart displays the type of donations in Croatia, comparing total actions, COVID-19 related donations, and other purposes. The visualization uses a horizontal stacked bar layout with proportional segments, allowing users to toggle between three menu options that filter the displayed data. Built with React and D3 v6, the chart utilizes `scaleBand` and `scaleLinear` for positioning, with SVG rendering for all graphical elements. Custom color legends and striped patterns differentiate donation categories, while tooltips reveal exact percentage values on hover.

Loading thumbnail…

Donor type

A horizontal diverging bar chart displays donor contributions divided into total actions and amounts, further segmented by COVID-19 and other purposes. Users toggle between these three aggregate views via an interactive menu. The chart uses React with D3 v6, rendering SVG via `scaleBand` and `scaleLinear`. Data loaded from a CSV file is processed in `useData`, with `Marks` drawing proportional rectangles and `ColorLegend` providing dynamic labels.

Loading thumbnail…

Simpler J.I. Bar chart

This interactive bar chart visualizes donor data in Croatia, showing the percentage of donation actions and amounts by donor type, with a toggleable breakdown for COVID-19 versus other purposes. Built with React and D3 v6, it renders SVG marks using `scaleBand` and `scaleLinear`, with interactive menu buttons that switch between total, COVID-19, and other categories. The chart uses striped overlays via SVG `<pattern>` and `<mask>` to distinguish overlapping data, with tooltips on mouse hover. Data comes from a CSV file loaded with `d3.csv`, and the legend updates dynamically based on the selected category.

Loading thumbnail…

Reusable J.I. Bar chart (with menu)

This interactive bar chart compares charitable actions and donation amounts across categories, with a menu to switch between total, COVID-19, and other purpose views. Each category displays stacked bars showing the percentage breakdown of actions or amounts, with a legend clarifying the color coding. Built with React and D3 v6, the visualization uses `scaleBand` and `scaleLinear` for axes, SVG patterns for hatched fills, and interactive menu elements that trigger state updates via `useState`. Data is loaded from a CSV file using D3's `csv` parser.

Loading thumbnail…

Fork of Reusable J.I. Bar chart (with menu) - TEST2

A stacked horizontal bar chart visualizes donation activities and amounts across categories, allowing interactive switching between total, COVID-19, and other-purpose views via a menu. The chart presents paired bars for actions and monetary sums, with color-coded segments for COVID-19 and other causes. It uses React with D3.v6 functions like scaleBand and scaleLinear for axes and scales, rendering SVG elements. Data is loaded from a CSV file, and user clicks trigger state updates to change displayed attributes and zoom scales.

Loading thumbnail…

Fork of J.I. Bar chart (with menu)

The visualization presents donor contributions to Croatian COVID-19 relief efforts, comparing donated amounts and action counts across donor types. It renders grouped horizontal bars in SVG, with each donor type shown as paired rows for actions and monetary sums. An interactive menu switches between total, COVID-only, and other-purpose views, updating the displayed bars via React state. The chart uses D3 scales (`scaleBand`, `scaleLinear`), custom axis components, and pattern masks to visually differentiate data segments, with data loaded from a CSV file.

Loading thumbnail…

Interactive Colors Legend

This interactive scatterplot displays the Iris flower dataset, letting users explore relationships between sepal and petal measurements across three species. Users select X and Y axis attributes via dropdown menus, while a color legend on the right encodes species with interactive hover highlighting. The visualization uses React with d3-scale for linear and ordinal scaling, d3.csv for data loading, and SVG rendering. Hovering over a legend entry fades non-matching points and highlights the selected species, providing focused comparison within the dataset.

Loading thumbnail…

Actions per month part 2

This visualization shows the total number of blood donations registered in Serbia across 2020, broken down by month and split into Covid-related and non-Covid categories. The stacked area chart renders interactive SVG paths using React components, with data loaded via d3.csv. The chart uses d3.scaleTime for the x-axis, d3.scaleLinear for the y-axis, and d3.scaleOrdinal for color mapping. A menu system updates the visible data, though the current code only displays the "Total" dataset.

Loading thumbnail…

Scatter plot with Colors Legend

This interactive scatter plot visualizes the Iris dataset, displaying sepal and petal measurements along the x- and y-axes while using color to distinguish species. Users can select which attributes to plot from dropdown menus. The visualization uses React with D3’s `scaleLinear` for axes, `scaleOrdinal` for color encoding, and renders SVG circles with tooltips. A color legend maps species to distinct colors, with axis labels and tick marks generated by custom React components.

Loading thumbnail…

Scatter plot with Colors

This interactive scatter plot visualizes the Iris flower dataset, letting users explore relationships between sepal and petal measurements. The visualization uses React dropdown menus to dynamically switch which numerical attributes are plotted on the x and y axes. Each of the 150 flowers is rendered as a colored circle, with species mapped to a categorical color scale (`d3.scaleOrdinal`) using orange, teal, and purple. The chart is built with React and D3 v6, using SVG circles for marks and custom axis components that employ `d3.scaleLinear` for positioning.

Loading thumbnail…

Polished Scatter plot with Menus

This interactive scatter plot displays the Iris flower dataset, allowing users to explore relationships between sepal and petal measurements through dropdown menus that select which attributes appear on the x and y axes. The visualization is built with React and D3 v6, using d3.scaleLinear for continuous axes and SVG circles rendered via the Marks component. The interface includes two ReactDropdown menus that update state to re-scale the plot, with axis labels dynamically reflecting the selected attributes. Data is loaded asynchronously from a CSV using d3.csv and parsed into numeric values.

Loading thumbnail…

Scatter plot with Menus

This interactive scatter plot of Fisher’s Iris dataset lets users select which numeric attributes (sepal length, sepal width, petal length, petal width, or species) to map to the x- and y-axes via two dropdown menus. The React app uses d3.scaleLinear scales, d3.extent for domains, and d3.csv to load the data, rendering SVG circles with tooltips. Axis components map ticks to lines and text, while the dropdown options trigger state updates via useState.

Loading thumbnail…

React starter

This example demonstrates a React-based dropdown menu for selecting a pet from a predefined list of six options. The interface displays a label and a styled select element, with the current choice (hamster) preset and logged to the console. The code uses React hooks (`useState`) for state management and a reusable `Dropdown` component that maps over option objects. ReactDOM renders the `App` component into the root element, with styles defined in the HTML file. The dropdown’s selected value updates dynamically through an event handler.

Loading thumbnail…

Working with Time

This example visualizes the temperature of a week in San Francisco over time, using a line chart to show the trend. The visualization is built with React and D3 v6, rendering to SVG. It loads CSV data from a URL, maps the timestamp and temperature fields, and uses `scaleTime` and `scaleLinear` for the axes. The smooth curve is created with `curveNatural` from the `line` API, with axis labels and tick marks styled via CSS.

Loading thumbnail…

Stylized Scatter plot

This stylized scatter plot visualizes the Iris dataset, plotting petal length against sepal width. The visualization uses React with D3.js (d3.v6) to render SVG circles, with axes generated via custom AxisBottom and AxisLeft components. A title tooltip appears on each circle showing the formatted petal length value. The styling uses the Poppins font and a teal color for data points, with axis labels positioned around the plot margins.

Loading thumbnail…

Stylized Refactored Bar chart

This stylized bar chart visualizes the top ten countries by population, using horizontal bars where length encodes the population value. Built with React and rendered as SVG, it fetches UN Population 2019 data via the `d3.csv` utility, and uses React state to load and store the dataset. The chart’s axes are generated with `d3.scaleLinear` and `d3.scaleBand`, while custom React components (`AxisBottom`, `AxisLeft`, and `Marks`) draw the ticks and rectangles. A hover tooltip, formatted with `d3.format`, displays the population value in billions, and the chart’s styling uses the Poppins font and a teal color scheme.

Loading thumbnail…

Vertical Bar chart

A vertical bar chart displays the top five countries by total Olympic gold medals from 1896 to 2018, sourced from Wikipedia via a CSV file. Using React and D3 v6, the visualization renders SVG rectangles with scales from `scaleBand` and `scaleLinear`. Custom axis components generate tick labels and grid lines, while the data is loaded asynchronously and sorted in `useData`.

Loading thumbnail…

Refactored Bar chart

This example shows a horizontal bar chart of the top 10 countries by population, using data loaded from a publicly hosted CSV of the 2019 UN population estimates. The chart renders population values on the x-axis and country names on the y-axis using SVG. The code builds the visualization with React components for the axes and marks, while D3’s `csv`, `scaleBand`, `scaleLinear`, and `max` utilities handle data loading and coordinate mapping. React state manages the asynchronous data fetch, and the axes are drawn as reusable function components.

Loading thumbnail…

Axis wit React and D3

This example displays a horizontal bar chart of the top 10 countries by 2020 population, using React state to manage data loaded asynchronously with `d3.csv`. The visualization manually constructs axes with `d3.scaleLinear` and `d3.scaleBand`, rendering tick marks, labels, and bars as SVG elements. It leverages React hooks (`useState`, `useEffect`, `useCallback`) to trigger the data fetch and update the chart, while D3 utilities handle scaling and data parsing.

Loading thumbnail…

The margin convention

This example demonstrates the margin convention for D3 bar charts by displaying the top 10 countries by 2020 population from a UN dataset. The React component loads CSV data via d3.csv, then uses d3.scaleLinear and d3.scaleBand to map population values to bar widths and country names to vertical positions. An SVG group element translates the chart area by the specified margins, while React state and useEffect manage the asynchronous data loading and re-rendering. The chart shows horizontal bars within a fixed 960×500 viewport, with calculated inner dimensions accounting for the margin object.

Loading thumbnail…

Fork of Rendering data with React

This visualization displays the populations of ten countries in a horizontal bar chart using SVG rectangles rendered by React. The chart loads UN Population data for 2019 from a CSV file using D3’s `csv` utility, then uses React’s `useState` and `useEffect` hooks to fetch and store the top ten rows. The bar widths are scaled with D3’s `scaleLinear`, while the vertical positions use `scaleBand` on country names. The rendering maps over the data with React’s `map` function to create each `<rect>` element.

Loading thumbnail…

Rendering data with React

This example displays a vertical stack of colored horizontal bars, one for each named CSS color, loaded from a CSV file. Using React with hooks like `useState` and `useEffect`, the app asynchronously fetches the data via `d3.csv` and renders each row as a div with a background color set from the `RGB hex value` column. While the data is loading, a “Loading...” message appears, and the final visualization fills the viewport with sequential color swatches.

Loading thumbnail…

Loading data with React and D3

This example demonstrates how to load data with React and D3, displaying a summary of a CSV file containing CSS named colors. The app uses the `useState` and `useEffect` hooks to manage data loading, while `d3.csv` fetches the data from a GitHub gist URL. Once loaded, the data is passed through a custom `message` function that calculates the file size, row count, and column count using `d3.csvFormat`, `d3.data.columns`, and `data.length`. The result is rendered inside a `<pre>` element, with a "Loading..." placeholder shown before the data arrives.

Loading thumbnail…

Import data with D3

This visualization demonstrates how to import and summarize a CSV dataset using D3. It loads the CSS named colors dataset from a GitHub gist via `d3.csv`, then displays the file size in kilobytes, row count, and column count in a large text format. The page uses D3 v6 and plain HTML, with the results rendered into a `<pre>` element. The example highlights the promise-based data loading pattern and formatting utilities like `d3.csvFormat`.

Loading thumbnail…

Fork of Mouse Follower

A dark blue vertical rectangle follows the mouse cursor’s vertical position within an SVG canvas, using React’s `useState` and `useCallback` to update its `y` coordinate. The code renders a single `<rect>` element via ReactDOM, with `onMouseMove` handling pointer events. It uses static `width` and `height` constants (960×500) and fixed rectangle dimensions (30×100), with no external data—only the live mouse position.

Loading thumbnail…

Mouse Follower

A yellow smiley face rendered as an SVG circle follows the mouse cursor across a full-screen viewport. Built with React, the component tracks pointer coordinates via the `onMouseMove` event and updates the circle's `cx` and `cy` attributes using the `useState` hook. The rendering relies on ReactDOM and SVG elements, with a production build of React 16.9.0. The visualization demonstrates a simple, reactive data binding between user input and graphical output, with no external data source.

Loading thumbnail…

Smiley Face Part 1

A grid of randomly generated smiley faces renders in React, with each face using D3's `arc` generator to draw a smiling mouth. The faces vary in eye radius, eye offset, and mouth dimensions via `Math.random()`. D3's `range` creates 18 face instances, all positioned with SVG `<g>` transforms. The visualization demonstrates composable React components for face features, rendered as SVG circles and paths within a `FaceContainer`.