Bar chart with D3.js

100%

Bar chart with D3.js

✓ Published0🌍 Public

Last edited May 30, 2020

Created on May 30, 2020

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

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

This example displays a stacked bar chart of crime records from Costa Rica, where each bar represents a sub-delito (sub-crime) category and is segmented by the canton (county) where the crime occurred. The visualization uses D3.js version 3 to render SVG shapes with animated transitions, and includes an interactive color legend that highlights specific cantons when hovered. It also provides tooltips via the d3-tip library to show detailed counts. The data is loaded from a CSV file containing 110 crime entries with fields for canton, district, and crime type. The chart is a direct adaptation of Curran Kelleher's stacked bar chart example, with modified axis labels and formatting.

Eest85

85% match

Loading thumbnail…

Bar chart with D3.js

This bar chart visualizes COVID-19 infection counts across cantons in San José, Costa Rica, with San José leading at 145 cases. Built with D3 v5 and SVG, the chart uses `d3.scaleBand` and `d3.scaleLinear` for axes and rendering animated bars from CSV data. Hovering a bar triggers a `mouseenter` event that draws a dashed guide line and displays divergence values relative to the hovered canton, while fading other labels. Gridlines, axis titles, and descriptive text clarify the data, though no tooltip or transition effects are present beyond opacity changes.

AAdrianlead

83% match

Loading thumbnail…

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

83% match

Loading thumbnail…

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

81% match

Loading thumbnail…

Fork of trend category

This interactive line chart compares crime counts across Costa Rican provinces over time using D3 v5. A dropdown menu lets users select a different province to display, with color-coded lines representing yearly trends from 2016 to 2019. The visualization uses `d3.scaleTime`, `d3.scaleOrdinal`, `d3.line` with `curveBasis`, and animated path transitions via `transition.attr` to smoothly update the data. SVG rendering with custom axes and a color legend provides a clear comparison of seasonal patterns across provinces.

Sshahedabdullhadi

78% match

Loading thumbnail…

Fork of D3.js Line Chart

This visualization displays country crime indices as a line chart, using a bar-chart-style categorical X axis for countries and a linear Y axis for crime scores. Built with D3 v7, it loads data from a CSV file using `d3.csv`, applies a `scaleBand` for country positioning and `scaleLinear` for the crime index range, and draws the line with `d3.line()`. The SVG chart includes axes, labels, and a thick steel-blue stroke, rendered within a fixed 960×400 pixel canvas and styled with external CSS.

Bbhanuprasadk19

77% match

Loading thumbnail…

3D Bar Chart using D3.js

This example visualizes reported crimes across Texas cities from January to September as an interactive 3D bar chart, with each city represented by a cluster of colored bars for each month. The visualization uses D3.js v5 for data loading and scales, while the d3-x3d plugin and the d3-3d library generate the 3D geometry and rendering via X3DOM. The CSV dataset is parsed with d3.csv, and the chart is created with `d3.x3d.chart.barChartMultiSeries()`, displaying crime counts on the axes.

Nnagarajuobbineni

77% match

Loading thumbnail…

Cantones por Población

A horizontal bar chart displays the population of Costa Rica's cantons, sorted by name. The visualization uses D3 v5's scaleBand and axisLeft to position and label each canton, while a linear scale maps population values to bar widths. The data is loaded from a CSV file, and the SVG rendering includes grid lines via tickSize and a titled axis.

KKennethSF

76% match