jesperenglund92

@jesperenglund92·2 public vizzes

SleepData

This visualization compares recommended sleep hours against average reported sleep hours for students from kindergarten through 12th grade. Each grade level displays two horizontal bars, with teal representing averaged sleep and orange representing needed sleep, alongside a legend and axis labels. The chart uses React with D3 v5, employing `scaleLinear` for the x-axis, `scaleBand` for the y-axis, and `d3.schemeSet2` for color encoding. The data is embedded as JSON and rendered as SVG rectangles within a fixed 960×500 viewport.

Mar 8, 2020

Loading thumbnail…

Test

This example displays a single grade level from a dataset comparing "needed" and "averaged" values across grades. The visualization starts by showing the grade name "Kindergarten" as a header, pulled directly from the data file using JavaScript. Built with D3 v5 and a custom data module, the code parses a JSON array and accesses the first record's `grade` property via `JSON.parse`. The page then updates the HTML heading's text content through `document.getElementById` and `textContent`, demonstrating a basic data-to-DOM binding. The chart itself does not render any visual elements beyond this text output.

Mar 8, 2020