Skip to main content
Log in
R

rishyossarian

@rishyossarian·21 public vizzes

Loading thumbnail…

d3 intro

This example displays the top 10 most populous countries as a horizontal bar chart using React and D3 v5. The bars’ lengths are mapped from population values via `d3.scaleLinear`, while the y-axis uses `d3.scaleBand` for country names. It loads data from a United Nations World Population Prospects 2019 CSV file using `d3.csv`. The SVG rendering is split into reusable components: `AxisBottom`, `AxisLeft`, and `Marks`, with tooltips provided through SVG `<title>` elements.

Jan 15, 2022
Loading thumbnail…

scatter plot of q vs q

This scatter plot displays the population of the top 10 most populous countries, with circles positioned along a linear x-axis for population and a point scale y-axis for country names. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear`, `scalePoint`, `axisBottom`, and `axisLeft` to construct the chart. Data comes from the 2018 United Nations World Population Prospects, loaded via `d3.csv`, with population values multiplied by 1,000. The code customizes axes with tick formatting that abbreviates large numbers and removes domain lines for a cleaner presentation.

Jan 14, 2022
Loading thumbnail…

scatter plot

This scatter plot displays the population of the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects, with circular markers positioned along a point scale for countries and a linear scale for population. The visualization uses d3.scaleLinear, d3.scalePoint, d3.axisLeft, and d3.axisBottom to construct the chart, with axis tick formatting converting large numbers to abbreviated forms. The code loads data via d3.csv, appends SVG circles with a fixed radius, and includes grid lines through tick sizing, a title, and an axis label.

Jan 14, 2022
Loading thumbnail…

tweaking bar chart

This bar chart displays the population of the top 10 most populous countries using 2018 estimates from the United Nations World Population Prospects 2017. It shows how D3 axes can be customized through tick formatting, tick size, and removing axis domains or tick lines. The code uses `d3.csv`, `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, and `d3.axisBottom` to render the SVG. Population values are multiplied by 1000, and tick labels are formatted with `.2s` while replacing 'G' with 'B'.

Jan 14, 2022
Loading thumbnail…

making a barchart w d3.js and svg

A React and D3.js bar chart displays population data as horizontal bars using SVG. The visualization maps each country to a vertical band via `d3.scaleBand` and population to horizontal lengths with `d3.scaleLinear`, annotated by `d3.axisLeft` and `d3.axisBottom` axes. Data is loaded from a gist CSV file, then parsed and scaled, rendering steel blue rectangles inside a 960x500 SVG. The code uses D3 v5 imported as named modules, with selectors and attribute chaining to build the chart.

Jan 13, 2022
Loading thumbnail…

Making a Bar Chart

This bar chart displays the top 10 most populous countries in 2018, using population estimates from the United Nations World Population Prospects 2017. It shows how d3.csv loads the data and d3.scaleLinear and d3.scaleBand map populations to bar widths and countries to vertical positions. The SVG rendering draws rectangles with cyan fills, while D3 axes are customized to demonstrate formatting. The code also uses d3.max to set the scale domain and d3.select to append elements.

Jan 7, 2022
Loading thumbnail…

Fork fork of Making a Bar Chart

This bar chart displays the populations of the ten most populous countries, using 2018 estimates from the United Nations World Population Prospects. The visualization is built with D3 v5, employing `d3.scaleLinear` for the horizontal axis and `d3.scaleBand` for the vertical axis, though axis rendering is not fully implemented. Rectangles are appended to an SVG container with fixed widths and heights, and data is loaded from a CSV file using `d3.csv`. The chart currently shows only the raw rect elements without proper scaling or axis labels.

Jan 7, 2022
Loading thumbnail…

rishita Rendering Data with React & D3

This example shows a simple bar chart displaying scores for four named items, rendered as blue rectangles on an SVG canvas. The chart uses D3 scales to map data to x and y positions, with the y-axis scaled from 0 to 100. React handles the component state and rendering, while D3's `scaleBand` and `scaleLinear` functions compute the layout geometry. The SVG is created directly with D3 selections, with the visualization set within specified margins and dimensions.

Jan 4, 2022
Loading thumbnail…

Fork of Pathetic Bar Chart

This example renders an empty SVG after loading population data from the United Nations World Population Prospects 2019 via D3’s `csv` function. It uses React hooks (`useState`, `useEffect`) to fetch and store the data, displaying a "Loading..." message until the CSV arrives. The chart currently contains no bars, axes, or other visual elements—only a fixed 960×500 SVG frame. The code imports `scaleBand`, `scaleLinear`, and `max` from D3, but never invokes them, leaving the visualization incomplete. The rendering relies on React’s `ReactDOM.render` with D3 v5 for data loading.

Jan 4, 2022
Loading thumbnail…

rishita Vega-Lite API Template

This example shows the distribution of religious populations across countries using a circular scatter plot, with each point’s color mapped to a religion and its vertical position encoding population size. The visualization is built with the Vega-Lite API, which is registered alongside Vega, Vega-Lite, and D3.js. Data is loaded asynchronously via D3’s CSV module from a GitHub Gist sourced from the UCI Auto MPG dataset. The chart uses a custom configuration to style axes and labels, and Vega Tooltip provides interactive hover details.

