A5 - Line Plot
✓ Published0🌍 Public
This visualization displays daily minimum temperatures in Melbourne, Australia, across a year, using a line plot to show temperature trends over time. The chart, rendered as an SVG, uses D3.js version 7.8.5 to load CSV data from a GitHub gist, parse dates with `d3.timeParse`, and scale the time and temperature axes with `d3.scaleTime` and `d3.scaleLinear`. The line itself is drawn via `d3.line` and appended as a path with a steelblue stroke, with axes labeled and styled using D3's `axisBottom` and `axisLeft`.
AI-generated descriptionA blank slate starting point showing the "Hello World" for the VizHub V3 Runtime Environment, which supports continuous hot reloading with interactive widgets.
- There is no
index.html- that's what triggers the V3 Runtime - The entry point is the
mainfunction exported fromindex.js - The
mainfunction takes an argumentcontainer, a DIV that has measurable dimensions usingclientWidthandclientHeight - The second argument to
mainis an options object containingstateandsetState. - The state of the application is stored in
state, which is initialized as an empty object{}. - The
setStatefunction can be called with a function that uses the previous state to create a new state object using immutable update patterns. - For an interactive example, see Mouse Follower.
Full course playlist: YouTube: Constructing Visualization 2024.
MIT Licensed