Om Kakatkar

@OmKakatkar·8 public vizzes

Random Line Chart data

This example displays a random line chart visualizing the relationship between a count and data points from a CSV dataset loaded via d3.csv. The chart uses React components for the axes and marks, with scales created using d3.scaleLinear. The line is drawn using d3.line with a curveBumpX interpolation, rendered as an SVG path. Axis components generate gridlines and tick labels, while text elements label the axes.

Aug 19, 2023

Loading thumbnail…

Line chart

This line chart displays weekly temperature variations over time, with a smooth curved line connecting individual data points plotted on Cartesian axes. Built with React and D3.v7, the visualization renders as SVG, using `scaleTime` and `scaleLinear` for the temporal and temperature scales, `curveNatural` for the line path, and `csv` to load the San Francisco temperature dataset. Axis ticks, gridlines, and circle markers with tooltips provide detailed reading of the values.

Aug 6, 2023

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the Iris dataset, displaying sepal length on the x-axis and sepal width on the y-axis. Each circle represents a flower specimen, with hover tooltips revealing the exact sepal length value. The visualization uses React to render SVG elements, with D3.js functions like `scaleLinear`, `extent`, and `format` for scaling and tick formatting. The data is loaded asynchronously from a CSV file via D3's `csv` method, and custom components `AxisBottom`, `AxisLeft`, and `Marks` structure the chart.

Aug 5, 2023

Loading thumbnail…

Refactored Bar Chart

This bar chart visualizes population figures for the top 10 countries, sourced from a 2019 UN Population CSV. Rendered as an SVG within a React component, it constructs the chart using D3 v7's `scaleBand` and `scaleLinear` for the axes and bars. The refactored code separates the axes and marks into dedicated files, passing them as components to the main `App`, which applies a cursor-following pattern.

Aug 5, 2023

Loading thumbnail…

World Population Visualization

This example presents a horizontal bar chart of the top 10 countries by 2020 population, using data from the UN Population 2019 CSV. The visualization shows the relative population sizes with labeled axes and gridlines. Built with React and D3 v7, it uses `scaleBand` for the categorical y-axis, `scaleLinear` for the numeric x-axis, and SVG `rect` elements for rendering. Data is loaded asynchronously via D3’s `csv` function before being displayed.

Aug 5, 2023

Loading thumbnail…

MDN colors Visualization - React D3

A donut chart visualizes the distribution of MDN's named colors, with each color's hex value filling its corresponding pie slice. Built with React and D3 v7, the visualization loads color data from a CSV file and renders it as SVG paths using D3's pie and arc generators. The chart is centered in a 960x500 viewport, and each slice represents one color entry from the dataset.

Jul 30, 2023

Loading thumbnail…

MDN colors Visualization

This example shows a simple interactive SVG visualization where a circle follows the user’s cursor movements across the viewport. It uses React state to track the cursor’s clientX and clientY coordinates via an onMouseMove handler, then re-renders the circle’s position accordingly. The circle is drawn with a custom stroke width and radius, while the cursor is hidden using CSS. The code imports the d3.arc function but does not use it in the visible logic, relying instead on React’s useCallback and useState hooks.

Jul 30, 2023

Loading thumbnail…

Fork of Hello HTML

This example renders a simple smiley face using React and D3, drawing a yellow circle with black eyes and a curved mouth. The SVG output is generated through React components, while D3's `arc` generator creates the mouth path with specified inner and outer radii and angle ranges. The visualization demonstrates how React manages the SVG DOM elements and how D3 helper functions can be integrated for geometric calculations.

Jul 29, 2023