Tab.1(3)- Items of general project funding in 2018 (by nature of institutions)

Bar chart with D3.js

This interactive bar chart displays crime statistics across Costa Rican cantons, breaking down reported incidents by victim type and offense category. Built with D3.js v5, the visualization uses `d3.scaleBand` and `d3.scaleLinear` to position SVG rectangles, with data loaded from a CSV file via `d3.csv`. Hovering over a bar triggers `mouseenter` and `mouseleave` events that fade other bars, draw a dashed threshold line via `chart.append('line')`, and temporarily display percentage divergence labels for comparison.

Eest85

85% match

Tab.1(3)- Items of general project funding in 2018 (by nature of institutions)

This interactive stacked bar chart displays 2018 general project funding items categorized by institution nature, using D3.js to render SVG with animation. The visualization uses d3.layout.stack to stack segments by color, with hover tooltips via d3-tip showing segment counts. A color legend with d3-legend allows highlighting specific categories by fading other bars through semi-transparent overlays. Data comes from an embedded CSV file, processed through d3.nest to group by segment layers.

78% match

Costumising axes

This example visualizes reported crimes by province in Costa Rica for 2019 as a horizontal bar chart. Using `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis, it formats tick labels with `d3.format` to abbreviate numbers, replacing "G" with "B" (e.g., 22.8k becomes 22.8B). The chart removes axis domain lines and relies on tick marks for gridlines, with data loaded from a local `data.csv`. The SVG rendering uses custom CSS classes for axis labels and titles to style the chart.

NNelson30

78% match

Scatter Plot with Color Menu

This interactive scatter plot displays crime data from Costa Rica, showing the relationship between two selectable columns (such as Canton and Victima) using dot size and position, with a third column controlling dot color. Users choose the axes and color attribute from dropdown menus. Built with D3 v5, the visualization uses `scaleOrdinal` for color mapping, `axisLeft` and `axisBottom` for axes, and animates point placement with `transition().duration(2000)` and a delay. The dataset `Crimenes.csv` is loaded via `csv` and includes counts like "Cantidad_Delitos" for crimes by canton, victim type, and offense. A color legend, generated by `colorLegend.js`, appears on the right, using `schemeCategory10` for distinct hues.

Eest85

Tab.1(3)- Items of general project funding in 2018 (by nature of institutions)

This interactive stacked bar chart displays 2018 general project funding items categorized by institution type, with departments on the x-axis and item counts on the y-axis. Built with Vue and D3.js, it uses `d3.layout.stack` for bar layering and `d3.scale.ordinal` for positioning. Hovering over legend entries filters bars via a toggle mechanism, while `d3-tip` provides tooltips showing exact values per category and department. Animated SVG transitions and a color legend from `d3-legend` enhance exploration of the dataset.

Tab.1(3)- Items of general project funding in 2018 (by nature of institutions)

This interactive stacked bar chart visualizes 2018 general project funding items by institution nature, using D3.js (v3) with SVG rendering and animation. It forks Curran Kelleher’s stacked bar example, employing `d3.layout.stack`, ordinal and linear scales, and `d3.legend.color` for the categorical color legend. Hovering over legend entries highlights corresponding layers via a foreground bar layer and a semi-transparent overlay, while `d3-tip` displays tooltips with funding amounts. The y-axis uses a custom SI formatter replacing “G” with “B” for billions.

Tab.1(3)- Items of general project funding in 2018 (by nature of institutions)

This example uses an animated stacked bar chart to illustrate the distribution of project funding items across different institution types in 2018. The chart displays grouped data by segment and sub-category, with interactive hover effects that highlight specific categories and tooltips revealing exact sales figures. The visualization is built with D3.js, utilizing `d3.layout.stack` for the stacked bar layout, `d3.svg.axis` for axes, and `d3.legend.color` for the interactive legend that filters which sub-category bars are prominently shown. The data is sourced from a CSV file containing sales records sorted by segment and sub-category.

Tab.1(3)-Amount of general project funding in 2018 (by nature of institutions)

This stacked bar chart displays the amount of general project funding in 2018, broken down by nature of institution. The visualization uses a horizontal stacked bar layout, with each bar representing a department and color-coded segments for each category. Built with Vue and D3.js, it employs `d3.layout.stack` and `d3.scale.ordinal` to manage the stacked bars and axes. Interactive hover effects, powered by `d3-tip`, display detailed tooltips with revenue figures. A color legend allows users to filter and highlight specific categories by fading out non-selected bars.