P

P3nny

@P3nny·17 public vizzes

Loading thumbnail…

i18n-railslove

This example demonstrates a React-based internationalization setup for a mobile app, showing how language resources are organized and loaded for seven locales (Arabic, German, English, Persian, French, Russian, and Turkish). It uses `i18next` combined with `react-i18next` and `expo-localization` to detect the system language and select the appropriate JSON resource files. The `i18next-parser` configuration automatically extracts translatable strings from JS/JSX source files, generating locale-specific JSON files with sorted keys. A custom `changeLanguage` function allows runtime language switching, while a fallback to English ensures robustness. The code also includes a script to check that all translations are clean and complete.

Loading thumbnail…

Playing around with geopy using "Geburtsorte" - Data from Moers - [https://www.offenesdatenportal.de/dataset/geburtsorte-der-moerser-bevoelkerung]

This example visualizes the birthplaces of Moers’ population, mapping place names and counts from the city’s open data portal onto a geographic context. It uses Python with `pandas` to load and clean a CSV file, dropping rows for unknown or unclear entries, and prepares the data for geocoding. The code imports `geopy` to convert the listed birth locations into coordinates, which would then support plotting on a map, though no specific mapping or rendering library is shown in the provided excerpts.

Loading thumbnail…

Make it pretty - Playing around with CSS, SVG, Animated CSS in Jupyter Notebook

This example demonstrates how to style and animate pandas DataFrames within a Jupyter Notebook using custom CSS and SVG. It applies a fantasy font, colored table headers and cells, and integrates the animate.css library to add animated effects like bouncing. The code injects CSS rules directly into the notebook’s HTML output, transforming standard table rendering into a more visually engaging presentation.

Loading thumbnail…

Data Cleansing an offenen Daten aus Köln

This example demonstrates data cleansing of open data from Cologne, specifically a list of siren locations. It first displays a pandas DataFrame of the raw dataset, showing attributes like address, district, and mast height, then addresses the question of which siren has the tallest mast. The notebook uses pandas to load and inspect the tabular data from the gist source, with the goal of preparing it for further analysis or visualization.

Loading thumbnail…

Wichtel-Programm für die Familienweihnachtsfeier

This example visualizes a secret-Santa assignment algorithm for a family Christmas party, showing how each child is paired with a gift recipient while avoiding self-gifts and sibling pairs. The code uses Python’s `random.choice` to select potential recipients and manually checks constraints, appending a child back to the candidate list if a pairing is invalid, with a dictionary `wichteldict` storing final assignments. It also prints diagnostics, such as duplicate recipient checks, to verify the result. The source data is a hardcoded `familiendict` mapping parent names to their child lists.

Loading thumbnail…

Image Magick Cheat Sheet - Fun and easy picture editing in Linux command lIne

This example is a cheat sheet for using ImageMagick from the Linux command line, presented as a Jupyter notebook. It demonstrates two common image-processing tasks: resizing an image while preserving its aspect ratio via the `convert` command with the `-resize` flag, and creating an animated GIF from a sequence of PNG files using `-delay` and `-loop` options. The code relies on the ImageMagick `convert` utility and includes links to external tutorials for reference.

Loading thumbnail…

Insta Cologne

This visualization shows Instagram photos for Cologne’s districts (Veedel) on an interactive SVG map, with a choropleth coloring indicating cars per household. Clicking a district triggers the Instafeed API to load recent tagged photos. The map uses `d3.geo.mercator` projection and `d3.geo.path` for rendering, reading district boundaries from `/cologne.json` and statistical data from `/Stadtteildaten.csv`. A legend displays minimum, maximum, and average values using `d3.scale.linear` for color encoding.

Loading thumbnail…

Youth unemployment rate in selected european countries.

A multi-line chart displays the youth unemployment rate in selected European countries from 1991 to 2013. The SVG visualization uses D3.js (v3) with time and linear scales, along with D3's axis and line generators. Hovering over a grey line highlights it in black with increased thickness. Specific countries are pre-highlighted in distinct colors: the EU average in steelblue, Greece in green, Germany in indianred, Spain in purple, and the Netherlands in orange. Data is loaded from a CSV file.

Loading thumbnail…

Line Chart with Multiple Lines

This example shows how the number of ALG II benefit recipients in Cologne changed from 2005 to 2012 across nine different demographic categories, such as single-parent households or foreign nationals. Each category is rendered as a separate line, using `d3.svg.line` with interpolated smoothing and a category-10 color scale. The data is parsed from a CSV file and nested by category with `d3.nest`, while time is handled via `d3.time.scale`. Axes are drawn with `d3.svg.axis`, and the SVG rendering uses `d3.select` to append paths and labels.

Loading thumbnail…

Data for Public aid in cologne city quarters

This visualization shows the long-term trend of public aid recipients in Cologne, comparing categories such as total persons in need, single parents, and couples with children from 2005 to 2012. It uses a small-multiple line chart layout, with each facet representing a different household type. The data is read from CSV files and reshaped via JavaScript, then plotted using D3.js’s `d3.line` and `d3.points` APIs. The y-axis scale is shared across facets to enable direct comparison, while the x-axis encodes the year. The source data comes from an open gist.

Loading thumbnail…

Scatterplot Kölner Wahlbeteiligung vs Arbeitslosenquote

This visualization shows the relationship between voter turnout and unemployment rates across Cologne’s districts, with each circle representing a district. It uses D3 v3 to draw an SVG scatterplot, sorting data by turnout and animating the points from left to right using `transition().duration()` and staggered delays. The x-axis displays unemployment percentage, the y-axis shows turnout percentage, and hovering highlights circles. Data comes from the Offene Daten Köln portal for the 2014 municipal election, loaded via `d3.csv` from an external file.

Loading thumbnail…

Cleaning Up

This visualization shows voter turnout percentages across Cologne’s distinct neighborhoods, or *Veedel*, as horizontal bars sorted in descending order. Using D3 v3, it employs an ordinal scale with `rangeRoundBands` for the y-axis and linear scales for the x-axis, rendering SVG rectangles and dual top/bottom axes via `d3.svg.axis`. The data, sourced from Offene Daten Köln’s 2014 local election records, is loaded from a CSV, with hover effects and tooltips revealing exact percentages.

Loading thumbnail…

My first barchart

This is a simple horizontal bar chart built with D3.js (v3) that visualizes voter turnout across Cologne city districts, sorted in descending order by the `wahlbeteiligung` value. The chart uses SVG rectangles, with each bar’s width proportional to the turnout percentage and its vertical position spaced by index. The code loads data from a CSV file using `d3.csv` and appends tooltips via the SVG `title` element to display each district’s name and turnout. The visualization primarily demonstrates basic data binding, sorting, and attribute manipulation with D3’s selection methods.

Loading thumbnail…

My first barchart

This bar chart displays voter turnout percentages across Cologne districts, sorted in descending order with district names and turnout values shown as tooltips on hover. Rendered as SVG rectangles, each bar’s width maps directly to the `wahlbeteiligung` CSV field. The code uses D3 v3’s `d3.csv` for data loading, `d3.descending` for sorting, and standard SVG selections (`selectAll`, `data`, `enter`) to bind data and append `title` elements for interactivity.

Loading thumbnail…

My first barchart

The bar chart presents voter turnout percentages per Cologne district, with horizontal bars sorted in descending order. The visualization uses a simple SVG barchart created with the d3 v3 library. The code loads a CSV file named "veedel_data.csv" and sorts the data by the `wahlbeteiligung` field using `d3.descending`. Each bar's length maps to the turnout value, and hovering over a bar reveals a tooltip showing the district name and turnout percentage.

Loading thumbnail…

Loading CSV Data with D3

This visualization demonstrates the process of loading an external CSV file into a web page using D3 version 3. The page renders a static SVG composition containing two blue circles with black and white inner details, a pink rectangle, and the text “Hello World!”. Behind this decorative scene, the code calls `d3.csv` on a local CSV file containing demographic statistics for Cologne city quarters. The callback function receives the parsed data as an array of JSON objects, which is then logged to the browser console for verification. The example highlights how D3’s CSV parser converts tabular data into a JavaScript-friendly format.

Loading thumbnail…

Data about the different quarters of Cologne, Germany

This visualization presents a multi-faceted demographic profile of Cologne’s 86 districts using a CSV from a public gist, with each row representing a district. It shows how metrics like population density, age distribution, and migration background vary across the city through an interactive scatter plot, where each point is a district colored by its borough. Built with D3’s `forceSimulation` for layout and `geoPath`-based Voronoi tessellation for district shapes, the tooltip dumps all raw column values on hover. The data source is the city’s open statistics portal, loaded directly into the page for filtering.