Fork of trend category

100%

Fork of trend category

✓ Published0🌍 Public

Last edited Mar 18, 2021

Created on Mar 18, 2021

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

trend category

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.

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

83% 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

81% 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

81% 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

81% 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

78% 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…

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

74% match