SathishKumarL

@SathishKumarL·3 public vizzes

HTML Starter

This example demonstrates a minimal setup for embedding D3.js visualizations within an HTML page. It renders a red SVG canvas using the `d3.select` and `style` methods, with the background color set directly on the SVG element. The page includes an empty SVG of 900 by 400 pixels and displays the text “Hello HTML” centered via CSS. The code uses D3 v5 and is structured for React, though the visualization itself relies solely on plain SVG manipulation without any data binding or complex rendering techniques.

May 6, 2020

Loading thumbnail…

React Starter

This example demonstrates a simple React starter with a text-based report generator for car data. It loads car records from a hardcoded JSON array via a promise-based `getCars` function with a two-second delay, then filters and formats the results using `map` and `filter` from JavaScript. The formatted output is rendered directly into the DOM via `document.getElementById("root").textContent`, replacing a "Loading..." placeholder. The code uses ES6 features like template literals, destructuring, and `Promise` syntax, but no visualization or charting library is involved.

May 5, 2020

Loading thumbnail…

Cars

This example demonstrates a JavaScript data-processing pipeline that loads a small set of used car records, filters them by price, and formats the results into a text report. The page initially displays "Loading...", then, after a simulated two-second delay via a Promise, presents a list of cars priced under $2000. The code uses modular JavaScript with `import`/`export` statements, `JSON.parse` for parsing an inline JSON array, and DOM manipulation to set the text content of a pre-formatted element. It relies on standard JavaScript arrays, objects, and `filter`/`map` operations, without any external visualization library.

May 5, 2020