Skip to main content
SimilarExport ZIP
100%

Conditional Styling

✓ Published0🌍 Public
AAndresClavijo
Last edited Apr 27, 2015
Created on Apr 27, 2015

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.

AI-generated description

Similar vizzes

Loading thumbnail…

Temperature in multiple cities

This visualization shows population trends over time for multiple cities. A line chart displays each city’s population as a colored line, with a color legend identifying them. A vertical line marks the currently selected year, and moving the mouse across the chart updates that selection. The code builds the SVG using D3 v5, employing `d3.scaleOrdinal` with `schemeCategory10` for colors, `d3.axisBottom` and `d3.axisLeft` for axes, `d3.line` with `curveBasis` for smoothing, and `d3.mouse` for interaction. Data is loaded from a CSV file using `d3.csv`.

Ssafdarawan
73% match
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
73% match
Loading thumbnail…

Temperature in multiple cities

This visualization displays population trends over time for multiple cities, with each colored line representing a different region. A vertical black line marks the currently selected year, and moving the mouse across the chart updates this selection and re-renders the view. The code uses D3 v5 APIs including `nest()`, `scaleTime()`, `scaleOrdinal()`, `line()` with `curveBasis`, and axis generators. Data comes from the UN population estimates CSV files, processed by melting wide-format years into tidy rows, and rendered as SVG paths with a categorical color legend.

Sszy1900
72% match
Loading thumbnail…

Temperature in multiple cities

This interactive line chart displays population trends for multiple countries over time, with a color-coded legend identifying each nation and a vertical line marking a user-selectable year. Built using D3 v5, it leverages `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and `line` with `curveBasis` to render smoothed paths. Data is loaded from UN population CSV files, and hovering over the chart updates the selected year to show values at that point.

JJacob van Lingen
71% match
Loading thumbnail…

Temperature in multiple cities

This visualization displays population trends over time for multiple regions, with each region represented by a colored line. A vertical black line marks a selected year, allowing users to compare population values across regions at that specific moment. The visualization uses d3.nest to group data by region, d3.scaleTime and d3.scaleLinear for axes, and d3.line with curveBasis for the paths. A mouse-interceptor rect captures pointer movement and updates the selected year via d3.mouse, triggering a re-render. The data comes from UN population estimates and medium-variant projections, loaded with d3.csv and processed through a melt function to format years.

Pporrasgp
71% match
Loading thumbnail…

Temperature in multiple cities

This visualization displays population trends over time for multiple regions, with each region represented by a colored line. A vertical line marks the currently selected year, and hovering over the chart updates this selection. The view includes an ordinal color legend using `d3.scaleOrdinal` with `schemeCategory10`. Data is loaded via `d3.csv` from UN population estimates, processed through a custom melting function, and rendered using `d3.line` with `curveBasis` and SVG paths. Interactive mouse events trigger year selection.

NNelson30
71% match
Loading thumbnail…

Multing Data for Multiple Lines

This visualization displays population trends over time for various regions, with each line representing a different area and color-coded via a categorical scale. It uses d3.line with curveBasis to generate smooth paths, d3.nest to group data by region, and d3.scaleOrdinal for colors. Population estimates from UN data are melted into a tidy format, with axes formatted using d3.axisBottom and d3.axisLeft. A custom colorLegend component renders the legend alongside the SVG chart.

Mmisferswift
71% 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
71% match