S

shatomouimena

@shatomouimena·19 public vizzes

Loading thumbnail…

Untitled

This example demonstrates VizHub's ability to load D3 from UNPKG and use ES6 modules for local code organization. It renders a message to the page using standard DOM manipulation, with styling applied via an external stylesheet. The code includes a volume dataset file containing a 32x32x32 grid of values, though the visualization itself is not implemented in the provided JavaScript, which only displays a static text greeting. D3 is loaded globally from the CDN but not actively used in the current rendering logic.

Loading thumbnail…

Untitled

This example shows a small force-directed network of six nodes (A–F) connected by weighted links, with node color encoding gender and labels revealing name and profession on hover. It includes an adjacency matrix table above the visualization. The code uses D3 v7's `d3.forceSimulation` with link, charge, and center forces, rendering nodes and links as SVG elements. Nodes are draggable via `d3.drag`, and the data comes from a static JSON file.

Loading thumbnail…

Untitled

This example shows a force-directed network graph of six nodes (A-F), each colored by gender and labeled with an ID, with link thickness representing connection strength. The nodes are draggable and expand on hover, revealing tooltips with each person’s profession. The visualization uses D3 v7’s `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to position elements, with `d3.drag` for interaction and `d3.scaleOrdinal` for categorical colors. Data is loaded from a local JSON file via `d3.json`. A static 6×6 adjacency matrix above the SVG complements the dynamic graph.

Loading thumbnail…

Untitled

This example shows a small interactive force-directed network of six nodes labeled A through F, connected by six weighted links. The data from a JSON file includes attributes such as gender and profession, though the visualization primarily focuses on node connections and link thickness proportional to edge value. Users can drag nodes to reposition the network. The code uses d3.forceSimulation with centering, charge, and link forces, rendering nodes as SVG circles with text labels and titles via d3.

Loading thumbnail…

Untitled

This example shows a small directed force-directed network graph with six olive-colored nodes and four links of varying thickness, where each node is labeled with its ID. It uses `d3.forceSimulation` to layout the graph, with a `d3.forceLink` for edges, `d3.forceManyBody` for repulsion, and a center force to position nodes. Node positions update on each tick, and links are drawn as lines with stroke-width proportional to the square root of the link value. Drag handlers via `d3.drag` allow the user to reposition nodes. The graph data comes from a JSON file containing nodes A–F and six links; rendering is in SVG within a 500×500 viewport.

Loading thumbnail…

Untitled

This example shows a small network of six nodes connected by six links, revealing an undirected graph structure. The nodes represent individuals with attributes like gender and profession, while links carry a numeric distance value. A D3 force-directed layout positions the nodes using `d3.forceSimulation` with link, charge, and center forces. The code loads data from a local `data.json` file and renders the result as an SVG with circles for nodes and lines for edges. The simulation updates positions on each tick, though link distances are not explicitly used to set edge lengths.

Loading thumbnail…

HeatMap

This heatmap visualizes automobile specifications from a small dataset, displaying cars along the x-axis and attributes such as engine size, speed, power, and price along the y-axis. Cell colors, rendered with the `d3.scaleSequential` and `d3.interpolateInferno` color scale, encode the power value of each car. The chart is built with D3 v4, using `d3.scaleBand` for axes and SVG rectangles for cells. Interactive tooltips appear on hover, showing the car’s power value.

Loading thumbnail…

Heat Map

This heat map visualizes five car models from a CSV dataset, plotting engine displacement (hubraum) on the x-axis and car name on the y-axis, with cell colors encoding horsepower (leistung) using conditional fills (SteelBlue, LightSteelBlue, and Orange). Built with D3 v7 and SVG rendering, the code uses `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis, and `d3.axisBottom`/`d3.axisLeft` for the axes. The cells are drawn as rectangles with attribute-based data binding, and the legend text explains the maximum power and speed values.

Loading thumbnail…

making a Bar Chart

This bar chart displays population data for ten countries, with horizontal bars sorted by country name. Using D3 v7, the visualization scales population values linearly and country names with a band scale, rendering SVG rectangles. The chart includes axis functions `axisLeft` and `axisBottom` to label the categorical and quantitative dimensions, with data loaded from a local CSV file.

Loading thumbnail…

lets make a face with d3.js

