G

Gokulkrishnan1996

@Gokulkrishnan1996·20 public vizzes

Loading thumbnail…

Stylized Line Chart

A stylized line chart displays San Francisco’s weekly temperature fluctuations over time, using a smooth, natural curve that connects daily readings from the Data Canvas Sense Your City dataset. The chart renders as an SVG via React, with axes generated by custom `AxisBottom` and `AxisLeft` components. D3’s `scaleTime`, `scaleLinear`, and `line` with `curveNatural` handle the mapping and path creation. The visualization includes labeled time and temperature axes, with a minimalist Poppins font styling and muted color palette applied through CSS.

Loading thumbnail…

Scatter plot

This scatter plot visualizes the Iris flower dataset, mapping petal length along the x-axis and sepal width along the y-axis. Each circle represents a flower sample, with a tooltip showing its petal length. The visualization uses React to render SVG elements, with D3 v5 providing the `scaleLinear` functions for axes and the `csv` parser for data loading. The data comes from a CSV file of the Iris dataset.

Loading thumbnail…

Add brush - Multiple Views Cleanup

This interactive visualization combines a world bubble map and a time-series histogram to explore global migrant deaths and disappearances. A brush on the histogram filters the map’s circles, revealing only incidents within the selected date range. The map uses a `geoNaturalEarth1` projection with `geoPath` to render land and graticules. The histogram bins data by month using `histogram()` and `timeMonths()`. The implementation leverages React hooks, D3 scales (`scaleSqrt`, `scaleTime`), and an SVG rendering pipeline.

Loading thumbnail…

d3 tree

A radial tree diagram displays a hierarchical dataset of world regions and countries, with nodes positioned by depth and branches extending outward. The visualization uses D3.js v5 to parse the JSON data and render the structure as an SVG, with text labels for each node. The code applies `d3.tree`, `d3.hierarchy`, and `d3.linkHorizontal` for layout, and includes zoom interaction via `d3.zoom` to navigate the tree.

Loading thumbnail…

React Tree plot

This React Tree plot visualizes hierarchical United Nations geographical data, showing world regions like Asia and their sub-regions and countries in a node-link tree diagram. The application loads its data from a local JSON file via React’s useEffect and setState hooks, then renders the structure using ReactDOM. The visualization imports d3.v5 and leverages the React framework alongside standard state management to control the display, resulting in an interactive tree layout that organizes countries into their respective continental and regional groupings.

Loading thumbnail…

Missing Migrants Histogram

This visualization displays the Missing Migrants Dataset as a scatter plot, where each point represents a reported migrant death or disappearance event, plotted by date on the x-axis against the total dead and missing count on the y-axis. A tooltip reveals each point’s date. Built with React and rendered as SVG, the visualization uses D3 v5 functions including `scaleTime`, `scaleLinear`, `extent` for axis scaling, and `csv` for data loading. The code defines reusable axis components with `AxisBottom` and `AxisLeft`, and a `Marks` component mapping data points to circles with a fixed radius of 2 pixels.

Loading thumbnail…

Sized Points on a Map

This example visualizes global cities with populations above 50,000, using a square-root size scale to encode population magnitude as circle radius on an equirectangular projection. The map renders with a light-styled sphere, graticules, and country boundaries, with semi-transparent teal circles overlaid at city coordinates. Built with React, the visualization uses D3's `geoNaturalEarth1` projection, `geoPath` for map geometries, and `geoGraticule` for the grid. Country shapes come from the World Atlas TopoJSON, while city data is loaded via D3's `csv` parser from Simplemaps' public dataset.

Loading thumbnail…

Scatter Plot with Menus

This interactive scatter plot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements through dropdown menus that select the x and y axes. Built with React and D3 v5, the SVG rendering uses `scaleLinear` for axes, with a `Dropdown` component managing the attribute selections. The data is loaded via `d3.csv` from a remote source, with circles colored uniformly and tooltips displaying the x-axis value in a compact format. The code demonstrates coordinated React state management with D3's functional programming style.

Loading thumbnail…

Polished World Map

This example presents a polished world map rendered in SVG, using a Natural Earth projection. It visualizes the boundaries of countries and continents from the World Atlas TopoJSON dataset, with landmasses filled in teal and graticules shown as light gray lines. The code employs React for component structure, while `d3.geoNaturalEarth1` and `d3.geoPath` handle the projection and path generation, and `topojson.feature` and `topojson.mesh` convert the TopoJSON data into GeoJSON for rendering.

Loading thumbnail…

Fork of Working with Time

This example visualizes temperature readings over time from the Data Canvas Sense Your City dataset, rendering a scatter plot with circular marks positioned by a d3.scaleTime x-axis and d3.scaleLinear y-axis. Built with React and rendered as SVG, the plot uses d3.csv to load the data and d3.extent to compute domains. The d3.axisBottom and d3.axisLeft components generate tick marks, while native SVG <title> elements provide hover tooltips formatted with d3.timeFormat.

