mylavarapus

@mylavarapus·6 public vizzes

api-kg

This interactive knowledge graph visualizes a film dataset, showing connections between actors, directors, and their movies. The graph uses colored nodes and directed, labeled edges to represent relationships like "Acted in" and "Directed". Built with D3.js, the visualization uses `d3.forceSimulation` for physics-based layout, with forces for links, charge, collision, and centering. Users can pan and zoom, while nodes are draggable. The code loads its data from a JSON file, which contains the nodes and links, and the graph is rendered as SVG elements, with arrowheads defined using SVG markers and relationship labels placed along curved paths.

Dec 27, 2020

Loading thumbnail…

Making a barchart

This example displays a horizontal bar chart of country populations using D3 v6, loading data from a CSV file and rendering it as SVG rectangles. The code imports `select`, `csv`, `scaleLinear`, `max`, and `scaleBand` from D3 to create linear and band scales that map population values to bar widths and country names to vertical positions. The bars are appended to an SVG element with dimensions specified in the HTML, and the population values are converted to numbers before rendering. The example also demonstrates loading D3 via UNPKG and using local ES6 modules for data generation and formatting utilities.

Dec 27, 2020

Loading thumbnail…

Lets make a face with d3.js

This example uses D3.js to construct a simple animated face from basic SVG shapes. A static yellow circle forms the head, while two black circles representing the eyes undergo staggered transitions, changing their fill color from black to transparent and back, creating a blinking effect. A mouth is drawn using D3’s `arc` function to generate a path with specified inner and outer radii. The code demonstrates modular imports from local ES6 modules and loading D3 via UNPKG.

Dec 26, 2020

Loading thumbnail…

Interactive Force Directed Layout

An interactive network visualization demonstrates a continuous force-directed layout in which users can push and pull nodes. Selected nodes remain fixed while the layout algorithm repositions all others, with the diagram re-laying out during and after drag operations. The example uses the gojs library’s `ForceDirectedLayout` class, extending it to create a `ContinuousForceDirectedLayout` that optimizes performance by caching the network. Nodes are rendered as circles with text labels, and links include arrowheads and fading label backgrounds, all output as SVG via the gojs `Diagram` component.

Dec 26, 2020

Loading thumbnail…

Cars report

This example displays a text report of cars filtered by price. The page renders a list of car years, makes, models, and prices as plain text, with only those cars priced under $1000 shown. The code imports car data from a JSON array, filters it, maps each entry to a formatted string using template literals, and joins the results with newlines. The final report is inserted into the DOM via `document.getElementById` and `textContent`, with the page using CSS for large centered text styling.

Dec 6, 2020

Loading thumbnail…

Cars report

This example renders a static report that displays the text “Hello World” on a blank page using React and plain CSS. It loads a hardcoded JSON array of car records from a separate `cars.js` module, but the visualization does not actually use this data. The page updates a single DOM element via `document.getElementById` and sets its text content, with the body styled at a large 13em font size for emphasis.

Dec 6, 2020