bio_sun

@biosunsci·3 public vizzes

Making a Bar Chart

This example shows the population of the top 10 most populous countries from the 2018 United Nations World Population Prospects estimate. The bar chart uses D3 v5’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to map the data, with bars rendered as SVG `rect` elements. It customizes the chart’s margins and axis labels, while the data is loaded from a CSV file using `d3.csv`.

Feb 17, 2020

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for a dataset of cars from the UCI Machine Learning Repository’s Auto MPG Data Set. Each red, semi-transparent circle represents a car, positioned by its horsepower on the x-axis and weight on the y-axis. The visualization uses d3.scaleLinear for both axes, with d3.axisBottom and d3.axisLeft to generate gridlines and tick labels. Data is loaded via d3.csv, and the SVG elements are drawn using D3’s selection and data join methods.

Feb 15, 2020

Loading thumbnail…

Loading CSV

This example demonstrates how to load and display a CSV dataset using D3. It fetches the Iris Dataset from a remote URL and renders the parsed data as a JSON-formatted text block within the page. The code uses `d3.csv()` to asynchronously retrieve and parse the CSV file, then chains `.then()` to append a `<pre>` element to the body via `d3.select()`. The resulting output shows the structured data, making the loading and parsing process visible.

Feb 15, 2020