Skip to main content
100%

Dragon Trainer Monthly

✓ Published0🌍 Public
Aangusgrant
Last edited Nov 3, 2022
Created on Nov 3, 2022

Dragon Trainer Monthly displays a list of dragon-themed articles with titles, authors, author bios, article text, and publication dates. It fetches article and author data from two separate JSON endpoints via the Fetch API, merges them by matching author names, and renders the combined content as HTML into the page. The visualization uses async/await functions for data loading and template literals with a map method to generate the article markup. No charting or drawing libraries are used; the presentation relies on plain HTML and CSS.

AI-generated description

Similar vizzes

Loading thumbnail…

Dragon Trainer Monthly

Dragon Trainer Monthly fetches a JSON article feed from the vanillajsacademy.com API and renders each story as a static HTML card. The page displays article titles, authors, body text, and publication dates in a simple vertical list, using a template literal with a `map()` function to generate the markup. It relies on the browser’s native `fetch()` API and async/await syntax, with error handling that injects a fallback message into the DOM if the request fails. The visualization is text-focused, showing no charts or interactive graphics.

Aangusgrant
92% match
Loading thumbnail…

Dragon Trainer Monthly - XSS

This example shows a magazine-style article feed titled “Dragon Trainer Monthly,” displaying fetched articles and author bios in a clean, single-column layout. It demonstrates client-side HTML sanitization to prevent cross-site scripting (XSS) attacks. The code uses the Fetch API with `Promise.all` to load article and author JSON data from two external URLs, then renders the content via `innerHTML` after passing it through a `cleanHTML` function that strips `<script>` tags and removes dangerous attributes like `on*` handlers and `javascript:` URLs.

Aangusgrant
78% match
Loading thumbnail…

Monthly publications

The visualization displays monthly publications as horizontal bars split by category, comparing COVID-19-related output against other publications across months. It uses React with D3 v6 scales (scaleBand, scaleLinear, scaleOrdinal) to render SVG rectangles with tooltips and text labels. Data is loaded via d3.csv from a GitHub gist, with each month showing paired bars in red and orange. A color legend identifies the two categories, and axes are constructed using custom React components with D3 tick generation.

BbeauMarko
53% match
Loading thumbnail…

Iterate Data

This example displays a live-updating table of node and value pairs loaded from an external JSON file. It fetches the data via jQuery’s `getJSON` method, then iterates through each item to build a row object with `node` and `value` properties. The assembled rows are passed to the Bootstrap Table plugin, which renders them into an interactive table with sorting and pagination. The visualization emphasizes a simple data-to-table workflow, using jQuery for AJAX and DOM manipulation, and Bootstrap Table for structured presentation.

VVioletVivirand
53% match
Loading thumbnail…

DataClips + D3.js Force-Directed

This example visualizes monthly book purchase amounts as a force-directed node graph, where each node’s size corresponds to spending and color encodes tiers (green, yellow, orange, red) based on dollar ranges. It consumes a JSON dataset from a Heroku DataClip, preprocessed by parsing dates and amounts. Using D3.js v3’s `d3.layout.force`, nodes are positioned with gravity and charge scaled by amount, while SVG circles and text labels render the data. The color scale uses `d3.scale.category10()` for categorical differentiation, and dragging is enabled via `force.drag`.

663anp3ca
52% match
Loading thumbnail…

Gist 749f66edf8a547d2508e958f7ec38e50

This example displays a styled list of articles with titles, publication dates, short descriptions, and "Read More" buttons, built using a Nunjucks template that extends a layout file. It shows how to structure a content listing page by iterating through articles sorted by a helper function, pulling metadata like feature images and date formatting. The template integrates Jinja-style logic with `moment` for date display and uses environment helpers to retrieve local assets. The rendering relies on HTML and CSS classes, with no client-side JavaScript libraries involved.

LLucyI
52% match
Loading thumbnail…

Untitled

The visualization is a bubble chart that maps Medium articles by their category and popularity. Each article is represented as a circle, with its size corresponding to the number of views and its color indicating the category (Design, Development, or Data Science). The chart uses D3 version 4.6, leveraging `d3.forceSimulation` with `d3.forceManyBody`, `d3.forceX`, and `d3.forceY` to position the circles, and `d3.scaleOrdinal` with `d3.schemeCategory10` for coloring. Hovering over a circle reveals a tooltip with the article title, category, and view count. The data is loaded from a CSV file, and the circles are rendered as SVG elements.

Rrjthompson22
52% match
Loading thumbnail…

Loading Data (2020/09)

This example demonstrates interactive exploration of a dataset of 57,000+ articles from Matters, loaded from a remote Arrow file. The interface allows searching by author name, filtering by month, and toggling tag visibility, with results grouped by publication date. It uses Vue 3 for reactive UI components and Apache Arrow’s `Arrow.Table.from`, `Arrow.predicate`, and table filtering with custom predicates to query the columnar data. D3 utilities like `d3.rollups` and `d3.group` aggregate rows, while `d3.utcFormat` formats dates for display.

Tt829702
52% match