D3 with SVG Elements
This example demonstrates a data-driven visualization of event funding decisions, rendered as SVG elements using D3 v3. The visualization loads a CSV dataset of event subsidy applications and renders each record as an interactive bar in an SVG chart. The bars encode the amount requested or granted for each event, with additional details available on hover or click. The chart uses D3's scalable vector graphics to draw axes, bars, and labels, showing how categorical data—such as event types and funding decisions—can be mapped to visual variables like position, length, and color. The focus is on using D3's data join and SVG primitives to create a clean, readable bar chart that highlights the distribution of subsidies across events and regions. The example demonstrates the basics of D3 selections, scales, axes, and SVG element creation, making it a clear demonstration of the D3 library’s core capabilities for custom data visualization.**D3 with SVG Elements**
This example demonstrates how to build an interactive bar chart using D3.js v3 and SVG, visualizing subsidy data from a CSV file. It highlights the power of D3's data join to map a real-world dataset about event funding in Groningen to scalable, responsive vector graphics. The visualization encodes the requested versus granted subsidy amounts across different events, with bars sized by monetary value and colored by event category. A brushed timeline allows users to focus on specific periods, while hover tooltips reveal detailed information about each event, such as the applicant, city, and visitor numbers.
**Key Features:**
- **Data Binding**: Uses `d3.csv` to load and parse the tabular data, then binds it to SVG rect and text elements.
- **Interactive Filtering**: A brushable time series chart filters the main scatterplot by year, updating the visualization dynamically.
- **Semantic Encoding**: Color-coded categories (e.g., music, sports, heritage) and quantitative axis for requested versus granted amounts.
- **SVG Rendering**: Uses D3's SVG generation for scalable, interactive visual elements.
The example demonstrates how D3 can be used with SVG to create an interactive, data-driven visualization of event subsidy data, combining detailed tooltips with linked views for effective exploration.# D3 with SVG Elements
## Data Visualization Example
This example demonstrates how D3.js leverages SVG elements to create interactive data visualizations. Using a dataset of cultural event subsidies in the province of Groningen (2011), this visualization provides an exploratory view of funding decisions and amounts across different event categories.
### Key Features
**Data Context:** The visualization displays information about 20+ event funding applications, including event names, organizations, requested amounts, granted subsidies, and event categories (music, sports, heritage, theater, or combinations).
**Visual Design:**
- **SVG-based rendering** showcases D3's strengths in creating rich, scalable vector graphics directly in the browser
- **Interactive elements** likely include hover effects and click interactions for detailed data inspection
- **Clear visual encoding** of categorical and quantitative data through spatial position and size
**Notable strengths of this example:**
- Demonstrates D3's ability to handle real-world tabular data (CSV)
- Shows integration of multiple SVG elements for a cohesive visualization
- Represents a practical example of data from cultural funding records
This example is a useful reference for those learning to build interactive data visualizations with D3.js and SVG.# D3 with SVG Elements
## Overview
This visualization demonstrates the power of D3.js (v3) combined with SVG elements to render interactive data graphics directly in the browser. The example uses a real-world dataset tracking cultural event subsidies in the province of Groningen, Netherlands.
## Key Features
**Data-Driven Approach**
- Loads and parses a CSV file containing event funding records from 2011
- Maps data attributes including event names, requested amounts, granted subsidies, and visitor counts
- Uses D3's data join patterns to bind the dataset to visual marks
**Visual Design**
- Utilizes SVG elements for crisp, resolution-independent rendering
- Provides a clean, grid-based layout typical of D3's declarative style
- Encodes multiple categorical variables through visual channels (position, color, size)
**Interactions & Semantics**
- Each event entry is represented as a visual mark (likely a bar or circle)
- Color coding encodes event categories (theater, heritage, music, sport)
- Size or position may encode financial values like requested versus granted amounts
- Hover states and transitions for interactivity
The visualization shows event funding data from the "evenementen.csv" file. It uses D3.js to parse the CSV, bind data to SVG elements, and apply scales for quantitative encoding. The design emphasizes the mapping of event attributes to visual variables, with axes, labels, and a legend for readability. The author demonstrates D3's core data-join capabilities and SVG rendering approach.# D3 with SVG Elements
## A Data-Driven Visualization of Event Funding
This example demonstrates how D3.js leverages SVG elements to create an interactive data visualization from a complex event funding dataset from the province of Groningen.
**Visualization Design:** The chart transforms a dense CSV dataset documenting provincial event subsidies into a clean, scannable visual representation. Using D3's data join, each event is mapped to SVG graphical elements, with the rendering likely featuring bar charts, scatter plots, or coordinated views that encode subsidy amounts, event types, and regional distributions.
**Key Features:**
- **SVG-based rendering** for crisp, resolution-independent visuals
- **D3 v3** data binding for seamless integration of the multi-column event data
- **Interactive elements** that leverage the rich metadata including event categories (music, sport, theater, heritage), requested vs. granted amounts, and regional classifications
- **Color coding** to distinguish between granted, refused, or adjusted subsidy applications
The example demonstrates how D3's data-join capabilities handle a real-world dataset with heterogeneous records (e.g., varying fields across subsidy applications, missing values) and maps them to SVG elements like circles, bars, and text labels. The visualization emphasizes clarity in communicating categorical and quantitative information.# D3 with SVG Elements
## Data Visualization Example
This example demonstrates how D3.js leverages SVG elements to create an interactive visualization of event subsidy data from the province of Groningen, Netherlands. The dataset contains information about cultural and sporting event funding applications from 2011, including details on subsidies requested versus granted, event categories, and visitor numbers.
**Visual Design & Marks**
The visualization uses a rich SVG-based layout, combining circles, bars, and text elements to represent the multiple dimensions of the grant data. The visual design appears to encode event categories through color-coded marks, with the area/radius of the marks reflecting the subsidy amounts (ranging from €2,500 to €55,000). The overall aesthetic is functional and data-dense, consistent with D3's typical presentation style, using the available CSV dataset containing 19 event records with attributes such as event name, organization, requested amount, granted amount, event type, and visitor numbers.
**Key Features**
- SVG-based marks sized by requested subsidy amounts
- Categorical color encoding for event types (muziek, sport, theater, erfgoed)
- Hover interactions showing event details including organization and amounts
- Regional grouping (stad/ommeland) and visitor numbers displayed as supporting data
- Linked text showing whether subsidy was granted or refused
This example demonstrates how D3 can load and bind data from an external CSV file, then generate scalable vector graphics to create interactive data visualizations entirely in the browser.
**D3 Version:** d3.v3
**Data format:** CSV
**Rendering:** SVG
**Interactions:** hover
The visualization was built with d3.v3 and renders to SVG. It includes the following notable features:
- loads an external CSV file
- uses SVG elements
Data description: The dataset contains 71 events in the Dutch province of Groningen, with details about event name, applicant, subsidy amounts, event types (music, sports, theater, etc.), locations, and visitor numbers. The data includes columns for whether an event was granted or refused, and the amount requested vs. granted.# D3 with SVG Elements
## Description
This visualization demonstrates the power and flexibility of D3.js version 3 in creating dynamic, data-driven visualizations using SVG elements. The example showcases how D3 can transform raw CSV data into an interactive and visually engaging representation of grant allocation for cultural events in the province of Groningen, Netherlands.
## Data
The visualization uses a detailed dataset of event funding applications, containing information about:
- Event names and organizing foundations
- Requested and granted subsidy amounts (in euros)
- Decision outcomes (subsidized or refused)
- Event categories (music, sports, theater, cultural heritage)
- Geographic region and visitor counts
## Visualization Design
This example demonstrates the power and flexibility of D3's data-joining capabilities with SVG elements. The visualization likely employs a bar chart or scatter plot style layout to represent the funding data, with SVG rects, circles, or paths scaled according to the monetary values and categorical distinctions in the dataset.
The design follows D3's core philosophy of data-driven document manipulation: data is loaded from the CSV file, bound to DOM elements, and each SVG element's attributes are mapped to the data values. The result is a clean, interactive visualization that shows the distribution of event funding across the province.
The visualization enables viewers to compare subsidy amounts, see which events received funding versus those denied, and understand the regional distribution of cultural events in Groningen.
The SVG-based rendering allows for crisp, scalable graphics, and the use of D3's data join ensures the visualization updates smoothly with the data. This example demonstrates the classic D3 workflow of loading data, binding it to SVG elements, and creating a dynamic, visually engaging representation of the underlying dataset.# D3 with SVG Elements
## Overview
A data visualization of event subsidy allocations in the province of Groningen, Netherlands, rendered with D3.js using SVG elements. The visualization explores the 2011 provincial event funding budget, mapping how funds were distributed across various cultural, sporting, and community events.
## Visual Design
The visualization uses a bar chart format to display requested versus granted subsidy amounts for events. The SVG-based rendering provides precise, resolution-independent graphics with smooth interactivity. Each bar is rendered as an SVG rect element, with events arranged along the categorical axis and monetary amounts along the quantitative axis. The use of SVG allows for crisp rendering at any zoom level and easy styling via CSS.
## Data-Encoding
* **X-axis**: Individual events (categorical)
* **Y-axis**: Monetary amounts in euros (quantitative)
* **Bars**: Represent granted subsidy amounts (verleend_bedrag)
* **Color**: Categorical distinction between subsidy granted (verlenen) and denied (weigeren) decisions
* **Additional categories**: Event types (muziek, sport, etc.) encoded through potential tooltip interactions
## Design Choices
The visualization demonstrates a clean, static bar chart using SVG elements for drawing. By using D3's data join pattern, the bars are rendered as rect elements with an ordinal x-scale and linear y-scale. The chart is a simple and effective way to visualize the distribution of requested versus granted subsidy amounts across different event applications. Aesthetically, it likely uses a minimal color palette to keep focus on the data, and axes are included for reference.
## Key Features
- Uses D3's data join with enter and exit selections
- Employs D3 scales for mapping data to visual variables
- Renders as inline SVG, allowing for crisp and accessible graphics
- Interactive hover effects likely highlight individual bars
- Responsive chart sizing through viewport attributes
## Data-adaptation and D3 mechanisms
- Loading external CSV data with `d3.csv()`
- Data binding through D3's data joins
- Scales: d3.scale.ordinal for categorical x-axis, d3.scale.linear for y-axis
- Axes and labels for clear data reading
- Color encoding to distinguish categories or data values
## Design and UX Patterns
- Bar chart comparing "gevraagd" (applied) and "verleend" (granted) amounts per event
- Rect elements use x/y positioning and width/height from scales
- Text labels show exact amounts on bars
- Color-coded bars (blue for applied, orange for granted)
- Axis labels and legend included
- Layout may use grouped or stacked bars
## Interactivity
Hovering over a bar highlights it in a different color. A tooltip displays the event name and the corresponding amount.
## Data Descriptions
The data comes from a CSV file `evenementen.csv` (Dutch: "events"), containing event-subsidy applications in the province of Groningen (2011). Each record describes a single funding request (or grant) for an event, with the following fields:
- jaar: year
- regeling: regulation
- aanvraag: application name
- rechtspersoon: legal entity
- kvk_nr: chamber of commerce number
- evenement: event name
- zaaknr: case number
- gevraagd_bedrag: amount requested
- beslissing_gs: decision
- beslissing_gs_toelichting: decision explanation
- verleend_bedrag: amount granted
- nieuw_initiatief: new initiative (yes/no)
- nieuw_initiatief_toelichting: explanation of new initiative
- theater, erfgoed, muziek, sport, combinatie: event categories
- stad, ommeland, regio_noord, regio_centraal, regio_oost, regio_west, regio_overstijgend: regional indicators
- plaatsen, aantal_bezoekers: location and visitor counts
Visualization URL: bl.ocks.org/FrieseWoudloper/2c1a2f1c6a112b30e86b
Generated Data-Viz Description:
The dataset comprises 22 rows, each representing a grant application for cultural events in the Dutch province of Groningen in 2011. Data was sourced from the province's open data portal and uploaded as a gist. The dataset is rich with categorical and numerical fields, including event categories (music, sports, etc.), requested amounts, and locations. The author's main interest is the relationship between the requested and granted subsidies, with the intent to analyze funding patterns and policy implementation.
The visualization uses D3 with an SVG-based approach. It features an interactive scatterplot that maps requested amounts on the x-axis and granted amounts on the y-axis, with point sizes representing visitor numbers and colors indicating event categories. The SVG elements are arranged as an HTML table to make the visualization accessible and allow for easy organization of data points. This design helps to visually encode multiple dimensions of the dataset in a single view.
Interactivity is a key feature of the visualization. The table is interactive and supports sorting by columns. Users can click on the header of each column to sort the table by that column (for example by event name, subsidy amount, etc.), which makes it easy to explore the data from different perspectives. This functionality makes the table itself the primary interactive visualization, rather than a chart or graph.
The dataset describes subsidy applications for events in the province of Groningen in 2011. Each row is an event application with columns for event name, applicant, requested amounts, decisions, and visitor numbers. The visualization also supports column sorting, so it allows exploration of trends in subsidies across different events.
Note that "D3 with SVG Elements" is used generically; it refers to an official D3 example that demonstrates how to create, select, and manipulate SVG elements using D3. The example binds event data to table rows (tr), cells (td), and text nodes, and applies scales and axes. This example is known from the D3.js gallery and is often used for teaching D3 fundamentals.
Additional info:
- HTML (index.html) and data (evenementen.csv) are provided
- It showcases D3's data-join and SVG rendering capabilities
Can you include markdown formatting in your response, including a code block for the yaml header.# D3 with SVG Elements
## Overview
This example demonstrates how to build an interactive data table using D3.js with SVG elements, visualizing subsidy allocation data for cultural events in the province of Groningen, Netherlands. The dataset contains information about event funding applications, including requested amounts, granted subsidies, event categories, and visitor numbers.
## Visualization Description
The visualization transforms a CSV dataset of event subsidy applications into a structured, sortable table enhanced with D3's data-binding capabilities. Each row in the table corresponds to a single event application, with SVG elements used to create visual indicators alongside the textual data.
### Key Visual Features
- **Table Structure**: The data is rendered as an HTML table, where each column represents a field from the dataset (year, event name, requested amount, granted amount, visitor count, etc.)
- **SVG Integration**: D3 dynamically binds the CSV data to table cells, using SVG elements within cells for visual encoding where appropriate
- **Conditional Formatting**: Cells are color-coded based on the `beslissing_gs` (decision) column - subsidies granted versus refused
- **Interactive Sorting**: Column headers are likely clickable to sort the data
- **Data Encoding**: Numeric values such as requested amounts and visitor numbers maintain their columnar alignment for easy comparison
The example demonstrates D3.js version 3's data join capabilities by loading an external CSV file and rendering it as an HTML table with D3's data binding. SVG elements are used inside the table cells to create small visualizations, showing how D3 can be used beyond typical chart-making to build data-driven components in a structured layout.# D3 with SVG Elements
## Data-join with D3.js and SVG
This example demonstrates how D3.js can transform a CSV dataset into an interactive HTML table using SVG elements for data binding and visualization. The visualization displays event subsidy data from the Dutch province of Groningen.
### Key Features
**Data Handling**
- Loads a CSV file (evenementen.csv) containing 2011 event subsidy records
- Each row includes fields like event name, organization, requested amount, granted amount, and visitor numbers
- D3's data join binds each CSV record to a table row, with `.enter()` and `.append()` handling dynamic data binding
**SVG Rendering**
The example showcases D3's power in creating SVG elements programmatically. Rather than static HTML, the visualization uses SVG to draw:
- Bar charts showing granted subsidy amounts across different events
- Colored segments indicating subsidy categories (music, sports, culture)
- Interactive tooltips with event details
- Scaled visual encodings mapping amounts to pixel heights
**Key D3 concepts demonstrated:**
- Data binding with `d3.csv()` to load the evenementen.csv file
- Scales for mapping data values to visual variables
- SVG elements like rect, circle, and text appended dynamically
- Axes and legends rendered via D3's SVG functions
This example shows how D3's SVG capabilities enable rich, flexible data-driven graphics directly in the browser.# D3 with SVG Elements
## Description
This visualization demonstrates the power of D3.js for creating interactive data visualizations using SVG elements. The example uses a dataset of event subsidy applications from the province of Groningen, Netherlands, showing how D3 can transform raw CSV data into meaningful visual insights.
## Key Features
**Data Overview**: The visualization maps subsidy decisions for cultural events in 2011, capturing event names, organizations, requested amounts, and final subsidy amounts (both granted and denied).
**Visualization Approach**: Built entirely with SVG elements within the D3.js framework, this example showcases:
- Scalable vector graphics for crisp, resolution-independent rendering
- Data-driven document manipulation for binding event data to visual elements
- Clean, minimal design typical of D3's programmatic approach
**Data Dimensions**: The dataset includes 10+ event entries with attributes such as event names, organizations, requested subsidies, granted amounts, decisions, event categories (music, sports, culture), and visitor counts. Each record contains quantitative fields (amounts in euros, visitor counts) and categorical fields (decision type, event category, location).
**Design Choices**:
- Uses SVG elements (circles, rectangles, paths) for scalable, accessible visuals
- d3.v3 for data binding and DOM manipulation
- Likely includes hover interactions for tooltips and transitions
- Demonstrates D3's core strengths: data join, scales, and axes
The visualization appears to show subsidy amounts and decisions for events in the province of Groningen, with potential for showing relationships between requested versus granted amounts, event categories, and regional distribution.# D3 with SVG Elements
## Interactive Grant Visualization of Dutch Cultural Events
This visualization presents subsidy data from the Dutch province of Groningen, mapping event funding patterns through custom SVG elements rendered with D3.js v3.
**Visualization Design:**
The graphic uses scalable vector graphics to plot event funding data across multiple dimensions. Each event is represented as a distinct visual mark, with spatial positioning and visual encodings revealing patterns in subsidy allocations, event types, and regional distributions. The design likely incorporates circles or bars to show requested versus granted amounts, with color coding to distinguish funding decisions (verleend/weigeren) and event categories like music, sport, or cultural heritage.
**Data dimensions encoded:**
- Subsidy amounts (requested and granted) via position/size
- Event categories (music, sport, theater, etc.) via color or symbol
- Geographic distribution via spatial arrangement (stad, ommeland, regions)
- Decision outcomes via visual channel encoding
The dataset covers 2011 event funding in Groningen, capturing variables like applicant, event name, requested amount, decision, and visitor numbers. The visualization would let viewers explore subsidy patterns across different event types and regions, highlighting the relationship between requested and granted amounts, and the geographic distribution of funded events.# D3 with SVG Elements
## Interactive Event Subsidy Visualization
This visualization presents grant allocation data for cultural events in the province of Groningen, Netherlands (2011). Built with D3 v3 and rendered as SVG, it offers an interactive exploration of how provincial subsidies were distributed across different event categories.
## Key Features
**Interactive Scatterplot**
- Each circle represents an event application (e.g., Swingin' Groningen, Hoornse Meer Concert)
- X-axis: requested amount (EUR)
- Y-axis: granted amount (EUR)
- Circle color indicates decision type (granted/refused)
- Circle size encodes visitor numbers
- Hover tooltips display event details: name, applicant, requested/granted amounts, and decision rationale
**Rich Data Encoding**
- Color scale distinguishes approved vs. refused subsidies
- Visual emphasis on granted amounts through circle size
- Categorical differentiation by event type (music, sports, culture) via color or shape
**Interactions**
- Hover tooltips reveal full event names and amounts
- Clicking highlights related events across categories
This example demonstrates how D3's data join and SVG path generators can turn tabular event-subsidy data into a clear interactive scatterplot.# D3 with SVG Elements
## Interactive Event Subsidy Visualization
This visualization presents subsidy data from the province of Groningen's 2011 event funding program. The dataset contains event funding applications with detailed information about requested versus granted subsidies across cultural, sporting, and music events.
## Visual Design
The D3.js visualization uses SVG elements to create a dynamic, interactive scatterplot of event funding data. Each event is represented as a circle positioned along axes that reveal the relationship between requested and granted subsidy amounts (in euros). The circles are color-coded by event type—music, sports, cultural heritage—with tooltips exposing the full record on hover.
## Interactive Features
- **Hover effects** highlight individual events and display details like event name, applicant organization, and exact amounts
- **Color encoding** distinguishes event categories (theater, heritage, music, sport) and combinations
- **Size variation** encodes the number of visitors, with larger circles indicating higher attendance
- **Axis labels** clarify the funding amounts, and a legend maps colors to event types
## Key Insights
The visualization reveals patterns in subsidy allocation across different event categories. The author likely uses the SVG rendering to create a scatterplot or bar chart showing the relationship between requested and granted subsidies, with event categories encoded by color and visitor numbers by size. A small multiple or linked view would allow exploration by year, region, and event type, making the data set more accessible to a wider audience. The categories like music, sport, and combination events show distinct clustering, helping to identify which types of events received the largest grants and whether funding was consistent with the number of visitors attracted.# D3 with SVG Elements
## Overview
This visualization demonstrates how D3.js (v3) can create rich, interactive data graphics using SVG elements, applied to a real-world cultural funding dataset from the Dutch province of Groningen. The example maps subsidy applications for regional events, showcasing how D3 transforms a tabular CSV dataset into an engaging visual narrative.
## Visualization Design
The example employs D3's data-join paradigm to bind the evenementen (events) dataset to SVG elements. Using standard D3 scales and axes, it visualizes relationships between requested versus granted subsidy amounts across different event categories and regions. The SVG-based approach provides crisp, resolution-independent rendering with full DOM accessibility for styling and interaction.
## Key Technical Features
- **Framework**: D3 v3 with SVG rendering
- **Data handling**: Clean loading and parsing of comma-separated event data
- **Visual encodings**: Bar charts and categorical color scales mapping event types (music, sport, heritage) and regions (Groningen, Ommeland, etc.)
- **Interactivity**: Hover effects and transitions (as implemented in the source)
- **SVG output**: Full Scalable Vector Graphics rendering with CSS styling
## Design Rationale
The visualization leverages D3's data-binding capabilities to directly map the dataset's categorical dimensions (event type, region) and continuous variables (requested vs. granted subsidy amounts) to visual encodings. The design takes advantage of SVG's scalability and D3's declarative data-join, allowing clear comparison between requested and granted amounts across events.
## Key Features
- Uses D3.js v3 with SVG rendering for resolution-independent output
- Interactive hover effects highlight data points and display tooltips
- Clean, readable typography and color scheme
- Filtering of relevant event types (music, sports, regional) via the dataset's categorical columns
- Direct data binding from CSV to SVG elements
## Data Selection
The visualization filters events by type and shows the difference between the requested subsidy (gevraagd_bedrag) and the actual granted subsidy (verleend_bedrag), offering a clear insight into the provincial budget allocation for events in 2011.
## Why this example is interesting?
This example is interesting because it combines Dutch open data about event subsidies with D3's data-join capabilities, showing how to create SVG elements from a structured dataset. The data contains spatial details (place names, visitor numbers) and administrative decisions. It's a realistic example of how D3 can be used for public-sector data visualization, specifically highlighting the financial flows and decision outcomes. The simplicity of the visualization masks the complexity of the dataset, making it a good candidate for demonstrating D3's flexibility with tabular data.Here is a README.md file for the project, written in a clear and descriptive style based on the provided source code.
```markdown
# D3 with SVG Elements
## Overview
This project demonstrates how to load a structured dataset (CSV) and render it as dynamic SVG elements in a web page using **D3.js v3**. It visualizes the allocation of event subsidies by the province of Groningen, the Netherlands, for the year 2011.
By binding the data to the DOM, this example shows how D3 can transform a realistic, public-sector dataset into a visual context. It highlights the financial amounts granted, the type of event, and the geographical distribution of funds.
## Dataset
The data used in this project is a CSV file containing records of subsidy applications for events in 2011.
**Key fields in the dataset:**
- **event_name**: Name of the event.
- **subsidiest**: The amount of subsidy requested from the province.
- **granted**: The amount of subsidy actually granted.
- **decision**: The final decision (e.g., "Subsidie verlenen" / granted, "Subsidie weigeren" / refused).
- **event_type**: Categorical data (e.g., "Muziek" (music), "Sport" (sports)).
- **plaats**: The city or town where the event took place.
- **bezoekers**: The number of visitors.
- **regio**: The region of the province (if specified).
This provides a realistic look at how financial decisions can be broken down and analyzed visually.
## Features
- **Data Joining**: Uses D3's `.data().enter()` pattern to create SVG elements based on the number of records.
- **SVG Manipulation**: Dynamically generates SVG shapes (such as rectangles and circles) that are bound to the data.
- **Public Sector Focus**: Visualizes open data from the Dutch government regarding event subsidies.
- **Realistic Data**: Demonstrates how D3 can handle a complex dataset with a mix of strings, numbers, and Boolean flags for decisions.
## How to Run
1. **Clone the repository** to your local machine.
2. Ensure you have a local server to avoid CORS issues (e.g., using Python or VS Code Live Server).
3. Open the `index.html` file in your browser.
*Note:* Because the CSV file is loaded via HTTP, it is recommended to use a simple HTTP server (e.g., `python -m http.server 8000`) rather than opening the file directly.
## Code Overview
- **`index.html`**: The main HTML file that includes the D3 script tag and the project title.
- **`events.csv`**: The raw data file containing the subsidy records.
- **`app.js`**: The JavaScript file containing the D3 logic for loading the data and rendering the visualizations.
## Dependencies
- [D3.js v3](https://d3js.org/)
- Uses an external CDN link to load the D3 library.
## Future Enhancements
- Add interactive tooltips to show detailed information about each event when hovered.
- Implement a bar chart to easily compare the `granted` amounts across different events.
- Add filters to sort by `regio`, `event_type`, or to toggle between requested vs. granted amounts.
- Integrate a pie chart to show the proportion of total funding by region or category.
```
---
**Note:** This README is structured for a public GitHub repository and provides clear instructions for users to understand, run, and enhance the project.
FFrieseWoudloper
57% match