MEHMETHAN YAGCI

@mehmethanyagci·4 public vizzes

Making a Bar Chart

This example displays the top 10 most populous countries as horizontal bars, using data from the United Nations World Population Prospects 2019. The chart ranks countries from China to Mexico on a linear population scale, with a band scale for country labels and a grid of horizontal tick lines. Built with D3 v5, it uses `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render SVG rectangles, while formatting population values with `format`. The axis labels and title are styled via external CSS.

Jul 9, 2020

Loading thumbnail…

Customizing Axes

This bar chart displays the top 10 most populous countries using population estimates from the 2018 United Nations World Population Prospects. It highlights axis customization in D3 v5, showing how tick formats convert large numbers into abbreviated labels using `format('.3s')` and replacing 'G' with 'B' for billions. The axes are rendered as SVG elements with `axisBottom` and `axisLeft`, while gridlines, tick styling, and axis labels are adjusted through CSS and appended text elements. Population values are loaded from a CSV file and scaled linearly, with countries positioned by `scaleBand`.

Jul 9, 2020

Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js to construct a smiley face from basic SVG shapes, including circles for the eyes, rectangles for the eyebrows, and arc-generated paths for the mouth and nose. The code demonstrates fundamental DOM manipulation by selecting an SVG element and appending grouped elements with explicit coordinate transforms. Animated behavior is implemented through chained `transition` calls, moving the eyebrow group upward and back down over two one-second intervals. The visualization relies on D3’s `select`, `arc`, and transition APIs to show how static shape creation and simple attribute animation work together.

Jul 9, 2020

Loading thumbnail…

Cars Report

This example demonstrates a data-processing pipeline that filters a hardcoded collection of five used cars by price and displays the results as formatted text. The interface initially shows a "Loading..." message, then presents a report of vehicles priced under $2,000, listing each as a year, make, model, and price line. The code uses JavaScript modules and ES6 syntax, including `Promise`, `JSON.parse`, array methods like `filter` and `map`, and string formatting to build the report. A two-second delay simulates asynchronous data retrieval.

Jul 9, 2020