Module 4 - Adding Scales and Axes

100%

Module 4 - Adding Scales and Axes

✓ Published0🌍 Public

Last edited Apr 27, 2015

Created on Apr 27, 2015

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.

AI-generated description

Similar vizzes

Loading thumbnail…

Module 3 - Bar cchar

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.

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

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

74% match

Loading thumbnail…

Conditional Styling

This small-multiple line chart shows population changes for 16 Colombian cities between 1985 and 2020. Each city is rendered as a separate small chart using D3 v3 with SVG. The distinctive feature is the conditional styling: lines are colored based on their 2020 population value, with a sequential color scale mapping from light to dark. As the year progresses from 1985 to 2020, each line's color intensity reflects the magnitude of the final population, creating an immediate visual ranking. The use of a discrete color legend and consistent axes across panels makes it easy to compare trajectories and identify the largest cities, such as Bogotá, while preserving the temporal pattern of each city’s growth.

AAndresClavijo

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

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

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

66% match

Loading thumbnail…

D3.js Bar Chart

This bar chart displays the top 15 most expensive cities by their mean cost of living index, sourced from a CSV file. Using D3 v4, the code filters data by rank, nests entries by city, and computes averages with `d3.nest().rollup()`. It renders an SVG with `d3.scaleBand` and `d3.scaleLinear` axes, while interactive tooltips appear on mouseover via `d3.select` and style changes.

Kkottenikhil

66% match