Skip to main content
Log in
K

kalokli8

@kalokli8·13 public vizzes

Loading thumbnail…

W3.CSS Template

This example presents a business consultancy landing page built with the W3.CSS framework, featuring a slideshow of promotional images and sections describing services. It uses Bootstrap’s progress bar component and custom CSS for styling, while the slideshow relies on manual image swapping via `mySlides` classes. The page showcases company information, government grant assistance programs, and technology voucher details, with content embedded directly in the HTML and links to external stylesheets.

Jul 7, 2020
Loading thumbnail…

SWCS Group

This example renders the live homepage of SWCS Group, a Hong Kong construction company, as a screenshot-like SVG. The HTML page is fetched and embedded directly, preserving its original styles, multilingual links, and Google Analytics scripts. The visualization uses React to render the foreign content into an SVG container, effectively displaying the website’s layout and text. It relies on the browser’s DOM parsing and React’s rendering pipeline, with no custom data processing or interactive elements beyond the static page capture.

Jun 29, 2020
Loading thumbnail…

HTML Starter

This example demonstrates the simplest possible web page using plain HTML and JavaScript, without any external libraries or frameworks. It displays the text "Hello HTML" centered on the screen with a massive font size via inline CSS. The page also includes a script that logs "Hello JavaScript!" to the browser’s developer console. The code uses basic DOM elements and the `console.log` API, serving as a minimal starting point for web-based projects.

Jun 29, 2020
Loading thumbnail…

Force directed graph

This example shows a force-directed graph of character co-occurrence data from Les Misérables, rendered as an interactive SVG animation. It uses d3.forceSimulation to position nodes and links, with draggable circles representing characters and colored convex hulls drawn around groups of three or more nodes sharing the same group attribute. The hulls are generated using d3.polygonHull and closed curves, with a dropdown to switch between curveBasisClosed, curveCardinalClosed, curveCatmullRomClosed, and curveLinearClosed. The visualization is built with D3 v4 and React, loading graph data from a JSON file.

Apr 8, 2020
Loading thumbnail…

Force directed graph

This interactive force-directed graph visualizes a network of connections from an `event.json` data file, where nodes represent entities and edges show relationships between them. The visualization uses D3.js v4’s `d3.forceSimulation` API to calculate node positions based on link strength, charge repulsion, and a center force, while rendering nodes as draggable circles and connections as lines. Users can adjust the scale of the groups using an HTML range slider, which updates the visualization dynamically through the `updateGroups()` function. The graph also includes node labels and tooltips, with SVG-based rendering for crisp display.

Apr 8, 2020
Loading thumbnail…

Untitled

This visualization shows the network of character interactions from Victor Hugo’s *Les Misérables*, using a force-directed layout to cluster characters into groups by their relationships. Nodes represent characters and are colored by their group; links represent co-appearance, with thickness proportional to interaction weight. The example uses D3 v4’s `d3.forceSimulation` for the physics engine, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to shape the layout, and `d3.drag` for interactive node dragging. Data comes from the included `miserables.json` file, rendered as SVG elements.

Apr 8, 2020
Loading thumbnail…

Untitled

This example visualizes a force-directed network graph, showing nodes labeled with names and connected by links of varying thickness, using an SVG rendering approach. The graph layout is computed with `d3.forceSimulation`, applying `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to position nodes and edges dynamically. Data is loaded from a JSON file containing edge and node definitions, with colors assigned via a `d3.scaleOrdinal` scheme. The nodes are draggable, and the simulation updates positions on each tick, with link thickness reflecting edge values.

Apr 5, 2020
Loading thumbnail…

Customizing Axes

This example demonstrates customizing axis elements in a D3.js visualization within a React framework. The SVG-based chart uses d3.axisBottom and d3.axisLeft to render the x and y axes, with custom tick formatting and styling applied to improve readability. The code loads user data from a JSON file containing names and ages, parsing it with JSON.parse to display the first two entries. The visualization is built with D3 v5 in an SVG container, allowing for detailed control over axis appearance and spacing.

Apr 2, 2020
Loading thumbnail…

Customizing Axes

This bar chart displays the population of the top 10 most populous countries, using data from the United Nations World Population Prospects 2017. It demonstrates customized D3 axes, including a formatted bottom axis that converts large numbers to abbreviated units and removes tick lines for a cleaner look. The visualization uses D3 v5 APIs such as `scaleLinear`, `scaleBand`, `axisBottom`, `axisLeft`, and `format` to render SVG rectangles with steelblue fill. The chart hides unnecessary axis domains and adds custom labels and a title.

Apr 1, 2020
Loading thumbnail…

Responding to Resize

This example demonstrates how a visualization can respond to browser resizing by recalculating the SVG canvas dimensions to match the enclosing CSS-styled `<div>`. It draws a pair of crossing green lines that form an X across the full width and height of the container. The code uses D3 v5 to select the container, append an SVG element, and bind line data, while the `window.addEventListener("resize", redraw)` API triggers a full redraw on window changes. The chart reads `clientWidth` and `clientHeight` from the `#chart` element to set the SVG’s attributes dynamically.

Apr 1, 2020
Loading thumbnail…

Making a Bar Chart

This bar chart displays the populations of ten countries. It creates a simple SVG bar chart from a CSV data file, reading population values and scaling them to the width of the chart. The code uses the d3 library’s `select`, `csv`, `scaleLinear`, and `max` functions to load data, calculate the scale, and render the bars.

Apr 1, 2020
Loading thumbnail…

Cars

This example loads a small, hard-coded JSON dataset of four used cars with year, make, model, and price. It shows a text-based report listing cars under a $2,000 budget, formatted as “year make model: $price”. The React app uses `getCars` with a simulated 2-second delay to fetch data, then `generateReport` filters and formats the results, writing the output to a `<pre>` element in the DOM.

Mar 31, 2020
Loading thumbnail…

Cars Report

This example demonstrates a simple text-based report of used cars, displaying a filtered list of vehicles priced under $2,000 in a large HTML `<pre>` element. It shows how JavaScript modules and Promises structure asynchronous data loading and formatting. The code defines `getCars()` to return a Promise that resolves a hardcoded JSON array after a two-second delay, while `generateReport()` filters and maps the data using the `formatCar` helper. The main script updates the page’s `textContent` from “Loading...” to the final report, using ES6 module imports and exports.

Mar 31, 2020