noriktal

@noriktal·3 public vizzes

Fork of Scatter Plot with Menus

This interactive scatter plot visualizes the Iris Dataset, allowing users to explore relationships between sepal and petal measurements. Two dropdown menus, built with React state management, control which attributes appear on the x- and y-axes, while the SVG rendering updates dynamically through React re-renders. The visualization uses D3 v5’s `scaleLinear` and `extent` functions to compute scales and domains, with custom React components for axis rendering and circular marks. Hovering over a point reveals its exact value via a native SVG `<title>` tooltip, and all data loading is handled asynchronously using `csv` from D3.

Sep 30, 2021

Loading thumbnail…

Smaller map test

This SVG map displays the geographic boundaries of Israel, rendering the country's shape as a detailed path filled with a light gray against a darker gray backdrop. The visualization is built with React and uses D3 v5's `geoAlbers`, `geoPath`, and `geoGraticule` APIs to project and draw map features from the World Atlas TopoJSON dataset. Despite the title referencing a smaller map, the code primarily outputs the static IsraelSVG element, with additional map layers for land, interiors, and graticules defined in the Marks component.

Sep 27, 2021

Loading thumbnail…

Fork of Hello HTML

This fork of the Hello HTML example demonstrates a minimal SVG rendering setup within a basic HTML page. The code draws a single black circle onto an SVG canvas using inline SVG markup, with the circle positioned at 100px on the x-axis and 200px on the y-axis, and a radius of 50px. It uses no external libraries or JavaScript APIs, relying solely on the native SVG `<circle>` element and HTML structure. The example serves as a starting point for integrating interactive data visualizations into simple web documents.

Sep 23, 2021