G

goyalshivam204

@goyalshivam204·19 public vizzes

Loading thumbnail…

Line Chart Temperature vs Time Part - 2

This example visualizes temperature over time using a smoothed line chart, where each data point is marked with a circle and a tooltip showing its timestamp. Built with React and D3 v5, it renders an SVG containing axes, grid lines, and the data marks. The code uses `d3.scaleTime` and `d3.scaleLinear` for the x and y axes, `d3.line` with `curveNatural` for the interpolated path, and `d3.extent` to set the domain. Temperature and time labels are added, though no custom color encoding appears. The data is loaded from a CSV file.

Loading thumbnail…

Line Chart Temperature vs Time Part - 2

This line chart displays temperature readings over time, with each data point marked by a circle and connected by a smooth path. The visualization uses D3 v5 scales and the `line()` generator to map timestamp and temperature values, while React components render the SVG axes, ticks, and labels. Data is loaded from a CSV file using `d3.csv` and parsed into JavaScript Date objects. The chart includes formatted week-day labels on the x-axis and a rotated "Temperature" axis label.

Loading thumbnail…

Line Chart Temperature vs Time Part - 1

A scatterplot displays hourly temperature readings over time, with each point representing a measurement and colored teal. The visualization uses D3 scales for time and linear axes, rendering SVG circles through React components. Data loads from a CSV file containing San Francisco weekly temperatures. The chart includes labeled axes for temperature and time, with a tooltip showing the species on hover. React manages the component state, while D3 handles the data parsing and scaling operations.

Loading thumbnail…

Iris Dataset PART - 1

A scatterplot of the Iris dataset shows the relationship between petal length and petal width, with each flower species (setosa, versicolor, virginica) colored red, blue, or green. The visualization uses React components for the axes and marks, while D3 v5's `scaleLinear` and `csv` load and scale the data from a GitHub gist. Axis ticks and circles are rendered as SVG elements, with hover tooltips displaying the species name.

Loading thumbnail…

Scatter Plot ( Iris Dataset ) Part - 1

This example shows a scatter plot of the Iris dataset, mapping sepal length on the x-axis and sepal width on the y-axis, with each point representing a flower sample. The visualization is rendered as an SVG using React components (AxisX, AxisY, and Marks), with scales created via `d3.scaleLinear` and extents computed from the data. Axes and tick marks are generated manually using D3’s `ticks()` method, while hover tooltips are implemented using SVG `<title>` elements. The code loads CSV data asynchronously via `d3.csv` from a GitHub gist, parsing numeric fields into floats.

Loading thumbnail…

Styled Visualizing World Population PART - 6

This bar chart displays the population of the top 10 countries in 2020, using horizontal bars ranked by country name. The visualization loads CSV data from a GitHub gist and renders it as SVG through React components, with D3's `scaleBand` and `scaleLinear` handling the axes. Axis and bar styling are customized via CSS classes, and tooltips showing formatted population values in millions or billions are provided through SVG `<title>` elements.

Loading thumbnail…

Visualizing World Population PART - 5

This visualization displays a horizontal bar chart of the top ten countries by population in 2020, sourced from a UN population CSV file. The chart uses D3 v5 scales with `scaleBand` for the country categories and `scaleLinear` for population values, rendering as SVG rectangles within a React component. The code imports specific D3 functions (`csv`, `scaleBand`, `scaleLinear`, `max`) to parse the data and compute the axis domains. The y-axis labels are positioned using the band scale's bandwidth, and the x-axis ticks are generated via a D3 linear scale's ticks method.

Loading thumbnail…

Axis with Visualizing World Population

This example visualizes the top 10 most populated countries in 2020 using a horizontal bar chart rendered as SVG. The chart displays each country’s population with axes generated from D3 scales. The code uses React hooks to fetch and parse CSV data, `d3.csv`, `scaleBand`, `scaleLinear`, and `max` for scaling, then explicitly maps tick values to create axis lines and labels.

Loading thumbnail…

Margin convention Visualizing World Population

This example visualizes the top ten most populous countries from the UN Population 2019 dataset, rendered as a horizontal bar chart using SVG. The chart displays each country’s population for the year 2020, with bars extending from the left margin. Built with React and D3 v5, the code uses `d3.scaleBand` for the y-axis categories and `d3.scaleLinear` for the x-axis population values, applying the margin convention—a transformed `<g>` element with explicit top and left margins. The data is loaded via `d3.csv` and filtered to the first ten rows.

Loading thumbnail…

Visualizing World Population

