chrismdiaz

@chrismdiaz·4 public vizzes

Cars Scatter Plot

This scatter plot visualizes Pokémon data, mapping base experience on the x-axis and weight on the y-axis using orange semi-transparent circles. The chart includes labeled axes, tick marks, and a title. Built with D3 v5, the code uses `d3.csv`, `scaleLinear`, `axisBottom`, `axisLeft`, and `extent` to load and scale the data, with SVG rendering for the circles and text. The dataset originates from a CSV file hosted on VizHub, and the styling is applied via an external stylesheet.

May 14, 2019

Loading thumbnail…

Making a Bar Chart

This bar chart displays the populations of the ten most populous countries, using 2018 estimates from the United Nations World Population Prospects. The chart renders countries on the y-axis and population values on the x-axis, with bars scaled linearly via `d3.scaleLinear` and positioned using `d3.scaleBand`. Data is loaded from a CSV file with `d3.csv`, and axes are generated with `d3.axisLeft` and `d3.axisBottom`. The visualization is built with D3 v5 and rendered as SVG elements.

May 14, 2019

Loading thumbnail…

Customizing Axes

This bar chart displays the infant mortality rates for the ten most populous U.S. states, using 2018 population estimates from the United Nations World Population Prospects. It highlights custom axis styling, including removed domains and tick lines on the y-axis, a formatted bottom axis with a custom tick size, and a rotated axis label. Built with D3 v5, the visualization uses `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to render SVG elements, while CSS controls text and tick appearance. The data is loaded from a CSV file and mapped to rect widths.

May 7, 2019

Loading thumbnail…

Customizing Axes

This bar chart displays the populations of the top 10 most populous countries, based on 2018 estimates from the United Nations World Population Prospects. Built with D3 v5, it visualizes the data as horizontal bars and demonstrates customized axes. The code uses `d3.scaleLinear`, `d3.scaleBand`, `d3.axisBottom`, and `d3.axisLeft`, with the x-axis tick format converting large numbers to abbreviated values like "1.4B". The chart also removes default axis domains and gridlines, while custom styling is applied through CSS classes for ticks, labels, and the title.

May 7, 2019