Yash_Mistry

@mistryy751·6 public vizzes

Fork of Auto MPG Summary

This example displays a plain-text summary of the Auto MPG dataset from the UCI Machine Learning Repository, showing the row and column counts, file size in kilobytes, and the first ten records as formatted JSON. It uses d3.csv to load the data from a Google Drive URL, then appends <pre> elements to the body via d3.select. The styling uses black text on a green terminal-like background, mimicking a command-line interface.

May 7, 2021

Loading thumbnail…

Fork of D3 Scatter Plot (Vanilla JS)

This example shows a scatter plot of the Iris dataset, mapping petal length on the x-axis and sepal length on the y-axis as colored circles with a fixed radius. It uses D3 v6 (loaded via a global script tag) with the `csv` parser, `scaleLinear` for scaling, and `axisLeft`/`axisBottom` for axes. The data is fetched from a Google Drive CSV URL, and the SVG rendering fills the full browser window.

May 7, 2021

Loading thumbnail…

D3 Scatter Plot

This D3 v6 scatter plot visualizes the Iris Dataset, plotting petal length against sepal length for individual flower specimens. It uses the `csv()` loader to fetch data, `scaleLinear()` with `extent()` for scaling, and `axisLeft()` and `axisBottom()` to render axes. The SVG canvas fills the browser window, and circles are drawn with a fixed radius using the `join('circle')` operation. The sample displays all data points as a simple 2D projection, enabling pattern recognition in the measurements across the dataset's species.

May 7, 2021

Loading thumbnail…

Fork of D3 Scatter Plot

This scatter plot visualizes the Iris Dataset, plotting petal length against sepal length for individual flower samples. Each circle represents a data point, with axes labeled using D3's scaleLinear, axisLeft, and axisBottom APIs, and tick text styled at 24px. The visualization fills the browser window by setting SVG dimensions to window.innerWidth and innerHeight, reading the dataset from data.csv via d3.csv. Circle positions are computed by mapping data values through linear scales with defined margins and a fixed radius of 5 pixels.

May 7, 2021

Loading thumbnail…

Fork of Fork of Fork of Bar Chart + Axis customisation

A horizontal bar chart displays total COVID-19 cases for eleven countries, using a linear gradient fill and customized axes. The visualization employs D3 v6 with `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render SVG bars, while tick labels use a text gradient and formatted numbers via `d3.format`. Data comes from a CSV file containing country names and case totals. The chart includes a title and axis labels, with gridlines removed from the axes.

Mar 2, 2021

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a minimal D3 version 6 starter, displaying the text "Hello D3 version 6" centered on a blank webpage. It uses the `d3.select` API to target the document body element and chain the `.text()` method to set its content. The code loads D3.js from a CDN and custom JavaScript from a `bundle.js` file, rendering without any data source or visual encoding. No axes, marks, or interactions are present, making it a barebones introduction to D3’s DOM manipulation capabilities.

Mar 2, 2021