JijoThankachan

@JijoThankachan·2 public vizzes

Let's make a face with D3.js!

This example demonstrates basic D3.js DOM manipulation by rendering a yellow smiley face with animated eyebrows and a mouth. The face is built using SVG elements appended to a centered group, including circles for the eyes and an arc path for the mouth. D3 transitions sequentially raise and lower the eyebrows over two-second intervals while the mouth alternates between a thin line and a thick smile using the `d3.arc` generator. The code relies on `d3.select` and `transition.attrTween` to directly modify SVG attributes.

Nov 25, 2019

Loading thumbnail…

Customizing Axes

This bar chart displays the top 10 most populous countries using 2018 United Nations population estimates, with country names on the y-axis and population values on the x-axis. The visualization emphasizes axis customization: x-axis labels use a custom tick formatter that abbreviates numbers and converts "G" to "B" for billions, while tick lines extend across the chart and grid lines are removed. The code employs d3.csv, d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom, rendering as SVG elements styled with custom fonts and colors.

Nov 25, 2019