This example visualizes world population data for the top ten countries in 2020, displayed as horizontal bars whose widths correspond to population size. It fetches CSV data from a GitHub gist using D3’s `csv` method, then processes and sorts the rows before rendering. The chart is built with React components that generate SVG `rect` elements, scaled using D3’s `scaleBand` for country categories and `scaleLinear` for population values. The visualization updates reactively as data loads, with D3 v5 and React 16.9 handling the data flow and SVG rendering.

Loading thumbnail…

Loading and visualizing data

This example visualizes CSS named colors as a pie chart, where each slice is filled with the exact color it represents. The chart is rendered as an SVG using React components, with data loaded asynchronously via `d3.csv` from a GitHub gist. The pie layout and arc generators are created using `d3.pie()` and `d3.arc()`, with each slice assigned a fill based on the `Keyword` field from the CSV. A loading state displays "Data is Loading" until the data arrives.

Loading thumbnail…

Vega-Lite API Template

This visualization displays the relationship between the origin of a car and its horsepower using data from the UCI Machine Learning Repository’s Auto MPG dataset. Rendered as a circular scatter plot, each point represents a car, with opacity enhancing readability when points overlap. The code leverages the Vega-Lite API, specifically `vl.markCircle` and `vl.encode` for visual encoding, while `d3.csv` handles data loading. The visualization automatically fits the browser window and includes a custom tooltip via Vega-Tooltip, with axis styling customized through a separate configuration file.

Loading thumbnail…

Loading and parsing CSV data PART - 2

This example displays a summary of a CSV file loaded from a remote URL, showing its size in kilobytes, row count, and column count. It first fetches the text using the Fetch API with `async`/`await`, then parses it with `d3.csvParse`. Alternatively, the code demonstrates using `d3.csv` to directly load and parse the CSV, and `d3.csvFormat` to measure the formatted data size. The data originates from a GitHub gist containing CSS named colors.

Loading thumbnail…

Loading and parsing CSV data PART - 1

This example demonstrates how to load and parse CSV data from a remote URL, displaying the file size, row count, and column count as text on the page. It uses the Fetch API with async/await syntax alongside D3 v5’s `d3.csv()` method to retrieve and parse the data from a GitHub gist containing CSS named colors. The code shows two commented-out alternatives—manual text fetching with `d3.csvParse()`—and the active approach directly calling `d3.csv()`, then formats the result with `d3.csvFormat()` to compute its size.

Loading thumbnail…

named-color-dashboard

This example is a near-empty React application that renders a single, empty `<div>` element. It demonstrates the minimal scaffolding required for a React visualization dashboard, with the root element rendering through `createRoot` from `react-dom`. The page displays the static heading "named-color-dashboard" but contains no data, chart, or interactive logic beyond the initial setup.

Loading thumbnail…

Smiley face PART-4

A grid of twenty identical smiley faces, each composed of a yellow circular background, black eyes with white highlights, and a curved mouth, is rendered in an SVG canvas. Built with React, the visualization composes the face from reusable components like `BackgroundCircle`, `Eyes`, and `Mouth`, using D3's `arc()` for the smile and `range()` to generate the array of repetitions.

Loading thumbnail…

Fork of Fork of Smiley face PART-3

This example shows a simple smiley face rendered as an SVG graphic, featuring a yellow circular face, two eyes with white highlights, and a smiling mouth. Built with React and D3 v5, the visualization uses SVG circle elements for the face and eyes, while the mouth is drawn using the `d3.arc()` generator with specified inner and outer radii and angular start and end points. All shapes are positioned relative to the center of a 960×500 viewport using a group transformation. The code defines geometric constants for dimensions and colors, and renders the final composition through React’s `ReactDOM.render` method.

Loading thumbnail…

Fork of Smiley face PART-2

This example shows a partial smiley face rendered as a simple SVG graphic: a yellow circle with a black outline and two filled black eyes, but no mouth. The visualization uses React to define and mount the SVG elements, with hardcoded dimensions for width, height, eye offsets, and radius. Rendering relies on React 16.9 and ReactDOM, drawing circles via SVG `<circle>` tags within a fixed 960×500 viewport.

Loading thumbnail…

Smiley face PART-1

A large yellow circle with a thick black outline forms the head of a smiley face, with two smaller black circles positioned inside as eyes. The SVG is drawn using raw `<circle>` elements and fixed numerical coordinates on a 960-by-500 canvas, with no external libraries or data. The rendering is static and shows only the face’s outline and eyes, stopping short of a mouth. The code uses inline SVG attributes for positioning, size, fill, and stroke.