Touha Zohair

@touha98·4 public vizzes

Customizing Axes

This example displays a bar chart of the top 10 most populous countries in 2018, using data from the United Nations World Population Prospects. The chart customizes D3 axes by removing default domain lines and tick lines, applying a custom tick format that converts G to B for billions, and styling tick labels, axis labels, and the title via CSS. It uses `d3.scaleLinear` and `d3.scaleBand` to map population and country names, with `d3.axisBottom` and `d3.axisLeft` to render the axes.

May 8, 2020

Loading thumbnail…

Let's make a face with D3.js!

This example renders a horizontal bar chart of population data for ten countries, loaded from a CSV file using D3.js v5. The visualization uses `d3.scaleLinear` and `d3.scaleBand` to map population values and country names to SVG rectangles, with axes generated by `d3.axisLeft` and `d3.axisBottom`. Bar widths are proportional to each country’s population, and the chart is styled with steel-blue rectangles. The code demonstrates basic data binding and SVG manipulation with D3’s `select` and `append` methods.

May 7, 2020

Loading thumbnail…

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 visualization customizes D3 v5 axes by removing domain lines, adding gridlines through tick sizing, and reformatting tick labels with `d3.format('.3s')` to abbreviate large numbers as billions. The code uses `d3.scaleBand` for the categorical country axis and `d3.scaleLinear` for the population axis, with a left margin accommodating country names and an axis label below the x-axis. Custom CSS styles the tick text, gridlines, title, and axis labels.

May 7, 2020

Loading thumbnail…

Responding to Resize

This example demonstrates a dynamic SVG visualization that adjusts its output to match the browser window’s current dimensions. The code extracts the container’s `clientWidth` and `clientHeight`, then uses D3 v5’s `.attr` method to resize the SVG element while redrawing two diagonal lines that form a crosshair. The `redraw` function is invoked initially and again through a `window.addEventListener` listener, which triggers a recalculated layout whenever the viewport changes. The visualization uses D3’s selection and merging API to update the lines efficiently.

May 7, 2020