Loading thumbnail…

Refactored Barchart

This horizontal bar chart displays the populations of the top 10 countries from the UN Population 2019 dataset, sorted by country name. Built with React and D3 v5, it uses `scaleBand` for the y-axis and `scaleLinear` for the x-axis, rendering bars as SVG `rect` elements. The chart loads the data via `d3.csv`, and both the left and bottom axes are rendered as separate React components (`AxisLeft`, `AxisBottom`), with marks generated by the `Marks` component.

Loading thumbnail…

Axes Barchart with react and D3

This example shows a horizontal bar chart of the top ten countries by 2020 population, with labeled axes rendered as custom SVG elements. The React app fetches UN population data via d3.csv, then uses d3.scaleBand for the categorical y-axis and d3.scaleLinear for the numeric x-axis. Tick marks and labels are generated manually from xScale.ticks() and yScale.domain(), while d3.max determines the scale domain. The chart renders through React’s useState and useEffect hooks, producing an interactive SVG visualization inside a React-DOM root.

Loading thumbnail…

Margin Barchart

This example displays a horizontal barchart of the top 10 countries by projected 2020 population, using a margin convention to place the y-axis labels on the left. The chart is built with React and D3 v5, where `scaleBand` positions the categorical country names and `scaleLinear` maps population values to bar widths. Data is loaded asynchronously via `d3.csv` from a GitHub-hosted UN Population dataset, and each bar is rendered as an SVG `rect` inside a translated `<g>` group. The visualization shows how React manages state and renders D3 scales into SVG elements.

Loading thumbnail…

Barchart

This bar chart displays the top 10 countries by projected 2020 population, using horizontal bars with lengths proportional to population values. The visualization is built with React and D3 v5, importing data from a CSV file via `d3.csv`. It uses `scaleBand` for the categorical country axis and `scaleLinear` for the numeric population axis, rendering the bars as SVG `<rect>` elements within a React component.

Loading thumbnail…

Rendering data with react

A donut chart renders the full set of CSS named colors as equal-width slices, each filled with its corresponding RGB hex value. The visualization displays the complete color palette from a CSV dataset loaded via `d3.csv`. React manages the component state and rendering, while D3's `pie()` generator computes the arc angles and `d3.arc()` creates the SVG path geometry. The chart is drawn as a single ring using SVG paths within a React component.

Loading thumbnail…

Gokul's Vega-Lite API Template

This example visualizes automobile performance by plotting miles per gallon against horsepower, with circles colored by origin and sized by weight, and tooltips revealing car names. It loads the classic Auto MPG dataset from a CSV file using D3’s `csv` function. The visualization is built with the Vega-Lite API (`vl.markCircle`, `vl.x`, `vl.y`), which compiles to Vega and renders to SVG, while the `vega-tooltip` handler enables interactive hover details. Configuration settings adjust axis fonts and gridline appearance for readability.

Loading thumbnail…

Loading Data with React & D3

This example demonstrates loading a CSV dataset into a React application using D3’s `csv` function, displaying file size, row count, and column count as text. The React component uses the `useState` and `useEffect` hooks to manage asynchronous data loading, showing “Loading…” until the promise resolves. The data comes from a remote gist containing CSS named colors. The `message` module formats the summary using `d3.csvFormat` to calculate size in kilobytes.

Loading thumbnail…

read csv

This example reads a CSV file containing CSS named colors from a GitHub Gist and parses it using the `fetch` API and `d3.csvParse` in D3 v5. The parsed data is logged to the browser console, demonstrating how to load and transform tabular data asynchronously within a bare-bones HTML page. It uses a custom `fetchText` function to retrieve the raw text before parsing, highlighting a manual two-step approach to CSV handling rather than relying on D3’s built-in `d3.csv` loader.

Loading thumbnail…

Mouse follower

A circle follows the mouse cursor across an SVG canvas, updating its position in real time. The example demonstrates basic interactivity in a React component, using React's `useState` and `useEffect` hooks along with an `onMouseMove` event listener to update the circle's center coordinates. D3.js version 5 is loaded via CDN, though the primary rendering is handled by React and SVG elements directly, with the circle styled using default attributes. The visualization runs in a full-window 960x500 viewport, showcasing simple state-driven DOM updates.

Loading thumbnail…

part 1 simley

This example shows a smiling face constructed entirely from scalable vector graphics (SVG) primitives, with a yellow circular background, two black eyes, and a mouth rendered as a filled arc. Built with React and D3 v5, the code composes reusable components such as `BackgroundCircle`, `Eyes`, and `Mouth`, with the mouth path generated using D3’s `arc()` generator. Positioning and sizing are controlled via props like `centerX`, `centerY`, `eyeOffsetX`, and `eyeRadius`, allowing for easy customization of the facial features.