Jan 4, 2022
Loading thumbnail…

Rishita loading using s3 and react state

This example demonstrates a loading message that reports the size and structure of a dataset as it is fetched. It uses React hooks (`useState`, `useEffect`) to manage state and trigger the data load, while `d3.csv` retrieves the CSS named colors dataset from a GitHub gist. Once loaded, the app displays the file size in kilobytes, row count, and column count, using `d3.csvFormat` to calculate the byte length. Before the data arrives, a simple “Loading…” text is shown. The visualization is rendered as SVG within a React component.

Jan 2, 2022
Loading thumbnail…

Rishita Loading and Parsing CSV Data

This example demonstrates the basics of loading and parsing CSV data using D3 v7. It fetches a CSS Named Colors dataset from a GitHub gist and displays the number of columns and rows in a large text element. The code uses `d3.csv()` to asynchronously retrieve the data, then accesses the `columns` property and array length to generate the summary message. The result is rendered into an HTML `<pre>` container using the DOM API `textContent`.

Jan 2, 2022
Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example demonstrates how to fetch a remote CSV file and log its contents to the browser console. The page uses the native Fetch API to request the dataset from a GitHub gist URL, then processes the response with the `.text()` method to print the raw CSV string. No external JavaScript libraries are used, and the implementation relies on standard browser APIs for HTTP requests and text handling. The visualization is purely demonstrative, showing the foundational step of loading tabular data without any rendering or charting logic.

Jan 1, 2022
Loading thumbnail…

interactive

A smiley face rendered as an SVG follows the user’s cursor across a 960×500 canvas. The React app uses the `useState` and `useCallback` hooks to track mouse coordinates from an `onMouseMove` event, updating a single circle’s `cx` and `cy` attributes in real time. The circle’s radius is fixed, with no additional facial features or animation. The visualization demonstrates basic interactive SVG rendering with React, where the data—the mouse position—directly drives the graphical output.

Jan 1, 2022
Loading thumbnail…

mouse follower

A smiley face rendered as an SVG circle tracks the cursor's movement across a full-window canvas. The code uses React hooks, specifically `useState` for mouse coordinates and `useCallback` for the event handler, to update the circle's `cx` and `cy` attributes on every `mousemove`. The visualization displays a single yellow circle with black outlines, omitting facial features, and directly lands on the `clientX` and `clientY` properties of the mouse event.

Dec 27, 2021
Loading thumbnail…

Loading and parsing CSV

This example demonstrates how to fetch and parse a CSV file from a remote URL using JavaScript. It shows the initial step of loading data through the `fetch()` API, logging the HTTP response object to the console. The code references a specific CSV file containing CSS named colors from a GitHub gist. The example focuses on the raw response handling rather than visualization, serving as a foundational tutorial for data loading before any charting is implemented.

Dec 27, 2021
Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates loading and parsing a CSV file from a remote GitHub Gist, displaying the raw text output in the browser’s console. The page fetches the data using the Fetch API, then chain-calls `response.text()` to extract the CSV contents. No chart or visual element is rendered; the sole purpose is to log the CSV data, sourced from a file named `CssNameColor.csv`, for inspection. The HTML page contains a minimal script with no external frameworks or libraries beyond native browser APIs.

Dec 23, 2021
Loading thumbnail…

my smiley project

This example renders a smiley face using React components that compose SVG shapes, including circles for the face and eyes, an ellipse for the mouth, and arc paths for eyebrows. The visualization is built with D3 v7’s `arc` generator to create the eyebrow paths, while the React app positions each element within an SVG canvas of fixed dimensions. The code defines reusable components like `BackgroundCircle`, `TwoEyes`, and `Pupil`, demonstrating a modular approach to constructing the final image.

Dec 23, 2021
Loading thumbnail…

Fork of Let's Make a Face Part I

This example shows a stylized smiley face built from three reusable SVG components: a yellow background circle, a pair of eyes, and a mouth drawn as an arc. The face is positioned at the center of a 1060×500 SVG canvas using React components that receive geometry props for radii and offsets. The mouth path is generated with d3.arc(), while BackgroundCircle and Eyes render plain SVG circle elements. React 16.9 and D3 v7 work together, with all drawing handled declaratively through JSX.

Dec 21, 2021
Loading thumbnail…

practise hello html

This example shows a simple smiley face drawn as a yellow circle with two black eyes, centered in an SVG canvas. The visualization is built using React to render the SVG elements while D3’s `arc` function is imported but not used, with circle coordinates and radii derived from fixed constants. The code creates the face by computing the center and offsets, and sets the overall page style to hide overflow.

Dec 21, 2021
Loading thumbnail…

Untitled

This example presents a minimal blank HTML page—the document contains only a DOCTYPE declaration and empty `<html>` tags. The code includes no imported libraries, no CSS styles, and no JavaScript logic, making the visualization area entirely empty. It serves as a bare-bones starting point for building interactive graphics, though currently renders no data or visual elements. The project references the React starter framework in its README but the index.html itself uses no framework or API calls.

Dec 11, 2021