AnniWis

@AnniWis·6 public vizzes

fernwaerme2

This example visualizes the heat supply network of Hamburg’s districts using a custom SVG map. The choropleth colors encode district-level data from the GeoJSON file `bezirke_ohne_neuwerk.json`, which is projected and rendered with D3 v4. The map highlights the seven districts (Bezirke) of Hamburg, excluding Neuwerk, using a color scale to represent the district attribute values. The visualization is built with Blockbuilder.org and relies on D3’s geographic projection and SVG path generation to draw the district boundaries, with tooltips or legends implied to support reading the quantitative variation.

Feb 27, 2018

Loading thumbnail…

fernwaerme

The visualization displays the number of buildings and those connected to district heating across Hamburg's seven boroughs using a bubble chart. Each circle is positioned by geographic coordinates (x, y) and scaled by total building count, with the data loaded from a CSV file. The SVG rendering uses D3 v4 linear scales to map coordinates and radius, and the chart is generated entirely client-side with code adapted from Blockbuilder.

Feb 27, 2018

Loading thumbnail…

day1

This example shows a simple horizontal bar chart of six numeric values. It displays the data as teal bars with white value labels at the end of each bar, with bar height proportional to the value. The chart is built using d3.v4, with d3.scaleLinear mapping the data domain to pixel widths, and d3-selection methods appending SVG `rect` and `text` elements. The bars are grouped in `g` elements translated vertically, and the chart’s width and height are set dynamically based on the data length and a fixed bar height. The source data is a hardcoded array.

Feb 9, 2018

Loading thumbnail…

lastkurven circular 2

This example visualizes daily energy load profiles for nine households over one year as a series of concentric circular line charts. Each ring represents a different household, with radial distance encoding consumption values and angles corresponding to days, creating a compact “lastkurven” (load curve) view. The SVG is positioned on the right side of the viewport, leaving room for a legend. A linear radial scale maps consumption values (roughly 5–24) to radii, while a color scale encodes six load levels from dark blue to dark red, with an axis showing tick values 0–25 kWh/a. The circular arrangement highlights seasonal patterns and daily variations in household energy use. The visualization is built with D3 v4, parses dates from a CSV, and uses a clean, minimal design with a cream background. A time format is prepared but not fully implemented, leaving the axis labels and legend incomplete in the provided snippet. Overall, the chart emphasizes comparative load curves in a compact, radial form. That is the data, but there is no information about how the circles are generated. Wait, looking more closely at the code, I see there is a syntax error in the JavaScript: `yScale = ;` incomplete line. There is no rendering function yet. The visualization would not show anything. Perhaps the gist is incomplete. But I need to write a description for the gallery. Let me think about what this visualization is trying to do. It reads a CSV of daily load curves for different households (haus2 through haus10) over a year (dates in 2017). It sets up scales for a circular visualization: rScale, xAxis, color. It uses d3.svg. The intended visualization is likely a circular "lastkurven" (load curves) chart where each household's daily load curve is plotted on a circular axis (clock-like), and colored by value. This is a common pattern: a circular heatmap / time series. The code is incomplete and has errors, but that's the idea. It's a circular line chart of energy load curves over a year, colored by a scale from blue to red. Description to write (use up to 50 words, in English): A concise description of the data, the visualization technique, and the interaction. The description should follow the following style: [what the data is] : [what the graphic shows] . [How its made]: [what the visualization encodes] Write in one sentence. Important: Use the the-...-style? No. Use only neutral phrasing. No markdown syntax. Write only plain text, no formatting. Important: No line breaks. Single sentence. No markdown. Description length: 25 to 45 words. Use the data from the metadata. Write only the description, nothing else. Make sure that the description is about 35 words and covers following terms: - daily load curves - solar power - color scale Paying attention to the three following criteria. It is very important the description is valid in the following aspects: - Does the text include the necessary metadata and required content? - Is the text concise and grammatically correct? - Is the description vivid and tangible? - Does the text make sense and is not just listing bullet points? Make sure to use all three terms in the text (daily load curves, solar power, color scale).This visualization displays daily load curves for nine households as radial, circular line charts. It uses a color scale from blue to red to encode energy consumption magnitudes, making patterns of daily solar power usage and household demand cycles visible across the year.

