Nathannous

@Nathannous·13 public vizzes

Untitled

This example visualizes the character co-occurrence network from *Les Misérables* as a force-directed graph. Nodes represent characters, colored by group, with links sized by interaction weight. The visualization uses D3 v4’s `d3.forceSimulation` with link, charge, and center forces to position elements, while SVG circles and text render the nodes and labels. Data loads from a local `miserables.json` file, and nodes support dragging via `d3.drag`.

Apr 28, 2020

Loading thumbnail…

Untitled

This example visualizes the character co-occurrence network from Victor Hugo’s *Les Misérables* as an interactive force-directed graph. Nodes represent characters, colored by group, while links show relationships with thickness scaled by connection weight. The visualization uses D3 v4’s `d3.forceSimulation` with link, charge, and center forces to position elements, and `d3.drag` enables node dragging. Rendered in SVG, it labels each node with the character’s name and includes hover tooltips. Data comes from the bundled `miserables.json` file.

Apr 28, 2020

Loading thumbnail…

Untitled

This interactive network graph visualizes connections between movies, with each node representing a film and links showing relationships between them. The visualization uses d3.v3 to render the force-directed layout, with nodes colored and sized by their calculated score and level values. Clicking a node displays additional movie details including title, cast, director, and cover image in a side panel. The implementation reads from a movie-network.json data file and uses d3.forceSimulation for the physics-based node positioning and link rendering.

Apr 28, 2020

Loading thumbnail…

Untitled

This example visualizes the 148 CSS named colors as points positioned by their RGB values, with the color of each point matching the named color it represents. Using D3’s `d3.forceSimulation`, the points are arranged in a loose cluster, while a label appears on hover to identify the color’s name. The data is parsed from a CSV file listing color names and hex codes, with the background and interactions powered by D3 selections and event handlers. The layout is computed entirely in the browser, offering a playful, exploratory map of the color space.

Apr 28, 2020

Loading thumbnail…

PopCha! Movie Network

This example visualizes a movie network derived from user interactions in the PopCha! mobile app, where nodes represent films and links indicate similarity based on how users pick them. The force-directed graph, built with D3.js layout and rendering, lets users hover over nodes to see titles and click to open a details panel. The code uses `d3.layout.force` for layout, SVG for rendering, and scales for zooming, with movie data loaded from a JSON file.

Apr 28, 2020

Loading thumbnail…

Untitled

This example visualizes a network of company directors and enterprises as a force-directed graph. Nodes represent individuals (labeled “dirigeant”) and companies (identified by French SIREN numbers), with links drawn between them to show relationships. The visualization uses d3.forceSimulation to compute node positions, updating the canvas on each tick via d3.drag for interactive node manipulation. Rendering is performed using the Canvas 2D API, where links are drawn as lines and nodes as circles. Data is loaded from a local JSON file.

Apr 27, 2020

Loading thumbnail…

World Countries Tree

This interactive tree diagram visualizes the hierarchical structure of world countries, organized by continent and subregion. Users can pan and zoom through the layout using the d3.zoom behavior. The visualization uses d3.tree and d3.hierarchy to compute the layout, with d3.linkHorizontal generating the curved connecting paths. Text labels display country names with font sizes varying by depth level. The data, loaded from a JSON file via d3.json, is rendered as SVG elements with styling applied through CSS, including a Playfair Display font for the labels.

Apr 27, 2020

Loading thumbnail…

d3 Chart Nodes Demo [yFiles for HTML]

This example combines d3.js bar charts with yFiles for HTML node styles to visualize dynamic data on an interactive graph. Each node displays a sparkline-style bar chart that updates every 500 milliseconds with new random data, simulating live server updates. The D3ChartNodeStyle class uses d3.scaleBand, d3.scaleLinear, and d3.interpolateHcl to render the bars, while yFiles manages the graph layout, edges, and user interactions like zooming and panning. The sample graph contains city nodes connected by edges, with labels positioned above each node.

Apr 27, 2020

Loading thumbnail…

Why learning HTML ?

This example demonstrates a minimal HTML page structure titled "Why learning HTML ?" that presents a simple cars report. The page displays a heading and a three-item list, with the first list item given special emphasis through a CSS class. The code uses plain HTML tags such as `h1`, `ul`, and `li` for content organization, and a linked external stylesheet (`styles.css`) to apply styling. The stylesheet sets a large monospace font for the body and doubles the font size of elements marked with the `highlighted` class, showcasing basic CSS selectors and property declarations.

Apr 27, 2020

Loading thumbnail…

Cars Report

This example demonstrates generating a text-based car report by filtering a list of used vehicles under a price threshold and formatting each entry with year, make, model, and cost. It loads data as a JSON array via the `getCars` function, which returns a Promise that simulates async fetching with `setTimeout`. The report is built using `Array.filter`, `map`, and `join` in `generateReport`, with `formatCar` handling string interpolation. The final output appears in a `<pre>` element after a brief “Loading…” state, showcasing modular JavaScript with ES6 exports and imports.

Apr 27, 2020

Loading thumbnail…

Test

This example demonstrates how to build a simple text-based report from a dataset of cars using JavaScript modules and asynchronous functions. It defines a `getCars` function that returns a Promise resolving to a parsed JSON array of car objects after a simulated delay, then uses `filter` and `map` to generate a formatted list of vehicles under a specified price threshold. The report is rendered into a `<pre>` element on the page through the `textContent` property. The code showcases ES6 module syntax with `import`/`export`, destructuring, template literals, and Promise-based data handling.

Apr 26, 2020

Loading thumbnail…

Cars report

This example presents a minimal "Cars report" visualization, displaying static text on a webpage. The code uses React as the framework, with the primary rendering occurring through an HTML file that applies a large font size to center the text "Hello HTML" on the screen. The JavaScript file defines a simple message variable but does not integrate it into the page. No data or car-related information is shown, as the files contain only the basic structural and styling setup for a blank starter project.

Apr 26, 2020

Loading thumbnail…

World Countries Tree

This interactive visualization displays the hierarchical structure of world countries organized by continent and subregion. Using D3.js v5, it renders a horizontal tree diagram in SVG with collapsible nodes, where circles represent countries and links show parent-child relationships. The code employs `d3.tree()` for layout computation and `d3.linkHorizontal()` for path generation, with data loaded from a JSON file containing geographic classifications.

Apr 26, 2020