ashershah

@ashershah·5 public vizzes

Fork of HTML Starter

This example displays the text “Hello HTML” centered on a plain page with a 13em font size, serving as a minimal demonstration of a web page’s basic structure. The code, written in plain HTML, uses a `<style>` block to set text alignment and font size, while a JavaScript `<script>` tag logs “Hello JavaScript!” to the browser’s console. It shows how CSS styles and inline JavaScript coexist within a single HTML file, requiring no external libraries or frameworks. The page’s sole purpose is to illustrate the foundational relationship between HTML, CSS, and JavaScript in a browser environment.

Sep 22, 2021

Loading thumbnail…

Document

This interactive pricing card reveals package details for massage services on hover. The main card presents a Swedish massage description with an image, while a second card overlays and fades in, displaying a blinking "Packages Details" label and a pricing list with green-highlighted item names. The example uses Bootstrap’s grid and card classes for layout, alongside custom CSS for positioning, a blinking animation keyframe, and a transition effect to control the overlay’s opacity. The underlying data is hardcoded in the HTML structure, showing prices for single, couple, and package session options.

Sep 15, 2021

Loading thumbnail…

Fork of Stylized Bar Chart

This example presents a horizontal bar chart of the ten most populous countries, using data from the United Nations World Population Prospects 2019. The chart encodes each country’s 2020 population as a teal bar, with country names on the y-axis and population values on the x-axis. Built with React and d3.scaleBand and d3.scaleLinear, it renders SVG rectangles for each bar and includes a tooltip showing the exact population value. The axes are composed of lightweight components that map scales to tick lines and labels.

Aug 23, 2021

Loading thumbnail…

Vega-Lite API Template

This example uses Vega-Lite API to render a scatter-style point plot of institutional data, with countries on the x-axis and the number of experts on the y-axis. The points are colored and sized by expert count, and tooltips display institution names. It loads CSV data from a GitHub gist using d3.csv, configures visual appearance through a custom config object, and renders interactively with a tooltip handler. The visualization is built in a React-compatible setup using vega, vega-lite, and vega-lite-api libraries, with a responsive full-window layout.

Aug 23, 2021

Loading thumbnail…

Serge Bouissou (Ryteh's CTO)

This interactive D3.js visualization displays a hierarchical tree of hip replacement specialists, organized by country, city, institution, and expert name, based on CSV data fetched from a GitHub gist. The tree uses a horizontal tidy layout with collapsible nodes, rendered as SVG with animated transitions. The page features a dark blue background, displays a header image, and leverages D3 v7’s `d3.hierarchy` and `d3.tree` APIs along with `d3.linkHorizontal` for the curved connecting links.

Aug 12, 2021