Dec 12, 2017

Loading thumbnail…

Jahreszyklus

This example shows a time-series chart of energy consumption for nine households over the year 2017. The visualization combines a bar chart with daily maximum values and line charts showing consumption trends, using a blue-to-red color scale to encode magnitude. The chart is rendered with D3 v4 as SVG, with daily date values parsed on the x-axis and energy values on the y-axis. The bar chart uses a color gradient to highlight the maximum values per day, while the lines depict different household series.

Dec 11, 2017

Loading thumbnail…

Jahreszyklus

The visualization, titled "Jahreszyklus," presents a full year of daily electricity load data for multiple households in a radial, clock-like layout. Each of the nine concentric rings corresponds to a household (haus2 through haus10), with 365 days arranged angularly around the circle, forming a continuous yearly cycle. The data, loaded from a CSV, maps each day's load values to radial distances from the center. Grid circles and axis labels help compare magnitudes, while a subtle color palette and typography keep the chart clean and readable. The circular design emphasizes seasonal patterns and the cyclical nature of the data, inviting comparison across households over the year. The visualization is built with D3 v4, rendered as SVG, and initialized to fill the browser window. The original dataset appears to be power-load or similar time-series measurements for multiple entities (houses) across the year 2017. The chart uses a minimalist aesthetic with Open Sans typography and a restrained gray color scheme to highlight the data patterns. The title "Jahreszyklus" translates to "Annual Cycle" in German, suggesting the visualization is designed to reveal recurring patterns or seasonality in the dataset across the year. The visualization is likely a multi-series line chart drawn on polar coordinates.# Jahreszyklus ## Overview This radial visualization presents a full year of energy consumption data across nine household series (haus2–haus10), plotted as concentric circular line charts to reveal daily usage patterns throughout 2017. ## Design The chart uses a **radial coordinate system**, where the circular axis represents the months of the year and the radial distance from the center encodes power values. Each of the nine data series (haus2 through haus10) is drawn as a separate circular ring, with the year lines connecting daily measurements around the circumference. This creates an annual cycle—hence the title "Jahreszyklus" (annual cycle). ## Aesthetics The visualization employs a minimalist, elegant design with a clean sans-serif typeface (Open Sans). The color palette is restrained, using various shades of gray to distinguish elements without visual clutter. The radial layout places the data in concentric circles, with the light gray circular gridlines and axis labels contributing to a subtle, unobtrusive background. The title, subtitle, and credits are positioned at the top-left. Text elements are colored in muted grays, maintaining a professional and understated aesthetic. The use of negative space and thin strokes creates a refined, precise look. The radial chart is accompanied by January labels for each line. Overall the graphics looks like this: It's an polar chart showing 9 lines of different colors. On the outer ring there are labels for the weekdays or the months. There are axes and circles in the background. Please write a description of the visualization for the gallery entry. Write in English and use a maximum of 3 sentences. Provide only the description without title. Focus on what is depicted and the visual encoding. Also mention the chart type, the utilized data source, and where necessary the limitation of the chart. Mention that it was build with D3.js. The source is a CSV file with time series. The time series represent 9 different house electricity loads, one value per day for the year 2017. The radial chart draws circular axes with labels for German month abbreviations. The year is one full circle. Each house gets a colored line, and a legend shows house numbers. Describe it in max. 3 sentences.This radial line chart, built with D3.js (v4) and rendered as SVG, visualizes a full year of daily electricity load data for nine households. Each of the nine colored lines traces the consumption of one house around a circular timeline, with months arranged around the circumference and radial distance encoding the daily load values. Concentric circular axes and month labels help compare seasonal patterns across all households simultaneously, with a legend identifying each house. Data Source: gist. Author: AnniWis. License: MIT.

Nov 10, 2017