Costumising axes

100%

Costumising axes

✓ Published0🌍 Public

Last edited May 30, 2020

Created on May 30, 2020

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.

AI-generated description

MIT Licensed

Similar vizzes

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

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

78% match

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

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

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

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

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

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

75% match