Vinod-VIX

@Vinod-VIX·9 public vizzes

Making a bar chart with D3.js

This example shows a horizontal bar chart of the ten most populous countries, using population totals from a CSV file. The chart displays each country’s name on the y-axis and its population on the x-axis, with bars rendered as SVG rectangles. The code uses d3.csv to load data, d3.scaleLinear for the x-axis, d3.scaleBand for the y-axis, and d3.axisLeft and d3.axisBottom to generate the axes. Bars are filled with steelblue via CSS, and the visualization is built with d3.v6 in an SVG container.

Nov 3, 2020

Loading thumbnail…

Lets make a face with D3.js

A smiling face is drawn with D3.js (v6) using SVG shapes: a yellow circle for the head, two circles for eyes, rectangles for eyebrows, and an arc path for the mouth. The eyebrows animate upward and downward via chained `transition` calls, creating a repeated eyebrow-raising effect. The code imports `select` and `arc` from D3, uses SVG attributes for positioning, and centers the face by translating a group element based on the SVG’s width and height.

Nov 3, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates the use of raw SVG elements styled with CSS to create a simple composition of shapes. It shows circles and rectangles arranged in three groups, with the first group unstyled, the second using inline fill attributes, and the third inheriting blue fill and red stroke from a parent transform. The code directly constructs SVG circle, rect, line, and path elements within an HTML document, while a separate stylesheet applies stroke properties to elements with the class "lines". No data is loaded; the visualization relies entirely on declarative SVG markup and CSS rules.

Nov 3, 2020

Loading thumbnail…

HTML Cars Report

This example presents a simple, static list of three car models and their prices, with the 2010 NANO LX highlighted in red. The visualization is built with plain HTML and styled via a linked CSS file, using a monospace font at a large size. It relies on standard HTML list elements and a class selector, demonstrating basic data presentation without any JavaScript libraries or dynamic rendering.

Nov 3, 2020

Loading thumbnail…

HTML D3

This example builds an HTML page with inline CSS and JavaScript to generate a text report from a static dataset of car listings. It parses a hardcoded JSON array of car objects (year, make, model, price) using `JSON.parse`, filters cars below a price threshold, and formats each matching entry with a custom `fCars` function. The resulting report is inserted into a `<pre>` element’s text content via `document.getElementById`, demonstrating basic DOM manipulation with no visual charting or D3 APIs involved.

Nov 2, 2020

Loading thumbnail…

Cars Reports

This example demonstrates a text-based report generator for car listings, filtering vehicles priced under a specified threshold and formatting each car’s details into a readable string. The code uses JavaScript modules with D3 version 6 to parse a hardcoded JSON array of vehicles via `JSON.parse`, then applies a filter and maps the data through the `fCars` formatter to produce a newline-separated output. The resulting message is displayed in an HTML `<pre>` element, populated through the DOM’s `textContent` property.

Nov 1, 2020

Loading thumbnail…

Cars Reports

This example renders the text “Hello World” on a page, using a static dataset of car information that is parsed from a JSON string. The visualization is built with React and uses the `cars.js` module to import and parse the car data. The `index.js` file selects an HTML element by its ID and sets its text content, while the display is formatted with a large font size using inline CSS. The data includes car make, model, year, and price, though only the message is currently shown.

Oct 30, 2020

Loading thumbnail…

Cars Reports

This example renders a minimal HTML page titled “Cars Reports” using a plain CSS and JavaScript setup, with React listed as the framework in metadata. The page prints “Hello HTML” in the body and logs “Hello JavaScript!” to the browser console via a script tag. It does not include any data visualization, charting libraries, or external data sources; the code only demonstrates basic DOM output and console logging. The associated README references an alternative React starter, but the current implementation shows no interactive or graphical elements.

Oct 30, 2020

Loading thumbnail…

Cars Reports

This example presents a minimal web page titled “Cars Reports” using plain HTML, CSS, and JavaScript contained in a single `index.html` file. It displays the text “Hello HTML” centered on the page with a very large font size (13em). The code logs “Hello JavaScript!” to the browser’s console via the `console.log` API, and the page’s styling is defined with CSS rules inside a `<style>` tag. No data visualization libraries or external frameworks are used; it is a bare-bones demonstration of basic web technologies.

Oct 30, 2020