violet-chaeyoonkim

@violet-chaeyoonkim·8 public vizzes

Bar Chart

A bar chart displays population figures for ten countries, using horizontal bars whose lengths encode the numeric values from a CSV dataset. The chart is built with D3 v5, loading data via `d3.csv` and rendering SVG elements through `select` and `append`. The visualization centers a simple rectangular bar in the middle of a 960-by-500 pixel SVG canvas, styled with an Ubuntu font and white background. The code focuses on a single bar rather than a full categorical comparison, leaving the remaining chart structure incomplete.

Aug 9, 2019

Loading thumbnail…

Making a bar chart

This chart displays the populations of ten countries, using horizontal bars whose lengths correspond to each nation’s total population. The visualization is built with D3 v5, reading data from a local CSV file and rendering SVG rectangles through `select`, `csv`, `scaleLinear`, `scaleBand`, and `bandwidth`. The x-axis scales population values, while the y-axis positions country names, and the bars are colored with the default SVG styling.

Aug 9, 2019

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with movable eyebrows demonstrates fundamental DOM manipulation with D3.js. The SVG face is rendered using D3 selections, with circles for eyes and an arc-generated mouth, all positioned via transforms. Eyebrows are drawn as rectangles, and the code imports `select` and `arc` from the D3 library to build the static composition. The example relies on d3.v5 and shows how to append and style SVG elements programmatically without data binding or interaction.

Aug 9, 2019

Loading thumbnail…

Making a bar chart

A horizontal bar chart displays the populations of ten countries, sourced from a CSV file. The bars are rendered in steel blue using SVG, with a linear scale for population counts and a band scale for country names. The visualization is built with D3 v5, using `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the axes and rectangles.

Aug 9, 2019

Loading thumbnail…

Customizing Axes

This bar chart displays the top 10 most populous countries based on 2018 estimates from the United Nations World Population Prospects 2017. The visualization customizes D3 axes, using d3.axisBottom and d3.axisLeft with formatted tick labels that abbreviate population numbers in billions. Axes are styled with pink and hot pink colors, and gridlines extend across the chart using tickSize. The chart uses d3.scaleLinear for the population axis, d3.scaleBand for countries, and renders as SVG with data loaded from a CSV file.

Aug 9, 2019

Loading thumbnail…

Bar Chart: 2018 Population Top11

This bar chart displays the 2018 populations of the eleven most populous countries, using a horizontal layout where bar length corresponds to population size. The visualization uses D3 v5 with SVG rendering, employing `scaleLinear` for the x-axis and `scaleBand` for categorical country labels. Population values from the CSV are read via `d3.csv` and multiplied by 1000 to reflect actual figures. The chart includes a left axis generated with `axisLeft` and data sourced from World Population Review.

Aug 9, 2019

Loading thumbnail…

Customizing Axes

This bar chart displays the top 10 most populous countries in 2018, based on United Nations World Population Prospects data, with population values presented in billions. The example showcases D3 v5 axis customization, including a linear population scale with a formatted tick label (e.g., “1.42B” for China) and a band scale for country names. Customizations include removing axis domain lines, extending tick marks across the full chart height, and adding styled axis and title text via SVG. The code uses `d3.csv`, `scaleLinear`, `scaleBand`, `axisBottom`, `axisLeft`, and `format` to render the visualization.

Aug 8, 2019

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn in an SVG using D3.js v5, with eyes, eyebrows, and a mouth created via `circle`, `rect`, and `path` elements. The face is centered using a translated group, and the mouth is generated with the `d3.arc` helper. Eyebrows are positioned as rectangles, while the code demonstrates fundamental DOM manipulation through selections and attribute chaining. The example relies on static shapes without interaction, showcasing basic SVG rendering with D3’s `select` and `append` methods.

Aug 8, 2019