This example builds a cartoon face in SVG using D3.js v7 and React. It draws a yellow circular head, two black eyes, and a curved mouth path, all positioned within an SVG container. The code uses D3’s `select` and `arc` APIs to generate the mouth’s arc shape, while circles are created via appended SVG elements. The face is centered using a transform, and the rendering relies entirely on static SVG primitives with black strokes for outlines.

Loading thumbnail…

Fork of Hello VizHub

This fork of Hello VizHub demonstrates a minimal D3.js setup with ES6 modules. It imports the `select` function from D3 and a local `message` constant from `myMessage.js`, then uses `select('#message').text()` to display “Hello VizHub!” in a centered, large-font div. The example loads D3 v5 from UNPKG and bundles local JavaScript for a simple text-only rendering.

Loading thumbnail…

lets make a face with d3.js

This example demonstrates how to construct a face using basic geometric shapes in D3.js, starting with a solid blue background applied to the SVG canvas. The code selects the SVG element and sets its background color using D3’s selection and style methods. It uses the vanilla D3 v7 library, with the SVG rendering approach, and the data is purely procedural—shapes and coordinates are hardcoded in the script. The example serves as a minimal template, showing how to initialize a D3 visualization in an HTML page.

Loading thumbnail…

shapeswith SVG and css

This example demonstrates basic SVG shapes—circles, rectangles, lines, and paths—rendered on a 900×500 canvas with CSS styling applied via an external stylesheet. It shows how SVG elements can be grouped using `<g>` transformations like scaling and translation, with individual shapes colored through fill and stroke attributes alongside CSS-defined font and margin rules. The code uses plain SVG markup within an HTML page, linked to a `style.css` file, and relies on React as the framework for the surrounding project structure. Shapes appear in varied positions and colors, including a red circle, green rectangle, and stroked paths, illustrating fundamental SVG composition.

Loading thumbnail…

cars Report

This example displays a text-based car report listing vehicles under $2,000, formatted as lines with year, make, model, and price. The application uses React to render the page structure, while custom JavaScript functions filter and map the car data using array methods like `filter` and `map`. The data is embedded as a JSON string, parsed with `JSON.parse`, and the final report is written directly into a `<pre>` element via `textContent`, avoiding any visual chart or graph.

Loading thumbnail…

cars Report

This report displays a simple HTML page that injects the text "Hello world" into a pre-formatted element. Built with React and bundled into a single file, the application imports car data from a static `cars` module, though the visualization does not render it. Instead, the interface consists of a message element and an empty root div, demonstrating a minimal React starter setup. The code relies on standard DOM manipulation, using `document.getElementById` to set text content, without any charting or data-processing libraries.

Loading thumbnail…

Fork of React Starter

This example demonstrates a single-page React application that displays the text "Hello React!" centered on the screen. The render uses React 16.13.1 and ReactDOM to mount a functional component into the root element defined in `index.html`. The component returns a `div` with a CSS class that applies a large font size via inline styles. The page loads the React libraries from unpkg and renders the message through the `ReactDOM.render` call.

Loading thumbnail…

Fork of Hello VizHub

This fork of Hello VizHub demonstrates a minimal D3.js setup with ES6 modules. It imports the `select` function from D3 and a local `message` constant from `myMessage.js`, then uses `select('#message').text()` to display “Hello VizHub!” in a centered, large-font div. The example loads D3 v5 from UNPKG and bundles local JavaScript for a simple text-only rendering.

Loading thumbnail…

Fork of HTML Starter

This example displays a large, centered “Hello HTML!” message using plain HTML and CSS. The code defines a single message `<div>` with a font size of 13em and applies text alignment through a CSS class. It serves as a minimal, static demonstration of basic web structure, requiring no external libraries or data. The page renders entirely through the browser’s default HTML and CSS parsing, with no JavaScript or dynamic behavior involved.

Loading thumbnail…

Cars Reports

The visualization presents a grid of small-multiple car charts titled "Cars Reports," with each cell displaying a simple line or bar representation of automotive data. It uses D3 v7, loaded via a CDN, to generate the SVG-based graphics. The page layout is centered with a massive 13em font size applied to body text, though the visible content relies on D3’s selection and scale methods to draw the charts. The example demonstrates basic D3 setup and chart rendering within a minimal HTML structure.