Module 3 - Bar cchar

100%

Module 3 - Bar cchar

✓ Published0🌍 Public

Last edited Apr 27, 2015

Created on Apr 27, 2015

This example visualizes monthly Consumer Price Index (CPI) data for 25 Colombian cities using a horizontal bar chart, with bars sorted in descending order to highlight the highest inflation rates. Each bar’s length encodes the monthly CPI value, and hovering reveals the city name and exact figure via a tooltip. The visualization uses D3 v3, selecting rectangles bound to CSV data, and applies a linear scale to map CPI values to pixel widths. The bar chart is rendered as SVG on a white background with a light blue page backdrop. Data comes from the included `col_cpi.csv` file.

AI-generated description

Similar vizzes

Loading thumbnail…

Module 4 - Adding Scales and Axes

This horizontal bar chart shows the monthly Consumer Price Index (CPI) for Colombian cities, sorted from highest to lowest, with a tooltip revealing each city’s exact value. The visualization uses D3 v3 scales and axes: a linear scale maps the CPI values to bar widths, while an ordinal scale positions city names along the vertical axis. The code applies an SVG rendering with hover highlighting and retrieves the data from a local CSV file, sourcing statistics from DANE (March 2015). The chart emphasizes relative differences in inflation across urban centers like Bogotá and Medellín.

AAndresClavijo

90% match

Loading thumbnail…

Module 5 - Scatterplot

This scatterplot visualizes the monthly Consumer Price Index (CPI) across major Colombian cities, comparing each city’s overall monthly CPI against its low-income CPI. The chart uses D3 v3 with SVG rendering, displaying circles that grow from a tiny radius to size 4 via a staggered transition. Axes are generated using `d3.svg.axis`, with scales defined by `d3.scale.linear`. The data comes from a CSV file listing cities and their CPI values, sourced from DANE (March 2015). Hovering over a circle reveals a tooltip with the city’s specific CPI values.

AAndresClavijo

87% match

Loading thumbnail…

Module 2 - Loading Data

The example loads a CSV file of Colombian cities’ monthly consumer price index data by income level and logs each row to the browser console. It uses D3 v3’s `d3.csv` to parse the external `col_cpi.csv` file, with the loaded array of objects accessible inside the callback. A static red diagonal line is drawn on an SVG canvas as a placeholder, while the data itself is not yet visualized beyond console output, demonstrating the initial step of fetching and inspecting tabular data.

AAndresClavijo

78% match

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

74% match

Loading thumbnail…

Exercise Module 4

This horizontal bar chart displays the 2013 family income index for Barcelona neighborhoods, sorted by district, with each bar labeled with its value. The visualization uses D3.js (v3) to load the CSV data, map the income values to a linear scale for bar width, and the neighborhood names to an ordinal scale for vertical positioning. SVG rectangles and text elements render the bars and labels, with an interactive tooltip showing details. The data source is OpenDataBCN, and the chart also includes top and bottom axes to frame the quantitative scale.

QQbelil

70% match

Loading thumbnail…

fresh block

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.

663anp3ca

70% match

Loading thumbnail…

[A4] CPI of Meats in 2015 (Bar Chart)

This example displays the Consumer Price Index (CPI) of various meats in 2015, using the base year 1990, as horizontal bars. It loads CSV data via `d3.csv` and maps each meat type to a band scale (`d3.scaleBand`) while the CPI values determine bar widths through a linear scale (`d3.scaleLinear`). Bars are rendered as SVG rectangles, with mouseover events that temporarily change the fill color and append a text tooltip showing the exact CPI value, which is removed on mouseout. Axes are drawn using `d3.axisBottom` and `d3.axisLeft`. The visualization uses a fixed margin layout and SVG rendering.

Cctan13@dons.usfca.edu

68% match

Loading thumbnail…

ICE-7-4 Area Chart1

This area chart displays the U.S. Monthly Consumer Price Index (CPI) over time, with the shaded region emphasizing the trend and magnitude of inflation. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `area`, and `curveBasis` to generate a smooth, filled path. Axes are created with `axisBottom` and `axisLeft`, and data is loaded via `csv` from a provided URL. The SVG rendering includes labeled axes and a title, with the area fill styled in maroon.

Hhossaphul

68% match