Lento Manickathan

@lento234·7 public vizzes

World Map

This world map visualization uses a Natural Earth projection to display global landmasses and country boundaries, rendered as an SVG with D3's geoPath and geoNaturalEarth1 functions. The map features a light gray sphere background with teal land masses, thin gray country borders, and white graticule lines showing latitude and longitude. Data comes from the world-atlas TopoJSON dataset, processed through the topojson library's feature and mesh functions to extract land polygons and country interiors, while the React application manages state and renders the interactive visualization.

Dec 29, 2021

Loading thumbnail…

Iris dataset

This scatterplot displays the Iris dataset, plotting sepal length on the x-axis and sepal width on the y-axis for each flower sample. The visualization is built with React and D3 v7, using d3.scaleLinear to map data ranges to pixel coordinates within an SVG canvas. Circle marks are generated from the dataset loaded via d3.csv, with axis components rendered as SVG groups containing tick lines and labels. The code includes tooltips via SVG `<title>` elements, though the example page also references an unrelated HTML page and video.

Dec 29, 2021

Loading thumbnail…

Loading data with D3

This example demonstrates asynchronous data loading and rendering with D3 v7 in a React application. It fetches a CSV file of CSS named colors from a GitHub gist, then visualizes the data as a pie chart where each slice represents one color, with the slice fill matching the color’s RGB hex value. The code uses the `d3.csv` function to load the remote data, `d3.pie` to compute the pie layout, and `d3.arc` to generate the SVG path geometry. Before the data arrives, the interface displays a simple "Loading..." message.

Dec 29, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This example displays a bubble chart comparing religious affiliations across countries, using circle size to encode population and axes for country and religion. Built with the Vega-Lite API, it registers Vega and Vega-Lite libraries with D3’s CSV loader to fetch data from a GitHub gist. The visualization automatically fills the browser viewport, applies custom axis styling from a config object, and includes a Vega-Tooltip handler for interactive population details on hover.

Dec 28, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates the process of loading and parsing a CSV file with D3.js, displaying a summary of the dataset in a large red text block. The visualization shows the number of rows, columns, and file size in kilobytes of the CSS named colors dataset fetched from a GitHub gist. The code uses d3.csv() to asynchronously load and parse the data, then d3.csvFormat() to calculate the file size. An alternative commented-out approach using fetch() and d3.csvParse() is also provided.

Dec 28, 2021

Loading thumbnail…

Mouse move

A single gray circle tracks the mouse cursor as it moves across a blank white SVG canvas. The circle’s center directly follows the pointer position, which is captured and stored in React state on every mouse-move event. This example uses React’s `useState` and `useCallback` hooks, along with `d3.v7` for SVG rendering, to update the circle’s `cx` and `cy` attributes in real time. No data source is involved; the visualization simply demonstrates interactive pointer tracking within a fixed 960×500 viewport.

Dec 28, 2021

Loading thumbnail…

Smiley face: Part I

A grid of fifteen small smiley faces, each generated with randomized facial features, fills the view. The faces are drawn with SVG circles and an arc-based mouth. The code uses React components to assemble each face, while the `d3.arc` API constructs the mouth path. The `range` function from d3 generates the array for the face count, and random values vary eye offsets, radii, and mouth dimensions for each face.

Dec 28, 2021