hyejinid

@hyejinid·3 public vizzes

Customizing Axes

This visualization displays a bar chart of the population for the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects 2017. The example demonstrates how to customize D3 axes, building upon a basic bar chart. The code uses d3.select, d3.scaleBand, d3.scaleLinear, and d3.axisLeft, d3.axisRight, and d3.axisBottom to create and style the chart's axes, with tick text and line colors defined in CSS. Population values are shown on the y-axis.

Jun 4, 2020

Loading thumbnail…

Customizing Axes

This example visualizes node insertion distances from a CSV dataset, combining a bar chart for absolute node distance with overlaid circles for relative distance. The left axis uses a linear scale with formatted tick labels, while the right axis applies percentage formatting and grid lines. D3 v5 APIs such as `scaleLinear`, `scaleBand`, `axisLeft`, `axisRight`, and `axisBottom` customize the axes, with the data sourced from a local CSV file and rendered as SVG elements.

Jun 4, 2020

Loading thumbnail…

Untitled

This example shows sales data for supermarket orders, broken down by city, with stacked bars representing categories like Furniture, Office Supplies, and Technology. A dropdown menu filters the display by customer segment, and a checkbox toggles between sorting bars by total sales or by city order. Built with React and D3 v5, it uses `d3.stack`, `d3.scaleBand`, and `d3.scaleLinear` to render the SVG chart, with `transition` methods animating updates when filters change. The data comes from a CSV file containing individual order records.

Jun 4, 2020