A

Alsaxian

@Alsaxian·17 public vizzes

Loading thumbnail…

JS Bin

This example demonstrates JavaScript destructuring and template literal syntax, contrasting a concise ES6+ implementation with its transpiled ES5 equivalent. The page’s source code includes a hand-written JavaScript version using `const` and arrow functions, alongside a generated `'use strict'` script that employs `var` and helper functions like `printName` to achieve the same console output. The data being processed is a simple inline object literal with a name and age property. The visualization is purely textual, relying on the browser’s console to show the logged results of both code paths.

Loading thumbnail…

JS Bin

This example demonstrates JavaScript destructuring of objects through a side-by-side comparison of original source code and the compiled output. The `index.html` file contains two script blocks: the first shows transpiled ES5 code using `var` declarations and manual property access, while the second shows the original ES6 source with `const` and destructuring assignment. The code logs names from objects to the console, illustrating how ES6 destructuring patterns translate into traditional variable assignments. The visualization uses plain HTML and JavaScript with no external libraries.

Loading thumbnail…

JS Bin

This example demonstrates JavaScript object spread and filtering with the rest operator. The code defines a `person` object, creates a `newPerson` object that copies its properties and adds a `gender` field, then logs the result to the console. It also defines a `filter` function that uses the rest parameter to collect all arguments and the `Array.prototype.filter` method to return only elements equal to `1`. The output, logged via `console.log`, shows the new object and the filtered array.

Loading thumbnail…

Shiyanlou Chapter 2 last exercice

This example shows how to find the maximum and minimum values in a fixed array of integers, producing a simple console output. It uses the Java Stream API with `java.util.Arrays.asList(...).stream()` and the `max` and `min` terminal operations, comparing elements with `Integer::compare`. The code also includes commented-out alternatives using `Arrays.stream(data).min().getAsInt()` and an `Arrays.sort` approach, but only the stream-based version executes. The data source is a hardcoded array of nine integer values, and the rendering is text-based via `System.out.println`.

Loading thumbnail…

TP4

This visualization displays the results of an anomaly detection model on text data, showing true positives, true negatives, false positives, and false negatives in a two-dimensional space. The data undergoes TruncatedSVD reduction to 16 dimensions, followed by PCA and t-SNE projections to two dimensions. Points are colored by classification outcome—green, white, red, and orange—against a blue contour background representing the IsolationForest decision function. The code uses scikit-learn's TruncatedSVD, PCA, and TSNE, along with matplotlib's contourf and scatter for rendering.

Loading thumbnail…

clustering

This example applies scikit-learn clustering to crime data, displaying how K-means and agglomerative clustering group observations. It first shows K-means with three clusters inside a pipeline that standardizes the data and reduces it to three principal components, then displays the resulting cluster centers and cumulative explained variance. A separate step uses AgglomerativeClustering with Ward linkage to assign four clusters to city data projected onto its first two principal components. The visualization relies on standard scaler, PCA, KMeans, and AgglomerativeClustering from the sklearn.cluster and sklearn.pipeline modules.

Loading thumbnail…

FanceGrippe2014

A choropleth map of French metropolitan regions displays weekly influenza case counts for 2014, shaded on a five-color quantized scale. A slider selects the week, updating region colors via `d3.geoPath` and `d3.scaleQuantize` from CSV data loaded with `d3.csv` and GeoJSON shapes. Hovering a region reveals its name and value in a tooltip div.

Loading thumbnail…

FranceGrippe2014

An interactive choropleth map of French regions shows weekly influenza case counts for 2014, with a slider allowing users to step through the year’s 52 weeks. A color scale from light to dark green encodes case numbers per region, while a tooltip reveals the exact value on hover. The visualization uses D3 v4’s `d3.geoConicConformal` projection, `d3.geoPath`, and `d3.scaleQuantize`, loading regional boundaries from `regions.json` and case data from `GrippeFrance2014.csv`. A second red-to-white scale colors region borders.

Loading thumbnail…

TP2Devoir

