Skip to main content
SimilarExport ZIP
100%

Data Visualization Project

✓ Published0🌍 Public
Aav.dj.2000@gmail.com
Last edited May 1, 2023
Created on Apr 30, 2023
Forked from HTML Starter

This example presents a gallery of visualizations, beginning with an embedded Tableau public dashboard and including multiple iframes of D3-based charts such as bar, pie, scatter, tree, and 3D bar graphs hosted on VizHub. The page also references Google Colab and Figma-embedded screenshots. Built with React, the code uses standard HTML, CSS, and JavaScript to lay out these components, with the Tableau Viz API script loading the interactive dashboard and VizHub iframes displaying the individual charts.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Table

This interactive visualization gallery presents a collection of chart types, including bar charts, pie charts, line charts, and scatter plots, all built using D3.js v5. Each chart is rendered as an SVG element and can be selected from a dropdown menu, with the underlying data displayed in a preview table. The example uses various D3 APIs such as `d3.scaleBand`, `d3.axisBottom`, and `d3.pie` to create the visualizations, with some charts featuring animation and tooltip interactions. Data is loaded from a CSV file and processed by the dashboard module.

JJoker-tr
77% match
Loading thumbnail…

A4 - Introduction to D3

This example introduces D3.js through a collection of four interactive visualizations: a bar chart, a scatter plot, a boxplot, and a strip plot with a logarithmic scale. Each chart uses D3’s core modules—`d3.scaleLinear`, `d3.scaleLog`, `d3.axisBottom`, and `d3.axisLeft`—to map data to pixel coordinates and render SVG elements like `rect`, `circle`, and `line`. The visualizations draw from datasets embedded in the accompanying script files, with the boxplot summarizing distributions via quartile calculations. The code is structured as separate VizHub projects linked from a single HTML page, demonstrating basic chart construction without external data files.

DDuc Pham
76% match
Loading thumbnail…

Data Visualization

This example displays a simple dashboard that presents a hello message from the author and summarizes a dataset loaded from a GitHub gist. The text announces the file’s approximate size in kilobytes, the number of rows, and the column count. The visualization uses D3.js version 7, specifically the `d3.csv` and `d3.csvFormat` APIs, to fetch and parse the CSV data and then inject the computed summary into an HTML `<pre>` element. The page also embeds an external SVG image and relies on basic CSS for styling.

Hharika-1929
75% match
Loading thumbnail…

Telsa Visualizations

This gallery presents a data-visualization project centered on Tesla, offering a hub of buttons that link out to different visualization frameworks. The main page uses a background image of charts and simple HTML/CSS for styling and navigation. The code provides direct access to separate visualization implementations built with Tableau, Python, and D3, though the specific content of those linked pages is not shown here. The interface itself is built with standard JavaScript and CSS, enabling user interaction to switch between the different visualization tools.

GGogineni44
74% match
Loading thumbnail…

Untitled

This example presents an interactive data visualization built with the d3.v4 library and embedded in a React framework. It renders a graph within a designated div element, loading D3.js from a CDN. The visualization appears to be a network or node-link diagram, though the specific data source is not identified in the provided files. The code sets up a blank canvas for the visualization, and the actual plotting logic would use D3’s force simulation or layout functions to position elements. The implementation relies on standard HTML and JavaScript, with CSS handling the visual styling.

SSheela2930
74% match
Loading thumbnail…

vizualizing data with react

This example displays a pie chart of CSS named colors, where each slice represents a color name and is filled with its corresponding RGB hex value. The chart is rendered as an SVG using React with D3.js utilities, specifically `d3.csv` to load the color data from a remote CSV file, `d3.pie` to compute the pie slices, and `d3.arc` to generate the path geometry. React's useState and useEffect manage the data loading asynchronously, and the visualization centers itself within a 960x500 viewport.

11993-INDALKAR
74% match
Loading thumbnail…

A3 - Visualizing Distributions using P5

This example visualizes distributions using three interactive P5.js plots: a histogram, a box plot, and a strip plot, each embedded as separate VizHub links. The histogram displays the frequency of numeric values across bins, the box plot summarizes the data’s median, quartiles, and outliers, and the strip plot shows individual data points along a single axis. The visualizations use P5.js for canvas rendering and drawing shapes, with data organized into arrays and processed for statistical summaries. The page is built with plain HTML and CSS links, referencing external VizHub projects for each plot.

DDuc Pham
74% match
Loading thumbnail…

D3.js Tutorial Project

This example is a comprehensive D3.js tutorial project that demonstrates a progression of visualization techniques, from basic data binding to SVG drawing and animation. It includes a bar chart of country populations, scatter plots, line and area charts showing temperature data, and an animated face constructed with SVG shapes using `d3.arc` and transitions. The code uses D3 v5 with React, loading data from CSV and JSON sources, and renders visualizations through SVG elements with axis labels and styling.

OOskar Weinfurtner
73% match