Aegon95

@Aegon95·6 public vizzes

Temperature in San Francisco Line Chart

This line chart displays one week of temperature data in degrees Celsius for San Francisco, sourced from Data Canvas - Sense Your City, with mock monthly energy values used for the visualization’s title and axes. The chart uses D3 v5 with SVG rendering, employing `d3.scalePoint` for the x-axis, `d3.scaleLinear` for the y-axis, and `d3.line` to draw the path. A gradient-filled area beneath the line is created using `d3.area`, a `linearGradient` def, and a `clipPath` to highlight the enclosed region.

Nov 19, 2019

Loading thumbnail…

multiple area

This visualization displays mock energy data for two sites across months, using semi-transparent filled areas to compare temporal trends. Built with D3 v5, it employs `d3.area()` for the shaded regions, `d3.line()` for outlines, and `d3.nest()` to group data by site. The SVG rendering includes custom axes with gridlines, a legend, and gradient-filled clip paths created via `d3.scaleOrdinal` for color encoding.

Nov 17, 2019

Loading thumbnail…

Color and Size Legends

This example demonstrates two reusable legend components built with D3 v5: a color legend using `scaleOrdinal` for categorical data and a size legend using `scaleSqrt` for quantitative data. The color legend renders colored circles with domain labels, while the size legend displays circles scaled proportionally to tick values with corresponding text offsets. Both legends are implemented as modular functions that append SVG groups and circles, using D3’s selection and merge pattern to handle updates efficiently.

Nov 17, 2019

Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart displays one week of temperature data in degrees Celsius for San Francisco, sourced from Data Canvas - Sense Your City. Despite its title, the visualization actually renders as a donut chart, using `d3.pie()` and `d3.arc()` to create proportional segments for each temperature category. The chart encodes values through color mapping with `d3.scaleOrdinal(d3.schemeCategory20b)` and includes an interactive legend that dynamically repositions labels based on their measured text width via `getBBox()`. The SVG output is styled with CSS classes for ticks, axes, and titles, though no actual line or axis elements appear in the code.

Nov 14, 2019

Loading thumbnail…

Color and Size Legends

This example demonstrates how to construct two distinct legends for visualizing data: a color legend for ordinal values and a size legend for quantitative values. The color legend displays categories like apple, lemon, lime, and orange using colored rectangles, while the size legend uses scaled circles representing numeric ticks. The visualization is built with D3 v5, employing `scaleOrdinal` for colors and `scaleSqrt` for sizing, with SVG rendering and custom reusable legend components.

Nov 14, 2019

Loading thumbnail…

Line Chart with Multiple Lines

This line chart shows one week of temperature readings in cities worldwide, sourced from Data Canvas - Sense Your City. It plots temperature over time for multiple cities, with each city assigned a unique color from the d3.schemeCategory10 palette and a legend generated via a custom colorLegend component. The visualization uses d3.scaleTime, d3.scaleLinear, d3.scaleOrdinal, d3.axisLeft, d3.axisBottom, and d3.line with curveBasis for smooth curves. Data is loaded via d3.csv, parsed with timestamps converted to Date objects, and rendered as SVG paths with mix-blend-mode styling.

Oct 30, 2019