fresh block

100%

✓ Published0🌍 Public

Last edited Aug 29, 2018

Created on Aug 29, 2018

This example visualizes municipal-level data from the 2018 Colombian anti-corruption consultation, ranking municipalities by their census population. It uses a horizontal bar chart where each bar’s width maps to the census count via a linear scale, and each bar is labeled with its municipality name. The code loads JSON data from a GitHub repository using d3.json, then applies d3.scaleLinear for the x-axis and d3.descending to sort the data in decreasing order. The visualization relies on D3 v4 to append rect and text elements, with styling set through inline attributes.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

D3 DataBinding

This example demonstrates a basic scatterplot-style bar chart created with D3 v5, showing census data for Colombian municipalities loaded from a JSON file hosted on GitHub. The chart uses a linear scale (`d3.scaleLinear`) to map census values to horizontal bar widths, with rectangles appended to an SVG element via D3’s data join (`selectAll`, `.data`, `.enter`). Bars are sorted in descending order using `d3.descending` and rendered with a fixed height, while the dataset is fetched asynchronously with `d3.json`. The visualization emphasizes D3’s core data-binding pattern for simple, static SVG rendering.

663anp3ca

80% match

Loading thumbnail…

D3 DataBinding

Two small bar charts display municipal census data as horizontal steelblue bars, sorted in descending order by population. Each bar is labeled with its municipality name in small sans-serif text. Built with D3 v5, the example uses `d3.json()` to load data and `d3.scaleLinear()` for the x-axis scale, with `selectAll().data()` and `enter()` appending SVG `<rect>` and `<text>` elements. The data comes from a GitHub-hosted JSON file.

663anp3ca

74% match

Loading thumbnail…

fresh block

This visualization gallery entry presents a suite of D3.js charts, each embedded via external scripts and configured through data attributes. It shows multiple interactive views of 2018 data, including regional comparisons, partner breakdowns, and beneficiary analyses, with toggles for sorting and average lines. The code leverages D3.js for rendering, with responsive layouts and lazy loading, while the source data is fetched from linked gist-hosted scripts.

GGerardoFurtado

73% match

Loading thumbnail…

fresh block

This visualization presents a hierarchical treemap of educational enrollment data for the Santander region, using a radial layout with animated transitions. Each node represents a category such as municipality, school level (Primaria/Bachillerato), and gender-specific counts parsed from a CSV file. Internal nodes are drawn in red, while leaf nodes use blue, with curved link paths emphasizing the tree structure. The visualization is interactive, allowing users to explore the hierarchical breakdown of student populations across rural areas of Santander, Colombia.

AAdlopez2016

73% match

Loading thumbnail…

fresh block

This visualization uses a parallel coordinates chart to compare five socioeconomic metrics across different types of educational institutions, with data loaded from a CSV file. The SVG rendering uses d3.svg.axis, d3.svg.line, and d3.scale.ordinal to draw axes and paths, while d3.svg.brush enables interactive filtering along each dimension. Users can drag axes to reorder dimensions and brush ranges to highlight specific institutions, with a d3.divgrid table below showing the raw data values.

GGoomble

72% match

Loading thumbnail…

fresh block

A horizontal bar chart displays categorical data as colored rectangles, where each bar's length corresponds to a numeric range (start to stop) and its color and vertical position encode an orientation (forward or reverse). The visualization uses D3 v4 to load JSON data via `d3.json`, bind it to SVG `rect` elements, and set attributes like `x`, `width`, `y`, and `fill` based on the data values. Forward-oriented bars appear in aqua on the upper row, while reverse-oriented bars are blue on the lower row, clearly separating the two categories.

BBrieLewis

72% match

Loading thumbnail…

D3 DataBinding

This example demonstrates a simple bar chart that visualizes municipal census data from a JSON file, showing municipality names alongside their census values. The visualization uses D3 v5’s data join pattern to bind dataset elements to SVG rectangles and text labels, sorting bars in descending order and scaling bar widths with `d3.scaleLinear`. The code loads data asynchronously via `d3.json` and renders two separate SVG containers, though only the first is populated. Text labels are positioned manually without an x-coordinate, leaving them at the SVG’s default origin.

663anp3ca

72% match

Loading thumbnail…

D3 DataBinding

A simple bar chart visualizes municipal census data using two SVG elements, where each bar's width maps to a numeric census value via `d3.scaleLinear`. The code loads JSON data from a GitHub repository using `d3.json` and binds it to rectangles and text labels with `.data()` and `.enter()`. Bars are sorted in descending order and labeled with municipality names, while the chart dimensions derive from the SVG attributes. Built with D3 v5, the example demonstrates basic data joins for both shapes and annotations, though it only renders one of the two defined chart instances.

663anp3ca

71% match