Roma

@khajiev13·7 public vizzes

Fork of Migrant Deaths Linked Views with Fast Brushing

This is a linked-view visualization of migrant deaths and disappearances, showing a world map with circles scaled by the total dead and missing, alongside a time-brushed histogram. The map uses a natural Earth projection with graticules and country boundaries from the World Atlas TopoJSON. Data comes from the Missing Migrants Global 2019 subset, parsed via `d3.csv`. The histograms use `d3.scaleTime` and `d3.histogram` to bin monthly totals, while `d3.brushX` filters the map by date. React's `useMemo` and `useRef` optimize rendering performance.

Oct 28, 2021

Loading thumbnail…

Religions of Largest 20 Countries

This stacked bar chart displays the estimated 2010 religion breakdown of the 20 most populous countries, with each bar segmented by religious affiliation. Hovering over a bar reveals tooltips with exact population counts, while hovering over the color legend highlights a single religion across all countries. The visualization uses D3.js version 3.5.5 with `d3.layout.stack` for stacking, `d3.svg.axis` for axes, and the d3-legend and d3-tip libraries. Data originates from Pew Research’s Global Religious Landscape.

Oct 28, 2021

Loading thumbnail…

Vega-Lite API Template

This example demonstrates a Vega-Lite API template that displays a bar chart comparing Facebook usage and internet penetration across countries. The visualization encodes the Facebook date on the x-axis, internet users on the y-axis, and internet penetration as color, with tooltips showing country names. The code uses the vega-lite-api library with Vega, Vega-Lite, and d3.csv for data loading. Custom configuration enhances readability with larger font sizes and a dark color scheme, while the chart automatically fits the browser window dimensions.

Oct 22, 2021

Loading thumbnail…

Loading Data with React & D3

This example demonstrates how to load and summarize a CSV dataset using React and D3. It fetches a list of CSS named colors from a GitHub gist and uses React’s `useState` and `useEffect` hooks to manage the asynchronous data loading. The `d3.csv` method parses the remote file, and the resulting data is passed to a custom `message` function that calculates and displays the total row count, column count, and file size in kilobytes. The interface renders this summary as plain text inside a `<pre>` element, initially showing a “loading” state until the data arrives.

Oct 21, 2021

Loading thumbnail…

SVG Face part （HTML)

A grid of 18 simple SVG faces, each with randomized eye placement, eye size, and mouth dimensions, demonstrates the flexibility of React components for generating data-driven graphics. The `Face` component composes `BackgroundCircle`, `Eyes`, and `Mouth` elements inside a `FaceContainer` that handles the SVG coordinate transform. D3's `arc` function generates the mouth path, while `range` from d3 creates the array of faces. Each face is rendered through ReactDOM with unique random properties, showcasing reusable SVG primitives within a React framework.

Oct 21, 2021

Loading thumbnail…

Loading and Parsing CSV data

This example demonstrates how to load and parse CSV data using D3 v7, displaying dataset statistics including row count, column count, and file size in kilobytes. The code uses `d3.csv()` to fetch and parse the remote CSV file from a GitHub gist containing CSS named colors, then computes the metrics using `data.length`, `data.columns`, and `d3.csvFormat()`. The results appear in a large monospace `<pre>` element. A commented-out alternative shows the same workflow using the Fetch API with `async/await` and `d3.csvParse()`.

Oct 20, 2021

Loading thumbnail…

Mouse event

A React and SVG visualization demonstrates mouse tracking by rendering a single circle that follows the cursor. The circle's position updates dynamically via React's `useState` hook, which stores the mouse coordinates from the `onMouseMove` event handler. The initial position is set to the center of a 960x500 SVG canvas, and the circle has a radius of 30 pixels. The code uses ReactDOM to render the component to the DOM, with the SVG's width and height explicitly defined.

Oct 19, 2021