Miguel Martinez

@cortazar11·4 public vizzes

Customizing Axis

This example visualizes the top 10 most populous countries using a horizontal bar chart, with population values formatted in billions. The code imports specific D3 modules like `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the scales and axes. A custom tick formatter using `format('.3s')` replaces the default "G" suffix with "B" for billions. The chart renders in SVG, pulls data from a CSV file, and removes the y-axis domain line for a cleaner presentation.

Jul 24, 2019

Loading thumbnail…

Scatter Plot

This scatter plot displays the relationship between population and country for the top 10 most populous nations. Using d3.scaleLinear for the x-axis and d3.scalePoint for the y-axis, it renders blue circles with SVG. The visualization loads data from a CSV file, formats tick labels with d3.format, and includes grid lines generated by axis tick sizes.

Jul 19, 2019

Loading thumbnail…

Making a Bar Chart

This example demonstrates how to build a horizontal bar chart from CSV data, displaying population estimates for ten countries. The visualization uses D3.js v5 with SVG rendering, employing `d3.scaleLinear` for the population axis and `d3.scaleBand` for country categories. The code loads data via `d3.csv`, applies a left axis through `d3.axisLeft` and a bottom axis with `d3.axisBottom`. Rectangles are appended dynamically, with height determined by the bandwidth and fill color set via CSS.

Jul 19, 2019

Loading thumbnail…

Making a Bar Chart

This visualization shows a blank SVG canvas with no data plot, providing an empty starting point for building a bar chart. The code loads D3 v5 and selects the SVG element to read its width and height attributes, preparing the coordinate system for future chart construction. It imports the `select` and `csv` functions from D3, though the data loading is not yet implemented. The example also includes an ES6 module exporting a message, but the bundle.js file referenced is not included in the provided files. The styles.css sets the body margin to zero and hides overflow.

Jul 18, 2019