Untitled

100%

✓ Published0🌍 Public

Last edited Apr 24, 2021

Created on Apr 24, 2021

This interactive comparison tool lets users explore spatial syntax metrics across multiple building floor plans and models. It uses dropdown menus to select two different models and property columns from a CSV data source, with a third dropdown choosing between scatter plot, box plot, or linear regression views. Plotly renders the visualizations, while d3.v4 reads the CSV data and builds the navigation interface. The page displays two side-by-side charts, allowing direct comparison of selected metrics across different architectural layouts.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Untitled

This example shows a 3D scatter plot comparing two sets of data points across three variables: a1/s1/h1 and a2/s2/h2. The visualization uses two distinct marker styles—one with black outlines and one with pink circles and green outlines—to differentiate the datasets. The code loads CSV data from a GitHub gist using the D3.js `d3.csv` function, then constructs the plot with Plotly's `scatter3d` trace type. The layout removes all margins to maximize the plot area, and the chart is rendered into a div using `Plotly.newPlot`.

AAshrith Kudidhi

73% match

Loading thumbnail…

Untitled

A scatter plot displays the relationship between ground living area in square feet and sale price for individual properties. Each black circle represents a home, with position encoding both variables along linear axes. The visualization uses D3 v4’s `scaleLinear`, `axisBottom`, and `axisLeft` to render the chart in SVG within a React framework. Data loads from an external CSV file via `d3.csv`, plotting 1.5-pixel-radius circles without additional encoding.

TTharun2022

73% match

Loading thumbnail…

Untitled

This example displays a hierarchical dataset as an interactive dendrogram or tree, allowing toggling between the two layouts via radio buttons. The visualization is built with D3 v4’s `d3.tree()` and `d3.cluster()` layout algorithms, animated with `d3.transition()` for smooth morphing of node positions and link paths. Data comes from `treedata.csv` containing a hierarchical structure with leaf values. The SVG rendering uses colored circles for internal and leaf nodes, with text labels and cubic Bézier diagonal links, all within a React framework.

Rrca0214

71% match

Loading thumbnail…

Untitled

This example renders a 3D scatter plot from a CSV dataset using Plotly.js within a D3 v6-loaded HTML page. It visualizes two series of coordinates—x1/y1/z1 and x2/y2/z2—as distinct marker groups with differing colors and opacity. The code loads data via D3’s `d3.csv` and transforms rows using a custom `unpack` function to extract columns for the Plotly traces, which are configured as `scatter3d` markers. The layout margins are set to zero to maximize the plot area.

Ssalimjivani

71% match

Loading thumbnail…

Untitled

This example displays two sets of three-dimensional scatter points from the Plotly `3d-scatter.csv` dataset. It shows the distribution of data points in x, y, and z coordinates, comparing two distinct groups differentiated by marker style—one with translucent, bordered circles and another with solid gray circles. The code uses the Plotly JavaScript library, called via `Plotly.newPlot`, along with `d3.csv` to fetch and parse the data. The `unpack` function extracts each coordinate column for the traces. A zero-margin layout removes all surrounding space.

LLG0498

71% match

Loading thumbnail…

Untitled

This visualization displays two sets of three-dimensional scatterplot data as grouped point clouds, with one trace rendered in warm red tones and the other in neutral gray. Built using Plotly.js within an HTML page, the code loads a CSV dataset from a GitHub repository via the D3.js `d3.csv` function, then maps columns to x, y, and z coordinates. The markers use a fixed size of 12, partial opacity, and custom line colors, while the plot layout strips all margins for a clean, full-frame view.

SSravan1888

71% match

Loading thumbnail…

Untitled

This interactive scatterplot explores yearly changes across seven data categories (A–G), displaying each category as a dot plotted along an ordinal x-axis of bars. Users navigate between years with left and right arrow keys, with an automatic playback feature advancing through the dataset. Built with React and D3.js v3, the visualization uses SVG rendering with `d3.scale.ordinal`, `d3.svg.axis`, and `d3.scale.category10` for color encoding. Data loads from an external CSV file, and the chart includes keyboard event handling and dynamic axis updates.

TThandolwethu Shakes Dlamini

71% match

Loading thumbnail…

Untitled

A 3D scatter plot visualizes five product categories—Garment, Electronics, Decoration, Fitness, and Footwear—using three axes: Number of Orders, Sales, and Available in Stock. Each category appears as a distinct colored marker, encoding the relationship between order volume, revenue, and inventory across the dataset. The code loads a CSV via d3.csv, filters rows by category using a custom unpack function, and constructs five Plotly trace objects of type scatter3d. These traces are passed to Plotly.newPlot, which renders the interactive chart inside the designated div with a minimal margin layout.

Llibramanju

71% match