averyfairbanks

@averyfairbanks·4 public vizzes

Test Plot

This stacked bar chart visualizes health condition counts across racial groups using CSV data from health_indicators_2019.csv. The d3.stack() function layers conditions as colored segments, with d3.scaleBand, d3.scaleLinear, and d3.scaleOrdinal handling positioning and colors. Rectangles are appended to SVG groups, while mouseover, mousemove, and mouseleave events trigger a simple HTML tooltip displaying each segment’s count.

Dec 9, 2020

Loading thumbnail…

Test Donut Plot

A donut plot displays stacked bar charts of health condition counts—hypertension, diabetes, asthma, and HIV—across racial groups using data from health_indicators_2019.csv. The D3.js code stacks the categorical data with the `stack` function and renders rects with `scaleLinear` and `scaleBand` axes. Interactive tooltips appear on mouseover, showing the condition name and count, positioned via D3's `mouse` function. The visualization uses an SVG canvas from the index.html file.

Dec 8, 2020

Loading thumbnail…

Cars Scatter Plot

This scatter plot displays the relationship between horsepower and weight for a dataset of cars, with each vehicle represented as a steel-blue circle. The visualization uses D3.js version 5 with an SVG rendering approach, employing `d3.scaleLinear` for both axes and `d3.axisLeft` and `d3.axisBottom` to generate grid-lined tick marks. Data is loaded from a CSV file containing auto-mpg measurements, and the code parses numeric fields before rendering. The chart includes axis labels and a title, with styling applied through external CSS classes.

Dec 7, 2020

Loading thumbnail…

Scatter Plot

This scatter plot displays the top ten most populous countries, mapping population counts along the x-axis against country names on the y-axis. The visualization uses a linear scale for population and a point scale for categorical country labels, with circles rendered in SVG. It loads data from a CSV file using `d3.csv`, converts population values to absolute numbers, and employs `d3.scaleLinear`, `d3.scalePoint`, `d3.axisBottom`, and `d3.axisLeft`. Custom tick formatting abbreviates large numbers, and gridlines extend across the chart.

Dec 7, 2020