Ybg99g

@Ybg99g·5 public vizzes

Fork of ICE-6: Rendering Marks and Channels with React & D3

This visualization displays mobile sales figures for ten brands as horizontal bars, using a bar chart format. The React component manages the application state, loading CSV data through d3.csv from a GitHub-hosted dataset. D3's scaleBand and scaleLinear functions map the categorical brand names and numeric sales values to screen coordinates. The chart is rendered as an SVG, with axes and tick marks generated through d3's axis utilities, while React creates the SVG elements declaratively. The chart includes green grid lines and a title, "Mobile Sales," within a web page styled with CSS.

Mar 7, 2022

Loading thumbnail…

Fork of Iris Dataset Scatter Plot

This D3.js (v6) scatter plot visualizes the Iris Dataset, mapping petal length and width for each flower sample while encoding species with distinct colors (purple, red, teal). The SVG rendering uses `d3.csv` to load the data, `d3.scaleLinear` for axes, and `d3.axisLeft`/`d3.axisBottom` for tick marks. Circular marks are positioned via `selectAll('circle').join('circle')` and labeled with rotated axis titles for petal length and width. The plot fills the browser window and includes a 24px tick font size for readability.

Mar 7, 2022

Loading thumbnail…

Fork of ICE-5: Loading and Parsing CSV Data with D3.js

This example demonstrates loading and parsing CSV data with D3.js, displaying a message about the dataset's size and structure. The page uses D3.v7's `d3.csv` function to fetch an external CSV file of earthquake data, then computes and reports the file size in kilobytes, the number of rows, and the number of columns. The results appear in a large `<pre>` element, styled with CSS. The page also includes an inline SVG and a reference to an external image, though the core interactive component is the asynchronous data loading and formatting via `d3.csvFormat`.

Feb 28, 2022

Loading thumbnail…

Fork of ICE-5: Loading and Parsing CSV Data with D3.js

This example demonstrates how to load and parse a CSV file using D3.js, displaying the file size, row count, and column count in a styled HTML page. The page includes a custom SVG flag image and uses the D3.js v7 library’s `d3.csv()` method to fetch data from a GitHub Gist URL, then `d3.csvFormat()` to compute the data size. The resulting statistics are rendered inside a `<pre>` element with large, teal background text, while the header uses a green background.

Feb 28, 2022

Loading thumbnail…

Parse the Data using D3.js

A static SVG composition displays a stylized landscape with geometric shapes, a human figure, and layered triangles representing data elements. The page loads data using D3.js's `d3.csv` and `d3.json` parsers, then renders the fetched content into a styled `<pre>` element. The example demonstrates basic data loading and parsing workflows in D3 v7 within a React framework, using SVG for visual output.

Feb 28, 2022