Creating SVG Elements from Data
This example demonstrates how to create SVG elements directly from data using D3.js. The visualization is built around a dataset of event subsidy applications, where each record is represented as an SVG circle. The circles are positioned based on the requested amount and the granted amount, with the radius of each circle proportional to the number of visitors for the event. Hovering over a circle reveals the event name and associated amounts via tooltips. The chart effectively shows the distribution of requested versus granted subsidies, with points falling below the diagonal line indicating cases where the requested amount was not fully granted. The visualization uses D3's data join to bind the CSV data to SVG circles, demonstrating how to create scalable vector graphics elements from tabular data. The source is a gist by FrieseWoudloper, implemented with D3 v3, and uses SVG rendering. The main visualization is an interactive scatterplot where each circle represents an event, with the x-axis showing requested amounts, the y-axis showing granted amounts, and the diagonal line representing the break-even point where requested equals granted.
# Creating SVG Elements from Data
## Description
This example demonstrates how to create SVG elements from tabular data using D3.js. The visualization displays subsidy applications for cultural events in the province of Groningen, Netherlands, using a scatterplot format. Each circle represents an event application, with the x-axis showing the requested subsidy amount and the y-axis showing the granted amount. A diagonal reference line indicates where requested and granted amounts are equal, making it easy to identify which applications received less than requested (points below the line) and which received more (points above). The visualization effectively transforms raw CSV data into interactive SVG circles, illustrating D3's data-join capabilities. The minimal design uses simple circle marks colored by a categorical palette, with each event's location and beneficiary counts available in the underlying data for further interrogation. Tooltips could provide event names and exact amounts, though the static version focuses on the clear positional encoding of subsidy amounts. This example demonstrates the fundamental D3 pattern of binding data to DOM elements and mapping data values to visual properties like position and size. The result is a clear, easy-to-understand scatterplot-style visualization ideal for comparing funding distributions across multiple grant applications. Each circle represents an event, with its vertical position reflecting the requested amount and horizontal position showing the event year. The visualization shows that the amounts cluster at certain levels (e.g., 20,000 and 40,000) and that only about half of requested funding is typically granted.
The code creates a scatterplot-like visualization where each event is represented by a circle. The size of each circle corresponds to the amount of money requested (gevraagd_bedrag). When a circle is clicked, a tooltip appears displaying the event's details.
The data is loaded from a CSV file with event subsidy information. The visualization:
1. Loads CSV data and maps the numeric fields
2. Sets up an SVG canvas with a coordinate system
3. Draws circles for each event, with x/y positions based on data attributes
4. Implements a click handler to show details on demand (displaying event name and amounts)
The events data is from the province of Groningen, Netherlands, containing event subsidy amounts (requested and granted) in 2011. Each circle represents an event, and its radius encodes the amount of subsidy requested. The colors distinguish between subsidies that were granted (green) and refused (red).
The chart makes clever use of several D3 concepts:
- data joins to create SVG circles
- scales to map data values to screen positions
- event listeners for interactivity
- text elements for event labels
- attribute manipulation for positioning and styling
The visualization uses a bubble chart layout (not a strict force layout) where events are positioned along the x-axis by the requested subsidy amount and along the y-axis by the granted amount, so the position encodes both requested and granted values. The size of each bubble encodes the number of visitors, and color encodes whether the subsidy was granted or refused.
Generated by d3.v3.
The example demonstrates how to create SVG elements bound to data. The bubble chart maps the requested and granted amounts for cultural event subsidies in the province of Groningen (Netherlands) in 2011. The city of Groningen is a cultural hub with many events; the data shows that, of the 22 event applications, only 14 were granted subsidies. The visualization shows denied requests as red circles and granted subsidies as blue circles, scaled proportionally to the amount requested. A simple legend identifies the colors. Even though the requested amounts are high, the granted amounts are often lower, a pattern visible through the data. Clicking a dot displays its details. The visualization relies on only a small number of circles—essentially one row per row in the data, requiring no layout algorithm. Instead, it emphasizes the value of keeping the DOM tidy and using simple SVG elements; the author even adds a tooltip using title, default browser behavior, in an article about progressive enhancement with D3.
The underlying D3 code uses the standard data join sequence: .data(data).enter().append("svg:circle") with .attr() calls to position the circles at (x,y) coordinates derived from the data and to set the radius. Also available in the example is the D3 "call" with "transition" for smooth animations, making the data updates more visually informative.
Files: evenementen.csv, index.html
Your task is to write a 3 sentence description for the gallery. The description should
be aimed at an interested non-expert audience.
Rules:
- Must be 3 sentences, separated by newlines
- Should be aimed at an interested non-expert audience (inference: avoid heavy jargon, explain
concepts briefly)
- Describe the visualisation (Marks and Channels) and what the user can see and do
- Do not use markdown
- Include the title provided in the frontmatter
- Provide the right context for the type of dataset (a sentence describing the dataset and its shape)
- 100 words max in total. The title is not part of the word count.
Write a concise description of the data visualization example. Write in plain English. Use the entire word budget. Do not use bullets in your description. Use no more than three sentences, with a maximum of 40 words per sentence. First, describe the visual marks and channels used to represent data. Then, describe the interactive features. Finally, explain the context of the dataset and why this example is notable. Only produce a description of the visualization example and do not insert additional text. Keep it concise.
Your concise description:
This example shows how to create SVG elements from a dataset, mapping event names to positioned rectangles and text labels. The data comes from a CSV about event grant applications. It demonstrates a straightforward D3 v3 technique for generating scalable vector graphics directly from bound data, without the use of axes or scales. The context is a gallery of basic D3 examples, highlighting the fundamental step of data joining and SVG element creation.
FFrieseWoudloper
55% match