Custom path generator

100%

Custom path generator

✓ Published0🌍 Public

Last edited Jun 9, 2016

Created on Feb 7, 2016

This visualization compares seven European cities across several quality-of-life indicators using a custom D3 path generator. Each city is represented as a unique polygon whose vertices are positioned according to indicator values, with color-coded paths for each metric. The data is loaded from a JSON file containing city-specific scores for indicators such as public transport, safety, and housing affordability. The custom path generator creates smooth, dynamic shapes that animate when rendered in SVG, allowing viewers to quickly compare the relative strengths and weaknesses of each city across the selected criteria.

AI-generated description

Quality of life in European cities

How do Europeans rate the quality of life in their city? To answer this question, the EU regularly conducts an extensive survey of almost 80 cities of varying sizes (European Union, 2016). This interactive visualisation shows the level of satisfaction according to seven indicators.

You can click on the legend text to sort the cities by this subject.

Website with published interactive: Cities in Europe

Similar vizzes

Loading thumbnail…

SVG Globe with cities

An interactive SVG globe displays roughly 48,000 cities from the MaxMind WorldCities database, with each city shown as a red point. Users can pan and zoom the globe, which uses `d3.geoOrthographic` and `d3.geoPath` to render the sphere, graticule, and country borders. The implementation leverages `d3.zoom` for navigation, and dynamically redraws the paths on each zoom or drag event. The city data is loaded from a CSV and plotted as a single `MultiPoint` feature, with population values available but not visually encoded.

SSazerland

70% match

Loading thumbnail…

Network Graph 2

This example visualizes a conceptual network of seven cities connected by seven routes. Node shapes and colors vary per city, with labels identifying each one. The graph is laid out using a force-directed simulation provided by `d3.forceSimulation`, combining link, many-body charge, and center forces. City nodes are drawn as SVG paths using D3 symbols like circle, square, and star, while links are simple lines. The simulation updates node positions on each tick, and nodes are draggable via the `d3.drag` interaction.

MMd Fahimul Kabir Chowdhury

70% match

Loading thumbnail…

Europe_test

This map shows the countries of Europe as solid dark-gray polygons on a white background. The data comes from a GeoJSON file named `custom.geo.json`, which contains the administrative boundaries. The visualization uses the D3.js v4 library, employing `d3.geoConicConformal()` for the map projection and `d3.geoPath()` to render each country's path. The map is centered on coordinates 10, 46 and rendered as SVG within a fixed 700 by 580 viewport.

LLaippe

70% match

Loading thumbnail…

My map

This map displays European and North African cities as dark dots on a light landmass, with each city labeled by name. The visualization uses D3.js v5 to load geographic data from a GeoJSON file and city coordinates from a CSV file. It renders the map by applying the Mercator projection through `d3.geoMercator` and drawing paths with `d3.geoPath`, while circles and text elements are positioned using the same projection function.

Hhlkyt

69% match

Loading thumbnail…

SVG intro

A scatterplot of global cities maps each location with a circle scaled by population, using longitude and latitude for positioning on an 800×400 SVG canvas. Built with Vue and D3.js, the visualization loads city data from a CSV file and applies a square-root scale so circle area corresponds to population size. The code uses `d3.scale.sqrt()` and `d3.extent()` to set scales, then renders semi-transparent white circles against a black background.

SSazerland

69% match

Loading thumbnail…

Several City Chart

This visualization displays a week of temperature readings from multiple cities, using a multi-line chart to compare trends over time. Each city is represented by a colored path, with a categorical color scale and a legend identifying each location. The chart is built with React and D3 v5, using `d3.scaleTime`, `d3.scaleLinear`, and `d3.line` with `curveBasis` for smooth paths. Data is loaded via `d3.csv` from a remote dataset, and the rendering uses SVG with nested groups for axes and a custom color legend function.

Jjeelong

69% match

Loading thumbnail…

City Temperatures

This visualization displays one week of temperature data for multiple cities, using color-coded line paths to distinguish each city’s trends over time. The chart includes a dropdown selector to choose which data attribute to explore, alongside a color legend for city identification. Built with D3 v5, it uses `d3.csv` for data loading, `d3.line` with `curveBasis` for smooth paths, and `d3.scaleTime` and `d3.scaleLinear` for axes. A `nest()` operation groups measurements by city, and the SVG rendering includes styled grid lines and axis labels.

Rrigt

69% match

Loading thumbnail…

CITY ATTRIBUTES

This visualization uses a city attributes dataset to display the geographic distribution of cities in a scatter plot, plotting longitude against latitude as steelblue circles. It then presents a bar chart that aggregates the data by country, showing the count of cities per nation using D3.js’s `d3.rollup` for grouping and `scaleBand`/`scaleLinear` for axes. The SVG rendering relies on D3 v7, with both charts generated from a CSV file fetched via `d3.csv`. Axes are added using `d3.axisBottom` and `d3.axisLeft`, while the bar heights reflect the computed country counts.

CChaturyaAkhilaPallem@my.unt.edu

69% match