AllInclusive

@AllInclusive·7 public vizzes

CSV Import2

This example demonstrates the parsing of a CSV file containing two columns, year and number, with each year appearing twice. The code uses the D3.js library version 3.5.5, specifically the `d3.csv` method, to load and parse the remote data file. For each row in the dataset, the program logs both the year and number values to the browser console, and also prints the third object from the parsed array. The visualization itself does not render any graphical output, focusing solely on data import and console-based verification of the parsed values.

Jan 11, 2020

Loading thumbnail…

CSV Import2+morph

A D3.js CSV import feeds yearly numerical data into a WebGL morph target animation built with Three.js. The scene shows an animated sphere that continuously rotates and morphs between two shapes while orbiting with user-controllable camera via OrbitControls. The data.js file parses the two-column dataset using `d3.csv`, logging selected values to the console. Meanwhile, the Three.js script loads a GLTF model with morph targets and animates its influences over time, with point sprites attached to the geometry. This combines static data loading with dynamic, real-time 3D rendering.

Jan 10, 2020

Loading thumbnail…

HTML Starter

This example demonstrates a minimal HTML page displaying the text “Hello HTML” centered on a white background with enormous 13em font size. The page uses only basic HTML and CSS, with no JavaScript or external libraries. The styling is applied via a `<style>` block inside the document’s `<head>`, and the content is a simple static text node in the `<body>`. It serves as a bare-bones starter template for understanding raw HTML structure before adding visualization frameworks.

Jan 10, 2020

Loading thumbnail…

CSV Import

This example demonstrates how to import a CSV file using D3.js, displaying the row and column counts from the dataset. The data contains yearly numerical values from 1880 to 2015, with each year having two entries. Using `d3.csv`, the code loads the external data file and asynchronously processes it, then updates the text content of a large `<pre>` element with the resulting statistics. The visualization showcases D3 v5’s promise-based data loading API for reading tabular data files.

Jan 10, 2020

Loading thumbnail…

try2

This visualization displays two data series over time, plotting yearly values from 1880 to 2015. A line chart pairs exact and rounded measurements for each year, allowing comparison between the precise raw data and its simplified approximation. The implementation uses D3 version 5, loading data from a CSV file containing year and number columns. The code imports functions like `scaleLinear` and `scaleBand` from D3, though the current version only logs a data point and recursively calls itself, suggesting it is a partial or experimental script that renders an SVG element.

Jan 10, 2020

Loading thumbnail…

data

The visualization displays the annual number of data points from 1880 to 2015 as horizontal bars, with the x-axis representing the year and the y-axis showing the categorical years. It uses d3.scaleLinear for the x-axis, d3.scaleBand for the y-axis, and d3.axisLeft and d3.axisBottom to render the axes. The bars are appended as SVG rect elements with their widths proportional to the year values. The data is loaded from a CSV file using d3.csv.

Jan 9, 2020

Loading thumbnail…

data

This example shows a horizontal bar chart of population values over time, with each year displaying two bars representing different data points. The chart uses D3 v5’s `scaleLinear` and `scaleBand` to map population counts and years, with SVG rectangles drawn via `selectAll('rect')`. Data is loaded from a CSV file using `d3.csv` and multiplied by 1000 for display, with axes rendered using `axisLeft` and `axisBottom`.

Jan 9, 2020