yaredmtaye@gmail.com

@ymtwpi·8 public vizzes

Olympic Gold Medals by Sports

This bar chart visualizes Olympic gold medal counts across eight sports, showing swimming and javelin with the highest totals while running and cycling have the least. The visualization uses D3.js version 7.8.5, rendering SVG rect elements via a dynamic bar chart that adapts to container dimensions. SVG is selected with `d3.select`, while axes are generated using `scaleBand` for the categorical sports on the x-axis and `scaleLinear` for medal counts on the y-axis. The code implements `axisBottom` and `axisLeft` for scalable gridlines and labels.

Sep 24, 2024

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between the Cost of Living Index and the Cost of Living Plus Rent Index for countries in 2024, using data from a Kaggle dataset. Each circle is positioned by the two indices and colored by rank from green to red via a linear scale, with a light gray inner rectangle framing the plot. The visualization is built with D3.js, using `scaleLinear` for axes and color, `extent` for data ranges, and custom `xAxis` and `yAxis` functions.

Sep 18, 2024

Loading thumbnail…

Cost of Living Index by Country

This example displays the first row of a CSV dataset on the cost of living index by country for 2024. It lists key metrics such as the cost of living index, rent index, and local purchasing power index, alongside the country's rank and name. The visualization uses JavaScript to import the data and render it as a JSON string within an HTML `<pre>` element, setting the font size dynamically. The code parses the numeric string values into numbers before displaying them. The dataset originates from a publicly available Kaggle source.

Sep 18, 2024

Loading thumbnail…

Olympics Sports and Medals, 1896 - 2014

This interactive visualization explores Olympic sports and medal data from 1896 to 2014, combining summer and winter games with country demographic information. It displays sample records from the merged datasets, including athlete, event, medal, and GDP per capita fields. The code loads CSV data using native JavaScript imports and renders the raw JSON objects as text in the browser with a large monospace font. WebGL is specified for rendering, with the example demonstrating how the data structures can be accessed and displayed.

Sep 18, 2024

Loading thumbnail…

Social-Media-Users-Dataset

This example displays the first record of a social-media-users dataset as a formatted JSON object, revealing fields such as UserID, name, gender, date of birth, interests, city, and country. The visualization uses Vue and WebGL to render the data structure, with the dataset imported from a CSV file and parsed for display. It highlights the raw data format that subsequent analyses, like interest comparisons or clustering, would build upon.

Sep 12, 2024

Loading thumbnail…

Stock Market Data

This visualization displays the first record of a stock market dataset in a formatted JSON structure, showing daily prices and trading volumes for major global companies. The code imports data from a CSV file, converts numeric string values to numbers, and renders the first data point as a readable JSON object. It uses JavaScript's `JSON.stringify` method with a font size of 36 pixels to display the data in a preformatted HTML element.

Sep 12, 2024

Loading thumbnail…

Electoral College

An animated visualization ranks the ten U.S. states with the most Electoral College votes, showing each state as a colored circle whose area encodes its vote count. Blue circles represent states with a narrower popular-vote margin, while red circles indicate wider margins, with color intensity scaled by the reported percentage gap. The circles and labels appear sequentially, first for blue states and then for red states, using D3.js joins and transitions with easing. Data comes from Britannica’s Electoral College by State list.

Sep 12, 2024

Loading thumbnail…

Yared Taye Circles with D3

This example renders a collection of twelve randomly sized and positioned circles in a light green SVG container. Each circle uses a random radius between 20 and 160 pixels, a random fill color from a predefined palette of 16 hues, and a random opacity value between 0.4 and 1.0. The visualization demonstrates D3’s data-binding and General Update Pattern by chaining `selectAll`, `data`, and `join` methods to create the SVG elements. It uses the D3 v7 library, with `select` for DOM selection and attribute setters for dynamic styling.

Aug 27, 2024