Skip to main content
SimilarExport ZIP
100%

trend category

✓ Published1🌍 Public
Sshahedabdullhadi
Last edited Mar 18, 2021
Created on Mar 18, 2021

This visualization shows monthly crime counts across Costa Rican provinces from 2016 to 2019, with each year represented by a colored line. A dropdown menu allows users to switch between provinces, updating the line chart and its axis labels dynamically. The chart uses d3.scaleTime and d3.scaleLinear for axes, d3.nest to group data by year, and d3.line with curveBasis to draw smooth paths. A color legend maps years to distinct hues, and transitions animate line updates. Data is loaded from a CSV file using d3.csv.

AI-generated description
MIT Licensed

Similar vizzes

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
92% match
Loading thumbnail…

Delitos por provincia en Costa Rica

This example uses a line chart and dropdown menu to compare monthly crime counts across Costa Rican provinces from 2016 to 2019. The chart displays a selected province’s crime data over time, with separate lines for each year colored via a categorical scale. Users select a province from the dropdown, triggering a smooth 1.5-second transition of the line paths. It uses d3.csv for data loading, d3.scaleTime, d3.scaleLinear, d3.axisBottom, d3.axisLeft, d3.line with curveBasis, and d3.nest to group data by year, all rendered as SVG with CSS styling.

Sshehrbano1248
87% match
Loading thumbnail…

Delitos por provincia entre 2016 y 2019

This visualization shows monthly crime counts for each Costa Rican province from 2016 to 2019, with a dropdown menu to select the province displayed. Four colored lines represent each year, plotted over time with a color legend. The data is loaded from a CSV file sourced from Justicia Abierta Costa Rica’s police statistics. Built with D3 v5, it uses `scaleTime`, `scaleLinear`, `nest`, and `line` with `curveBasis` to render animated SVG paths, while `dropdownMenu` and `colorLegend` modules handle interactivity and legends.

NNelson30
86% match
Loading thumbnail…

Delitos por provincia entre 2016 y 2019

An interactive multi-line chart shows monthly crime counts across Costa Rican provinces from 2016 to 2019, with a dropdown menu to switch between provinces and a color legend distinguishing years. The visualization uses d3.v5 with scaleTime, scaleLinear, scaleOrdinal, axisBottom, axisLeft, and nest to group data by year, drawing smoothed paths using line and curveBasis. Data comes from Justicia Abierta Costa Rica, rendered as SVG with animated transitions when changing provinces, and includes a color legend created with d3.

IIgnacio Esquivel
86% match
Loading thumbnail…

Delitos por provincia en Costa Rica

This line chart shows monthly crime counts by Costa Rican province from 2016 to 2019, with a dropdown menu to switch between provinces. Using d3.scaleTime, d3.scaleLinear, d3.axisBottom, and d3.axisLeft, the visualization renders multiple colored lines via d3.line and d3.curveBasis, one per year, with d3.nest grouping data by year. A d3.scaleOrdinal color legend (d3.scaleOrdinal) and smooth d3.transition animations animate the path updates when selecting a new province. The data comes from a CSV file.

BBernal Rojas
86% 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
77% match
Loading thumbnail…

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
76% match
Loading thumbnail…

Top 4 delitos en Costa Rica. Periodo 2015-2018.

This stacked bar chart shows the top four crime categories in Costa Rica from 2015 to 2018: hurto, asalto, robo, and homicidios. The visualization highlights the relative frequency of each crime type per year, with segments stacked to reveal both individual and cumulative values. Built with D3 v3 and React, the code uses `d3.layout.stack()` to transpose the data, `d3.scale.ordinal()` for the x-axis, and `d3.svg.axis()` for rendering axes. An interactive tooltip, created with SVG elements, displays the exact count when the user hovers over a segment. The data originates from an embedded array within the HTML.

AAlejandro Zamora Esquivel
75% match