fresh block

100%

✓ Published0🌍 Public

Last edited Jul 2, 2018

Created on Jul 2, 2018

This example visualizes a high-dimensional random dataset by projecting it into two-dimensional space. The visualization uses TensorFlow.js and its `tfjs-tsne` library to compute a t-SNE embedding, which is then printed as coordinates. The code generates 200 data points with 10 features each via `tf.randomUniform`, runs the embedding computation asynchronously, and outputs the resulting x, y coordinates using the optimizer's `coordinates()` method. The visualization is built with d3.v4 for page layout, though no graphical rendering is implemented; the output is numeric coordinate data.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

tSNE + Tensorflow

This example uses a TensorFlow-based t-SNE optimizer within a webpage to reduce 200 random 10-dimensional points to a 2D embedding. The code initializes a `tf.randomUniform` tensor, passes it to `tsne.tsne()`, and calls `compute()` to produce coordinates, which are printed to the console. The visualization relies on the TensorFlow.js and tfjs-tsne libraries, with D3 v4 loaded but not actively used for rendering in this minimal setup.

MMNoichl

78% match

Loading thumbnail…

test-tsne

This example demonstrates how to project high-dimensional data onto a two-dimensional plane using t-SNE (t-Distributed Stochastic Neighbor Embedding). The visualization displays the resulting coordinates as small circles within an SVG canvas, with each point representing an item from a small dataset of twelve samples. The t-SNE algorithm is implemented through the custom `tsnejs` library, which processes pairwise distances calculated from the input data. The rendering uses D3.js v4 to create the SVG elements and position them according to the computed embedding coordinates.

MMNoichl

76% match

Loading thumbnail…

fresh block

This example visualizes a geographic or map-based dataset for the year 2018, using a custom JavaScript component embedded in a responsive container. The visualization is rendered through a dedicated script that likely leverages D3.js v4, as indicated by the imported d3.v4.min.js library. It employs D3’s force simulation or projection techniques to display spatial data, though the exact method is not visible in the code snippet. The page uses a full-viewport fixed layout, with the chart container supporting lazy loading and responsive behavior. The data source originates from a GitHub-hosted gist, and the implementation relies on standard DOM manipulation via D3’s selection and data-binding APIs, without additional frameworks like Three.js or Canvas getImageData.

GGerardoFurtado

70% match

Loading thumbnail…

t-SNE, a force, and Urquhart graph

This example visualizes 300 randomly generated circles, each with five independent dimensions (red, green, blue, opacity, and radius), projected into 2D space using t-SNE. The t-SNE computation runs in a JavaScript worker via the science.ai implementation, while the visual result is refined by a force simulation that both follows the t-SNE positions and applies collision avoidance between circle centers. The layout is rendered on a Canvas and enhanced with an Urquhart graph, which draws edges derived from the Voronoi diagram of the projected points, highlighting the local neighborhood structure of the high-dimensional data.

PPhilippe Rivière

67% match

Loading thumbnail…

fresh block

This example visualizes a network of interconnected nodes, likely representing user connections or data relationships, using a force-directed layout. The visualization employs D3’s `d3.forceSimulation` to compute the physics of node positions and link forces, while `d3.select` and SVG elements handle rendering. The scene is drawn against a dark background, with nodes as circles and links as lines, suggesting a real-time or interactive graph. The code also integrates a canvas-based `getImageData` operation, possibly for pixel-level effects or hit detection, though the primary display relies on SVG. Data appears to originate from a static gist, emphasizing structure over live data feeds.

BBolitto

67% match

Loading thumbnail…

fresh block

This example shows a simple line chart of 21 random data points, with each point represented as a circle. The visualization uses D3.js v4 to generate an SVG, with a black line connecting the dots and interactive hover effects that turn the circles red on mouseover and fade back to black on mouseout. The code applies the margin convention, scales the data with `d3.scaleLinear`, and uses the `d3.line` generator to draw the path. Axes are rendered with `d3.axisBottom` and `d3.axisLeft`, and the chart fills the browser window.

663anp3ca

66% match

Loading thumbnail…

fresh block

This visualization displays a set of genomic intervals as green rectangles along a linear x-axis, with each rectangle’s width corresponding to the difference between its start and stop coordinates from a small JSON data file. The rectangles are all positioned at the same y-coordinate and height, indicating that only horizontal position and length carry meaning. The code loads data via `d3.json`, appends a 960×500 SVG canvas, and uses `d3.select("svg").selectAll("rect")` to bind the dataset to rectangle elements, setting their x, width, and fill properties based on the data fields.

LLisaPicado

66% match

Loading thumbnail…

fresh block

This example displays a circular arrangement of ten circles, each with a radius of 50 pixels, positioned around a central point using a computed angle function. The visualization is built with D3.v4, rendering SVG elements onto a 960x500 canvas, with circles placed via an angular distribution formula. The code includes a mouseover event that is intended to change the circle's style, though the specific styling action is not defined. The data comes from a simple generated range of ten values.

GGJHazelaar

66% match