saeedtajikai

@saeedtajikai·4 public vizzes

Scatter Plot

This chart displays the population of the top 10 most populous countries as a dot plot with a linear population scale on the x-axis and a categorical point scale on the y-axis. The data is loaded via `d3.csv` and rendered as an SVG, using `d3.scaleLinear`, `d3.scalePoint`, `d3.axisBottom`, and `d3.axisLeft`. The x-axis uses formatted tick labels (e.g., "B" for billions) and grid lines, while circles are drawn with a steel-blue fill.

Feb 28, 2020

Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart of the populations of the ten most populous countries, using a CSV data source. D3 v5’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` position the bars and axes, while the bottom axis’s tick labels are formatted with `format(".2s")` and a custom replacement of ‘G’ with ‘B’. The chart removes default axis domain lines and y-axis tick marks to create a cleaner look, and appends custom text elements for the axis label and title.

Feb 27, 2020

Loading thumbnail…

Loading and Parsing CSV Data

This example shows a horizontal bar chart of country populations, using a CSV file loaded from `data.csv` with the `d3.csv` method. It renders SVG bars with lengths scaled linearly by population and countries positioned on a band scale. The code explicitly constructs axes with `axisLeft` and `axisBottom`, and applies margins and scales from `d3.scaleLinear` and `d3.scaleBand`. Population values are converted to numbers after loading.

Feb 27, 2020

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3.js version 5. It fetches a remote CSV file containing CSS named colors, then displays summary statistics about the dataset, including its size in kilobytes, row count, and column count. The visualization uses the `d3.csv` function to asynchronously retrieve and parse the data, `d3.csvFormat` to measure the data’s serialized size, and the `data.columns` property to count columns. Results are rendered as plain text inside an HTML `<pre>` element, showcasing D3’s data-handling capabilities without any graphical chart.

Feb 19, 2020