kesmith21

@kesmith21·3 public vizzes

Making a Bar Chart

This bar chart displays the market capitalization of two companies, Apple and TM, using data from a CSV file. Built with D3 v5 and rendered as an SVG, the visualization uses `scaleLinear` for the x-axis and `scaleBand` for the categorical y-axis, with customized axes via `axisBottom` and `axisLeft`. The chart includes axis labels and a title, while the bars are styled with a steelblue fill via CSS.

Dec 5, 2020

Loading thumbnail…

Customizing Axes

This example displays a horizontal bar chart of the top 10 most populous countries, using 2018 population estimates from the United Nations World Population Prospects. It demonstrates customized D3 axes by removing default domain lines, adding axis labels with large fonts, and applying tick formatting. The code uses d3.csv, d3.scaleLinear, d3.scaleBand, d3.axisLeft, and d3.axisBottom, with SVG rendering. Axes are manually styled via CSS classes, and the x-axis ticks are sized to span the chart height.

Nov 29, 2020

Loading thumbnail…

Let's make a face with D3.js!

This interactive example shows a smiley face with animated eyebrows built using D3.js. The face is composed of SVG shapes—a yellow circle for the head, two circles for eyes, rectangles for eyebrows, and a path for the mouth—all centered via a transformed group. The eyebrows move up and down using chained `transition` calls with a 2000-millisecond duration. The code uses D3 v5 selectors to query the SVG, `arc` to generate the mouth’s path, and direct attribute setters for positioning.

Nov 29, 2020