Skip to main content
Log in
L

lokesh234

@lokesh234·9 public vizzes

Loading thumbnail…

Average Tuition Price Of Different Fraternities At Duke With A Menu To Change The State.

This visualization displays the average high school tuition of Duke University fraternity members by their home state, using horizontal bar charts to compare different Greek organizations. A dropdown menu allows users to switch between states, dynamically filtering the dataset to show only fraternity members from the selected region. The visualization uses React for state management and component rendering, while D3 v5 handles data loading via `d3.csv` and scales (including `scaleBand` and `scaleLinear`) for positioning bars. The chart is rendered as an SVG with styled rect elements, pulling data from the GreekLifeDataDuke dataset published on GitHub Gist.

Oct 7, 2020
Loading thumbnail…

Average Tuition Price Of Different Fraternities At Duke With A Menu To Change The State.

This visualization displays the average high school tuition of Duke University fraternity members by their home state, using horizontal bar charts to compare different Greek organizations. A dropdown menu allows users to switch between states, dynamically filtering the dataset to show only fraternity members from the selected region. The visualization uses React for state management and component rendering, while D3 v5 handles data loading via `d3.csv` and scales (including `scaleBand` and `scaleLinear`) for positioning bars. The chart is rendered as an SVG with styled rect elements, pulling data from the GreekLifeDataDuke dataset published on GitHub Gist.

Oct 7, 2020
Loading thumbnail…

High School Tuition of Greek Organizations at Duke University.

This visualization compares high school tuition costs across Greek organizations at Duke University, using a bar chart where each bar’s length encodes tuition and color represents the member’s home state. The bars are sorted by tuition in descending order, with axes scaled from zero to highlight differences. Built with Vega-Lite and d3, the view filters out non-Greek members from the GreekLifeDataDuke CSV dataset, configures axis styling via a custom config object, and renders interactive tooltips through the vega-tooltip handler.

Sep 24, 2020
Loading thumbnail…

Top ten best selling video games on PS4 in millions.

This visualization displays the top ten best-selling PS4 games by global sales in millions, using bar marks to compare game titles sorted in descending order. The bars are colored by platform and rendered with rounded corners, while axes and labels are customized for readability. The code loads CSV data via D3’s `csv` function, filters for PS4 entries, and builds the chart with Vega-Lite API methods like `markBar`, `encode`, and `fieldO`/`fieldQ`. The visualization uses `vega-lite-api`, `vega` and `vega-lite` registered together, with tooltips handled through `vega-tooltip`.

Sep 24, 2020
Loading thumbnail…

Power Levels (Scaled Down) of god-level characters from the movie - Dragon Ball Z : Battle of Gods.

This visualization displays the scaled-down power levels of god-level characters from the movie *Dragon Ball Z: Battle of Gods*, plotting each character’s power level as a red dot on a categorical x-axis against a quantitative y-axis. The underlying data is filtered from the “DragonBallData” dataset, keeping only values above one trillion and dividing them by 10,000 for readability, then limiting to the first 15 entries. The chart is built using vega-lite-api with `vl.markCircle`, `vl.x().fieldO()`, and `vl.y().fieldQ()`, while `getData.js` loads and processes the CSV via `d3.csv` and the `d3` import.

Sep 24, 2020
Loading thumbnail…

How you doing ?

This interactive visualization, titled "How you doing?", is a playful homage to a smiley face rendered as a static SVG graphic. Built with React and D3, it displays a large red circle with black stroke, two eyes, and a curved mouth drawn using a D3 `arc` function. The eyes are interactive, triggering a JavaScript `alert` popup that asks the viewer how they are doing. Additional SVG `rect` elements form the eyebrows and other facial features, with all positioning calculated relative to the canvas center. The composition uses D3's `arc` API to generate the mouth's path, demonstrating a hybrid of D3 geometry within a React component.

Sep 24, 2020
Loading thumbnail…

All Uber Trips in NYC from 08/01/2014 to 08/14/2014

This visualization displays basic metadata about all Uber trips in New York City from August 1–14, 2014, reporting the file size in kilobytes, row count, and column count of the source dataset. The page loads a CSV from the FiveThirtyEight GitHub repository using `d3.csv` and then uses `d3.csvFormat` to calculate the raw data size, while reading `data.length` and `data.columns.length` to summarize the table. The results are rendered as large text in a `<pre>` element, with no graphical chart or map shown. The example demonstrates straightforward CSV loading and summary reporting with D3 v5.

Sep 24, 2020
Loading thumbnail…

FBI Hate Crime Statistics in the United States

This example displays the FBI Hate Crime Statistics dataset as a plain text summary. It reports the file size in kilobytes, the number of data rows, and the number of columns contained within the CSV. The visualization uses the D3.js library, specifically the `d3.csv` function to load the remote data and `d3.csvFormat` to calculate its size. The resulting three-line message is presented in a large pre-formatted text element on the page.

Sep 24, 2020
Loading thumbnail…

A Deck of Cards Dataset

This example displays the size and structure of a deck-of-cards dataset directly in the browser as plain text. It reports the CSV file’s size in kilobytes, the row count, and the number of columns. The code loads the dataset from a GitHub-hosted CSV using `d3.csv`, then formats and counts the data with `d3.csvFormat` and the array’s `length` property. It writes the resulting three-line summary into a `<pre>` element via standard DOM text assignment. The dataset itself originates from Garrett Gman’s public gist.

Sep 24, 2020