dielaenge

Davids D3-face

Davids D3-face depicts a cheerful cartoon face built entirely from SVG shapes, with animated eyebrows and a mouth that cycle through repeated transformations. The face features radial gradients for its head, ears, and a dark blue background, rendered in a 960 by 500 viewport. The code uses D3 v5’s `select`, `arc`, and `transition` APIs to draw circles, rectangles, and arc-based nose and mouth paths, with the mouth animating between two arc angles and eyebrows shifting vertically.

Sep 26, 2018

Davids D3 Bar Chart: General Governemnt Debt

This bar chart visualizes the general government debt-to-GDP ratios of the ten highest-ranking countries in 2015, using data from the OECD. The chart displays each country’s debt percentage as a vertical bar, ordered from highest to lowest, with Japan leading at over 237%. Built with D3 v5, the visualization uses `d3.csv` to load the data and `d3.scaleBand` and `d3.scaleLinear` to map countries and debt values to SVG rectangles. Axis labels and value annotations are generated via `d3.axisBottom` and `d3.axisLeft`, with styling applied through CSS.

Sep 26, 2018

Boston Housing data

This visualization displays summary statistics for the Boston Housing dataset, reporting the total row count, column count, and file size in kilobytes. It also prints the first ten rows of the data as formatted JSON for inspection. The code uses D3 v5’s `csv` function to load the remote CSV file, `csvFormat` to calculate data size, and `select` to append `<pre>` elements to the page body. The dataset originates from Kaggle’s Boston Housing competition.

Boston Housing data

This example displays a plain-text summary of the Boston Housing dataset, reporting the row count, column count, and file size in kilobytes, followed by the first ten rows of data as formatted JSON on a black terminal-style background. It uses the D3 library’s `csv` and `csvFormat` functions to fetch and measure the remote CSV file, while `select` appends the text elements to the page. The data source is the Kaggle-hosted Boston housing dataset, which includes features like crime rate and nitrogen oxides concentration.

World Happiness 2017

This example prints a textual summary of the World Happiness 2017 dataset, showing row and column counts, file size, and the first ten rows as JSON. It loads the data from a CSV using `d3.csv`, formats it with `csvFormat`, and renders the output to the DOM via `d3.select` and `append`. The data originates from Kaggle, credited to the World Happiness Report.

NBA All-Stars from 2000-2016

This example prints a plain-text summary of a dataset listing NBA All-Stars from 2000 to 2016. It displays the row count, column count, and file size in kilobytes, followed by the first ten rows of data as formatted JSON. Built with D3 v5, the visualization uses the `select`, `csv`, and `csvFormat` functions to fetch and process the CSV file from an external URL, then appends the results to the page via `body.append`. The data originates from basketball.realgm.com, as credited in the README.

NBA All-Stars from 2000-2016

This example displays a text-based summary of a dataset containing NBA All-Stars from 2000 to 2016. It reports the number of rows, columns, and file size in kilobytes, then prints the first ten rows as JSON. The visualization uses the d3 library, specifically its `select` and `csv` functions, to fetch the data from a CSV file hosted on VizHub. The output is styled with a black background and green monospace text via custom CSS.

Davids D3-face

A stylized, smiling face is drawn entirely with SVG shapes and animated using D3.js v5. The face is composed of geometric primitives: circles for the head, ears, and eyes, rectangles for the eyebrows, and annular arcs (via `d3.arc`) for the mouth and nose. Radial gradients define the navy background and yellow face, while D3's selection and attribute methods (`select`, `append`, `attr`) construct the scene, and `.transition().duration(500)` is used for a mouth animation. The data is purely generative, with no external dataset.

Davids D3-face

This example uses D3 v5 to draw an animated cartoon face in SVG. A radial-gradient-filled face, ears, eyes, eyebrows, and nose are positioned using D3 selections and SVG arcs. The mouth path is animated via a `transition().duration(500)`, while the `arc()` generator defines its inner and outer radii and angles. The background uses a second radial gradient, and all elements are centered within an SVG canvas.

Davids D3-face

This example uses D3.js v5 to draw a cartoon face entirely with SVG shapes, including radial gradients for the background and facial fill. The face is composed of circles for ears, eyes, and head, rectangles for eyebrows, and arcs for the nose and mouth, all positioned via D3’s `arc()` generator. The animation applies a `transition()` to the mouth path, altering its arc attributes over time, while the static layout uses D3 selections and attribute setters.

Davids D3-face

This example shows a simple, smiling face built from primitive SVG shapes and gradients in D3 v5. The code uses D3’s `select` and `arc` APIs to create a yellow circular head, two eyes of different sizes, small eyebrow rectangles, and an arc-based mouth. Gradients are defined in SVG `<defs>` and applied to the head and background, while static positioning values control the facial feature layout. No data is loaded; the visualization relies entirely on hardcoded geometry and styling.

Davids D3-face

A smiling face built from D3 shapes is rendered as an SVG, using gradient-filled circles for the head and eyes and an arc for the mouth. The visualization demonstrates D3 v5's `arc` generator and radial gradients, applying separate fill definitions (`grad1` and `grad2`) to create depth. All elements are positioned relative to the SVG's center using transformations and hard-coded pixel offsets, with no external data source.

Shapes with SVG & CSS

This example demonstrates how to create SVG shapes using CSS styling within a VizHub project. It shows a single large circle rendered on an SVG canvas with a 960-pixel width, generated from an HTML template. The code uses ES6 modules to export a message string from `myMessage.js`, which is imported into the main `index.js` file. The visualization relies on basic SVG elements and JavaScript module syntax to structure the example, with the circle positioned at a 400-pixel radius.

Shapes with SVG & CSS

A data report generated from a JavaScript array displays luxury car details—year, make, model, and price—filtered by a price threshold and formatted with commas and currency symbols. The example demonstrates ES6 modules and JSON parsing, using `cars.js` to define the dataset and `generateReport.js` to filter and map entries via `formatCar`. The final text output appears in the browser, styled with CSS.

Cars report

This example presents a simple static web page titled “Cars report,” which displays only a heading and no interactive charts or data visualizations. The page is built with plain HTML and linked to an external stylesheet (`styles.css`), but the stylesheet content is not provided. No JavaScript libraries or APIs are used, and no data source is loaded or rendered. The visualization is limited to the basic document structure and heading text, with no visible graphics or dynamic behavior.

Cars Report

This example displays a list of cars as a plain-text report. It shows each car’s year, make, model, and price, filtered to include only those exceeding a specified price threshold. The visualization uses JavaScript modules to parse a hardcoded JSON array, format each car entry, and generate the final report, which is then injected into an HTML pre-element. The code relies on ES6 modules, `JSON.parse`, and array methods like `filter` and `map` to produce the output.

Cars Report

The Cars Report displays a text-based list of luxury cars, filtering for vehicles priced above €5,000 and formatting each entry as a single line with year, make, model, and price in euros. The page initially shows a loading message, then after a two-second delay, the report is generated and rendered into a pre element. The code uses JavaScript modules with ES6 imports and exports, JSON parsing via `JSON.parse`, and a Promise with `setTimeout` to simulate asynchronous data fetching.