Siddhant Bhardwaj

@SiddhantBhardwaj2018·11 public vizzes

World Map

A temperature line chart displays one week of hourly temperature readings from San Francisco, with a smooth curve drawn through individual data points. The visualization uses React to render SVG elements, with D3 v5 handling scales, axes, and the natural curve interpolation via `d3.line` and `curveNatural`. Tooltips on each circle reveal the timestamp, and the data is loaded from a CSV file using `d3.csv`.

Oct 21, 2021

Loading thumbnail…

Working with Time by Sidd

This visualization shows temperature readings over a week in San Francisco, plotted as a smooth line chart with circular markers for each data point. The chart uses a time-scaled x-axis and linear y-axis, with day-of-week labels for the time axis. Built with React and D3 v5, the visualization leverages `scaleTime`, `scaleLinear`, `line` with `curveNatural`, and renders to SVG. Data is loaded from a CSV file using `d3.csv` and parsed into temperature values and timestamps. Tooltips on the circles display the day of each observation.

Oct 20, 2021

Loading thumbnail…

ScatterPlot by Sidd

This visualization is a scatter plot of the Iris dataset, showing the relationship between sepal width and petal length. It uses React and d3.v5 to render SVG circles, with axes and tick marks created by custom components. The plot reads data from a CSV file using d3’s `csv` function and scales the points with `scaleLinear` and `extent`. Tooltips display formatted values via SVG `<title>` elements, and the chart is fully responsive within its 960x500 viewBox.

Oct 20, 2021

Loading thumbnail…

Scatterplot Siddhant

A horizontal bar chart displays the populations of the top 10 countries from the UN Population 2019 dataset. React renders SVG elements for the axes and marks, while D3 v5’s `scaleLinear` and `scaleBand` handle population and country positioning. Tooltips use SVG `<title>` elements, and the x-axis tick labels are formatted with `d3.format`.

Oct 20, 2021

Loading thumbnail…

Rendering Data with React & D3

This visualization presents a horizontal bar chart of the top 10 most populous countries, rendered as SVG. Using React components for structure and D3’s `scaleLinear` and `scaleBand` for scales, it maps each country’s 2020 population to bar lengths. Axes are built with D3’s `format` for tick labels, and the data is fetched from a CSV using `d3.csv`.

Oct 20, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This example presents a scatterplot of automobile data, showing the relationship between engine displacement and horsepower, with a tooltip revealing each car's name. The visualization is built using the Vega-Lite API, which registers Vega and Vega-Lite specifications, and leverages d3.csv to load the auto-mpg dataset from a GitHub gist. The view is configured to fit the full window size, with custom axis and label styling from a config file, and uses a semi-transparent point mark to handle overplotting. The rendering is handled by Vega's SVG renderer.

Oct 20, 2021

Loading thumbnail…

Something

This example displays a React-powered interface that reports the size, row count, and column count of a CSV dataset loaded from a remote URL. The application fetches the named CSS colors data using the D3 `csv` function, then renders a formatted text summary via the `message` function. While a commented-out SVG markup defines a static smiley face with yellow circle and eye elements, the active visualization instead uses a `<pre>` element to show the dataset metrics, relying on React’s state management and D3’s formatting utilities.

Oct 20, 2021

Loading thumbnail…

Loading and Parsing CSV data

This example demonstrates how to load and parse CSV data in the browser using the Fetch API and D3 v5. It fetches a remote dataset of CSS named colors, parses the text into tabular data with `d3.csvParse`, and displays a summary message showing the file size, row count, and column count. The interface uses a plain HTML `<pre>` element for output, with the logic wrapped in an async function and commented-out code illustrating the alternative promise-based approach.

Oct 20, 2021

Loading thumbnail…

Smiley Face Part I

A grid of eighteen randomly generated smiley faces renders in React with SVG. Each face, drawn using d3.arc for the mouth and custom React components for the eyes and background circle, varies in eye offset, radius, stroke width, and mouth curvature. The code imports d3.range to create the array of faces and uses ReactDOM.render to mount the application.

Oct 20, 2021

Loading thumbnail…

Fork of Smiley Face Part I - Siddhant Bhardwaj

A smiling face is drawn as a static SVG graphic, centered on a yellow circular face with black outlines, two black eyes, and a stylized mouth arc. The visualization uses React to render the SVG elements and the D3.js `arc` function to define the mouth's path geometry. Data is not loaded; instead, all shapes are hand-coded with fixed pixel coordinates and radii, with the D3 `arc` method specifying the mouth's inner and outer radii and angular range. The rendering relies on SVG primitives within a 960 by 500 viewport.

Oct 19, 2021

Loading thumbnail…

Fork of Hello HTML

This example is a bare-bones HTML page that simply displays the text “Hello” in the browser body. It demonstrates the minimal structure required for any web-based visualization, with no external libraries, styles, or scripts. The page uses only core HTML tags (`<!DOCTYPE html>`, `<html>`, `<head>`, `<body>`) and does not include D3, Canvas, or other rendering APIs. The accompanying README links to a YouTube video but the code itself shows no data or interactive behavior. It serves as a starting point for more complex D3 v3 examples.

Oct 19, 2021