mi-jjang

@mi-jjang·3 public vizzes

Customizing Axes

This bar chart displays the population of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects. The example focuses on customizing D3 axes, removing default domain lines and adding custom tick styling, axis labels, and a title. It uses `d3.scaleLinear` for the population axis and `d3.scaleBand` for countries, with `d3.axisBottom` and `d3.axisLeft` for rendering. The SVG output is styled via CSS, with tick lines in gray and large, muted text for readability.

Sep 25, 2020

Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart displays one week of temperature data in San Francisco, using a smooth curve to connect daily readings. The visualization renders as an SVG with steel-blue circles marking each data point and a maroon line generated by d3.line with curveBasis interpolation. Axes are created with d3.axisLeft and d3.axisBottom, while scales use d3.scaleBand for the x-axis and d3.scaleLinear for the y-axis. The data originates from Data Canvas - Sense Your City, loaded via d3.csv and parsed with D3 v5.

Sep 24, 2020

Loading thumbnail…

Customizing Axes

This example displays a bar chart of population data for six unspecified countries, based on a 2018 United Nations estimate. It demonstrates customizing D3 axes by placing the y-axis on the right side, removing grid lines, and formatting tick labels with abbreviations (e.g., converting "G" to "B" for billions). The chart uses D3 v5 with `scaleBand` for bars, `scaleLinear` for the y-axis, and `axisLeft` and `axisBottom` to render axes. The data is loaded from a CSV file, and the visualization is rendered as SVG.

Sep 23, 2020