teodoraganea

@teodoraganea·3 public vizzes

This is a heatmap

This heatmap overlays eye-tracking fixation points on a static map of Antwerp’s metro system, with each point’s position derived from `MappedFixationPointX` and `MappedFixationPointY` coordinates in `data.csv`. Using React and D3’s `scaleLinear` for coordinate mapping, the visualization renders an SVG containing the fixation data. The background image is applied via CSS, while the SVG is sized at 960×500 pixels. The code loads CSV data asynchronously with `d3.csv`, converting numeric fields before passing them to the render function, though no explicit heatmap aggregation or density calculation is visible in the provided source.

May 13, 2020

Loading thumbnail…

HTML Starter

This example displays the text “Hello HTML” centered on a blank page at an extremely large font size. The visualization demonstrates the simplest possible web-based output using only static HTML and CSS, with no external libraries or JavaScript. All styling, including the 13em font size and text alignment, is defined within the page’s `<style>` block, rendering the message as the sole visual element.

May 13, 2020

Loading thumbnail…

Untitled

This example visualizes eye-tracking data as a multi-line chart, plotting fixation index on the x-axis and mapped fixation point Y on the y-axis. The size of each point reflects fixation duration, with gray-scale squares or colored circles representing the data. Built with React and D3, it renders an SVG with axes, steel-blue paths for each series, and a hover interaction. The data comes from a structured timeline, and the code uses D3’s selection, join, and axis components to generate the visualization.

May 13, 2020