This example displays a simple time series line chart of seven monthly data points from a small JSON dataset, plotting values across dates. The chart encodes values with a black line, light-grey circular markers, and faint dashed vertical guides. Hovering over a circle turns it red, reveals its corresponding value label, and highlights its dashed guide line. The visualization uses D3 v4’s `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, and `d3.timeParse`, rendering to SVG with interactive mouseover and mouseout events.

Loading thumbnail…

DecemberCafeChap7

Five dark blue rectangles form a small horizontal bar chart, with bar widths proportionally mapped from a five-point numeric dataset. The visualization uses two side-by-side SVG groups and incomplete axis attempts, but the committed code renders an x-axis at the bottom and a y-axis on the right, both using d3.axisBottom and d3.axisLeft with d3.scaleLinear. The y-axis placement appears misaligned, offset beyond the chart’s visible area. The example demonstrates basic data binding, scales, and axis creation in d3 v4 with SVG rendering.

Loading thumbnail…

DecemberCafeChap5Chap6

This example shows two D3.js visualizations in a single page. The first is a basic histogram with five steel-blue rectangles, each with a width proportional to a data value. The second chart displays dark-blue bars whose widths are mapped through a linear scale, created with `d3.scaleLinear`, from a small dataset. The code also demonstrates the use of `d3.min`, `d3.max`, and `d3.scaleOrdinal` for color mapping, though the ordinal scale is not directly applied to the rendered bars. Both charts are drawn as SVGs, generated from hardcoded arrays in the script.

Loading thumbnail…

DecemberCafeChap3

This example demonstrates basic DOM manipulation with D3 v4, showing how to select and style individual elements or groups using CSS selectors such as `select("body").select("p")` and `selectAll(".Rhone")`. The code applies colored styles to fruit-named paragraphs—apples become red, all paragraphs become green, and specific classes or IDs receive brown or purple—before removing and appending elements. It also uses `d3.select("body").append("p").text()` to add a new paragraph and `insert("p", "#Lyon")` to place one before another, ultimately removing an element with `remove()`. The visualization is a simple HTML page with static text content.

Loading thumbnail…

DecemberCafeChap2

This example demonstrates how D3’s data join can rebind HTML paragraphs to different data arrays. Three static <p> elements initially display Apple, Pear, and Banana. Using `d3.selectAll("p").datum(str)`, the text is briefly rewritten with a single string "France" and an index-based label. Then `p.data(dataset)` rebinds the paragraphs to an array of three French phrases, replacing the text with those values. The visualization shows how `.datum()` and `.data()` control the binding and rendering of text content in D3 v4.

Loading thumbnail…

Gist ff898d829474754ee41930e78894fa7e

This example demonstrates a Markdown editor’s multi-format documentation capabilities, showcasing syntax for LaTeX equations, highlighted Python code, flowcharts, sequence diagrams, Gantt charts, and tables. The document mixes inline math with a codecogs image URL for a formula, while leveraging fenced code blocks to invoke specific rendering engines like flow, seq, and gantt. It also includes a Todo list and a Bash command snippet, illustrating how structured text can be transformed into interactive diagrams and formatted output.

Loading thumbnail…

simple bar chat dataset

This example shows a semicolon-delimited dataset of ten name–value pairs rendered as a basic bar chart. It first loads the CSV file using `d3.text` and parses it with `d3.dsvFormat`. Two linear scales, `d3.scaleLinear`, define the x- and y-domains after data arrival. Bars are drawn as SVG rectangles with strokes, and each category label appears as an SVG text element. The visualization demonstrates delayed domain setting and basic data binding with D3 v4.

Loading thumbnail…

D3 bar chart without data-binding

A static SVG bar chart displays twenty purple rectangles of varying heights, representing an inline array of numeric values. The code uses D3 v4 scales, `d3.scaleLinear`, to map data values to pixel heights and positions, though it does not use the data join's update or exit selections. Bars are appended via `selectAll("rect").data(data).enter()`, with each rectangle’s height and y-coordinate computed from the scale; the x-position is calculated manually from the index. No interaction or animation is present, and the chart is rendered with fixed SVG dimensions.

Loading thumbnail…

1 try

A single SVG canvas displays a static text element with the message "Edit the code below to change me!" positioned near the top-left. The example uses D3.js v4 to select the body element, append an SVG with fixed dimensions, and render the message using the `text` method. The visualization is created with `d3.select("body").append("svg")` and sets the text's font family to monospace. No data source is involved; the example serves as a minimal starting point for D3-based SVG graphics.