zhouxiaojiejillian

@zhouxiaojiejillian·3 public vizzes

Line Chart with Multiple Lines

This line chart displays one week of temperature data in degrees Celsius for cities worldwide, sourced from Data Canvas - Sense Your City. The visualization uses d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal with d3.nest to group data by city, rendering smooth lines via d3.line with curveBasis. A custom color legend component and d3.axisBottom/axisLeft with grid lines complement the SVG rendering. d3.csv loads the data, while styles apply stroke-linejoin, stroke-linecap, and mix-blend-mode for visual distinction.

Apr 4, 2020

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature data in degrees Celsius for cities worldwide, sourced from the Data Canvas - Sense Your City initiative. It shows multiple colored lines tracking temperature over time, with a color legend identifying each city. The visualization uses D3 v5 with d3.scaleTime, d3.scaleLinear, d3.scaleOrdinal, d3.line with curveBasis smoothing, d3.nest for grouping, and d3.axisLeft/axisBottom. SVG rendering with mix-blend-mode creates overlapping line effects, while axis labels and a title are added via SVG text elements.

Apr 4, 2020

Loading thumbnail…

HTML Cars Report

This example displays a simple HTML-based cars report, showing three car models—Leaf, Ford, and LTrailblazer—with their corresponding production counts in a bulleted list. The page uses basic HTML elements like `<h1>` and `<ul>` to present the static data. There is no JavaScript or visualization library involved; the rendering relies solely on the browser's default HTML styling, with the body set to a larger font size for readability. The data is hardcoded directly within the HTML markup.

Jan 10, 2020