Module 5 - Scatterplot

100%

Module 5 - Scatterplot

✓ Published0🌍 Public

Last edited Apr 27, 2015

Created on Apr 27, 2015

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.

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

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

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

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

Scatter Plot using D3.JS

This 3D scatter plot compares urban economic indicators across cities using two Plotly trace types drawn within a D3.js-loaded page. The first trace plots Cost of Living Index, Rent Index, and Local Purchasing Power Index, while the second maps Groceries Index, Cost of Living Plus Rent Index, and Restaurant Price Index. Both traces use `scatter3d` markers with hover text for city names. The code loads CSV data via `d3.csv`, unpacks columns with a helper function, and renders the visualization through `Plotly.newPlot`.

EElvis Araka

69% match

Loading thumbnail…

Scatter plot

This scatter plot displays city areas in square meters along the x-axis with city names on the y-axis, using a linear scale for area and a point scale for cities. The visualization renders purple circles with hover effects, and includes axis tick lines and labels for readability. The code uses D3 v5 modules including `scaleLinear`, `scalePoint`, `axisLeft`, `axisBottom`, and `csv` to load and parse the data from a CSV file, with the chart drawn as an SVG.

Vvladvaculin

68% match

Loading thumbnail…

Scatter Plot using D3.JS

This example visualizes a 3D scatter plot of city-level economic indices, comparing cost of living, rent, local purchasing power, groceries, and restaurant prices across different cities. Two distinct traces plot each city as a marker, with hover text identifying the city name. The code uses the Plotly JavaScript API, specifically `Plotly.newPlot`, to render the chart, while D3.js (version 3.5.17) is used to load CSV data from a GitHub gist via `d3.csv`. The visualization demonstrates integrating D3 for data fetching with Plotly for 3D rendering.

Kkottenikhil

68% match