devvansh1997

@devvansh1997·7 public vizzes

Charts, Charts, Charts

This visualization displays four distinct chart types side by side: a doughnut chart, bar chart, radar chart, and pie chart. Each chart presents a different dataset, such as airline passenger numbers, player skill ratings, and EU population figures. The code uses Chart.js 2.8.0 for rendering all charts onto canvas elements, while D3.js v7 handles loading CSV data from a GitHub gist. The bar chart and pie chart use hardcoded arrays, but the doughnut chart demonstrates fetching and parsing external CSV data.

Dec 1, 2021

Loading thumbnail…

Untitled

This example loads a CSV dataset of apartment listings from a GitHub gist and counts the number of entries with type "apartment." The code logs the dataset length, the baths value of the first record, and the total apartment count to the browser console. It uses d3.csv from D3 v5 to fetch and parse the data, then iterates through rows with a for loop and forEach to collect property types and tally apartments. No visual rendering is performed; the visualization is purely a data-inspection exercise.

Nov 29, 2021

Loading thumbnail…

Fork of Vega-Lite API Template

This visualization displays automobile fuel efficiency data from the UCI Auto MPG dataset, plotting cylinders against weight with color-coded origins and tooltips showing vehicle names. The code uses the Vega-Lite API with D3.js v7 for data loading via `csv()`, and renders an interactive SVG chart through Vega and Vega-Lite. Custom styling in `config.js` adjusts axis fonts and colors for readability. The visualization responds to window dimensions and includes a Vega tooltip handler, producing a full-screen scatter plot with hover interactions.

Nov 27, 2021

Loading thumbnail…

Fork of HTML Starter

This visualization displays the text “Parallel Coordinates” as a large HTML message above an empty plotting area. The page loads D3 version 5.11.0 from a CDN and sets up margin, width, and height variables for an intended chart. The styling uses a CSS class to center the title text at a large font size, while the empty `<div>` with ID `my_dataviz` is prepared for future D3 rendering. No actual data or chart is drawn in the provided code.

Nov 26, 2021

Loading thumbnail…

Smiling face Part 1

This visualization renders a grid of fifteen cartoon faces using React and SVG. Each face is composed of a yellow background circle, two eyes, and a mouth, all positioned within a shared coordinate space. The faces are generated by randomly varying the eye offset, eye radius, and mouth properties for each instance. The code utilizes the d3 library for generating the mouth arc path and the range function to create the array of faces.

Nov 25, 2021

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a minimal D3 starter page that displays the text “Hello D3 version 7” in the center of the browser window. It uses D3 v7’s `select` function from the `d3` module to target the `body` element and set its `text` content, while styling the page with a 13em font size via CSS. The code loads D3 from a CDN and runs through a bundled `bundle.js` file, showing the basic setup for a modern D3 project.

Nov 25, 2021

Loading thumbnail…

Car Pricing

This example displays the text “Hello World” in the browser, serving as a minimal demonstration of setting up a D3 version 7 project. The page’s body is styled with large, centered text, and the message is injected into a `<pre>` element using the native `document.getElementById` and `textContent` API from the `index.js` file. The code imports the `select` function from the d3 module but does not use it, relying instead on plain JavaScript for the output. D3 is loaded via a CDN link in the HTML.

Nov 24, 2021