jane-heff

@jane-heff·5 public vizzes

Cars Scatter Plot

This scatter plot compares car horsepower and weight using red, semi-transparent circles from the Auto MPG dataset. The visualization arranges circles along linear scales, with axes labeled "Horsepower" and "Weight," and includes a title. Built with D3 v5, it uses `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom` to render the plot as SVG, with data loaded via `d3.csv`.

Dec 1, 2020

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for a dataset of cars, with each vehicle represented as a red, semi-transparent circle. The chart emphasizes the general correlation between these two attributes, using a linear scale for both axes and displaying grid lines for readability. Built with D3 v6, the code uses `csv` to load data, `scaleLinear` and `extent` for scaling, and `axisLeft` and `axisBottom` to generate the labeled axes.

Dec 1, 2020

Loading thumbnail…

Cars Scatter Plot

This scatter plot displays the relationship between horsepower and weight for a collection of cars, with each circle representing a vehicle. The visualization uses D3 v6’s scaleLinear, axisBottom, axisLeft, and extent functions to map data to SVG circles with fixed radius and semi-transparent red fill. Axes include gridlines via tickSize, and labels are added for both dimensions and the title. The data is loaded as CSV from a remote GitHub-hosted dataset.

Dec 1, 2020

Loading thumbnail…

D3 Page Template

This example displays the top 10 most populous countries as horizontal bars, with country names on the vertical axis and population counts on the horizontal axis. The visualization is built with React components that use D3 scales, including `scaleBand` for the categorical y-axis and a linear scale for the x-axis. Data is loaded asynchronously from a CSV file using `d3.csv` from D3 v6, with the UN World Population Prospects 2019 dataset. Axes and marks are rendered as SVG elements through reusable JSX components, with tooltips embedded as SVG `<title>` elements.

Nov 30, 2020

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart displays the top 10 most populous countries in 2020 using data from the United Nations World Population Prospects 2019. It uses React to render SVG graphics, with D3 v5’s `scaleBand` and `scaleLinear` for positioning, while a custom `Marks` component draws the bars. X-axis labels are formatted with D3's `format` function, and a native SVG `<title>` element provides tooltips. The 'Poppins' font and custom colors style the chart.

Nov 30, 2020