Alikhan Bulatov

@ali-bulatov·3 public vizzes

Making a Bar Chart

This bar chart visualizes the population of the top 10 most populous countries, using data from a 2018 United Nations estimate. The chart displays horizontal bars, with the population value on the x-axis and country names on the y-axis. The visualization is built with D3.js (version 5), using functions like `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft`. The code also demonstrates axis customization by removing default domain lines and tick lines, and by applying a custom tick format that converts numbers to a more readable form. The chart is rendered as an SVG, and the accompanying code includes a link to a video tutorial explaining the process.

Aug 2, 2020

Loading thumbnail…

Cars Report

This example displays a text-based report of car information, beginning with the make of the first vehicle in the dataset. The visualization uses a static HTML page with a `<pre>` element to render the message. The code imports car data from a JSON file and extracts a single attribute to display. It relies on React and plain JavaScript, with no additional visualization libraries. The data source is a small embedded JSON array of car records, and the rendering approach is simple DOM manipulation via `document.getElementById`.

Jul 31, 2020

Loading thumbnail…

HTML Starter

This example demonstrates the simplest possible web page rendered in a browser. The page displays the text “Hello HTML” in a large, centered font, with a small inline script that logs “Hello JavaScript!” to the browser’s developer console. The HTML structure uses a plain `<html>` document with embedded `<style>` and `<script>` tags, requiring no external libraries or frameworks. It serves as a minimal starting point for HTML-based visualizations.

Jul 31, 2020