rangitit

@rangitit·6 public vizzes

Shapes with SVG and CSS

This example displays a collection of basic geometric shapes—circles, a polygon, and a rectangle—arranged in a fixed composition on an 800-by-500 canvas. The scene includes overlapping elements, such as a white circle with a black stroke and a teal triangle paired with a circle, rendered directly via standard SVG markup. Styling is applied through an external CSS file, which sets the page’s font and margin properties. The visualization demonstrates how raw SVG elements and CSS rules combine to create a static, illustrative graphic without any JavaScript libraries.

Sep 17, 2019

Loading thumbnail…

Apple Daily Price bar chart

This bar chart displays Apple Inc.'s daily stock price on several dates in 2019, with vertical bars representing the numerical price for each recorded day. The visualization uses d3.csv to load the data, d3.scaleBand for the date axis, d3.scaleLinear for the price axis, and d3.axisLeft and d3.axisBottom to render the axes. Each rectangle’s height encodes the price value, while the SVG canvas has a pink background and steelblue bars. The chart omits dates where price data is missing.

Sep 6, 2019

Loading thumbnail…

Apple Daily Price- Customizing Axes

This horizontal bar chart displays Apple Inc.’s daily stock price for selected days in 2019, using a bar length to represent price and a band scale for dates. Built with D3 v5, the SVG chart applies `scaleLinear` and `scaleBand` for axes, with `axisLeft` and `axisBottom` for ticks. The x-axis labels use `format('.3s')` to abbreviate numbers, rendering price values in thousands. Data is loaded from a CSV file, and the chart is drawn using SVG `rect` elements with a pink background and steelblue bars.

Sep 6, 2019

Loading thumbnail…

Car Report

This example demonstrates a simple text-based car report generated from a small dataset of five cars, showing their year, make, model, and price. The report filters the cars to include only those priced below a threshold and formats each entry using the JavaScript `map`, `filter`, and `join` array methods. It uses string interpolation to construct each car’s description and updates the DOM via `document.getElementById` and `textContent`. The page applies styling through a linked CSS file with a custom font and dark background.

Sep 5, 2019

Loading thumbnail…

HTML Cars Report

This example displays a simple HTML car report listing three vehicles with model years, names, and prices. It demonstrates fundamental web rendering using plain HTML elements like `<h1>` and `<ul>` with `<li>` items, styled through an external CSS file. The page relies on basic browser rendering of HTML and CSS, with the stylesheet defining a monospace font and enlarged text size. A `.highlighted` class is defined in the CSS but not applied to any element in the current markup, showing unused styling potential rather than active visual enhancement.

Sep 5, 2019

Loading thumbnail…

Hello VizHub

This example demonstrates a minimalist "Hello VizHub!" message displayed prominently on a dark, centered web page using the Ubuntu font. It shows how VizHub projects combine an ES6 module for content, D3.js for DOM selection and text insertion, and CSS for styling. The page imports the `select` function from D3 v5 and applies the custom text via `select('#message').text(message)`, while the module `myMessage.js` exports the string. The rendering relies on static HTML and CSS, with no data-driven visualization.

Aug 30, 2019