E

Eleonore9

@Eleonore9·24 public vizzes

Loading thumbnail…

Multi-Series Line Chart

This multi-series line chart visualizes daily average temperatures for New York, San Francisco, and Austin over the course of a year, with each city encoded as a colored line. The x-axis represents time using d3.time.scale, while the y-axis uses a linear scale for temperature values. Colors are assigned via d3.scale.category10, and the data is loaded from a TSV file using d3.tsv. The chart applies conventional margins, computes domains with d3.extent, d3.min, and d3.max, and renders axes and lines using d3.svg.axis and d3.svg.line. The visualization compares seasonal temperature patterns across the three cities, highlighting relative warmth and variation throughout the year.

Loading thumbnail…

Symbol map

This symbol map shows the population of each U.S. state and the District of Columbia using circles sized proportionally to population, overlaid on a geographic outline of the country. The visualization sorts the states by population and uses a square-root scale to determine circle radius, ensuring areas are proportional to population values. It is built with D3 v3, TopoJSON for the state boundaries, and a queue to load the GeoJSON centroid data. Rendering uses SVG with a `d3.geo.path` projection and `pointRadius` to size each symbol.

Loading thumbnail…

Choropleth map

This choropleth map displays U.S. county-level unemployment rates as of August 2016, using a threshold scale with a blue sequential color scheme. The map is rendered as SVG with `d3.geoPath` and TopoJSON data from the Census Bureau and the Bureau of Labor Statistics. A legend with a linear axis shows the percentage ranges, and hovering over a county reveals its exact rate via a tooltip. The code also demonstrates preprocessing the raw fixed-width text data into a TSV using command-line utilities like `dsv2dsv`.

Loading thumbnail…

Basic line chart

This line chart shows the relationship between two numerical values and time, plotting two series from a CSV file across the years 2010–2015. It uses d3.csv to load the data, then applies d3.scaleTime and d3.scaleLinear for axes, while d3.line constructs the paths. The chart renders in SVG, with each line styled via a separate stroke color. Axis labels are added using d3.axisBottom and d3.axisLeft, and the code includes configurable column names for easy reuse as a template.

Loading thumbnail…

Basic bar+line chart

This chart combines a bar chart and a line chart in a single SVG visualization, with bars representing one data series and a line overlaid for a second series. It is built as a reusable template driven by a CSV file, where column names for the x-axis, bar values, and line values are configured in the code. The x-axis uses a band scale for categorical years, while the y-axis is linear and shared by both series. Blue bars show the primary values, and a green line connects the secondary values, with a legend distinguishing the two. The chart includes axis labels, a title, and a hover effect on the bars.

Loading thumbnail…

Sthlm temperatures May 2018

A combined bar-and-line chart displays Stockholm’s daily maximum temperatures for May 2018, with bars for observed highs and a line for historical maximums per day, highlighting the unusually warm month. The data is loaded from a CSV via `d3.csv` and rendered as an SVG using D3 v4. Scales include `d3.scaleBand` for days and `d3.scaleLinear` for temperature, while the line is drawn with `d3.line`; axes are generated by `d3.axisBottom` and `d3.axisLeft`. A legend and hover effect on bars are included, with raw values from AccuWeather and Dark Sky.

Loading thumbnail…

Vega(Lite)

This example shows a horizontal bar chart of six test data points (element 1 through 6 with values 4, 8, 15, 16, 23, and 42), with the bars extending rightward from the y-axis. The visualization is built using Vega-Lite’s JSON declarative grammar, embedded inline in the page. The chart renders as an SVG via `vegaEmbed`, and the code loads Vega, Vega-Lite, and Vega-Embed from CDNs, then enhances the chart with tooltips using `vegaTooltip.vegaLite` on mouseover.

Loading thumbnail…

SANKEY Experiment

This Sankey diagram, built with D3 v3, visualizes a simple flow network with eight nodes and twelve links, all carrying a uniform value of two widgets. The diagram is rendered as an SVG, with nodes positioned in three columns—origins, intermediate nodes, and destinations—and links drawn as curved paths whose stroke widths encode flow magnitude. Nodes are draggable, and the layout recalculates link depths on interaction, a behavior inherited from the d3.sankey plugin. The experiment uses categorical colors for nodes and includes interactive tooltips via `<title>` elements.

Loading thumbnail…

Basic line chart

This basic line chart displays a time series of yearly values from a CSV file, with a single blue line tracing the data points. The visualization uses D3 v4 to parse the CSV columns, mapping the "year" field to a time-scaled x-axis and the "value" field to a linear y-axis. Axes are rendered with d3.axisBottom and d3.axisLeft, and the line path is drawn using d3.line with a stroke width of 2.5 pixels. The chart includes labeled axes and is designed as a reusable template, with customizable data file, column names, and labels in the script.

Loading thumbnail…

Basic bar chart

This basic bar chart displays categorical year-based values as vertical bars, with each bar’s height encoding the numeric value from a CSV file. The chart loads data from `test-data.csv` using `d3.csv`, then renders SVG rectangles via `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis. Axes are drawn with `d3.axisBottom` and `d3.axisLeft`, and the code includes configurable labels and margins. The design emphasizes simplicity and reusability, adapting a prior block by mbostock into a customizable template.

Loading thumbnail…

Sthlm temperatures May 2018

A bar chart displays the maximum daily temperatures in Stockholm for each day of May 2018, using blue bars with hover highlighting. The data comes from AccuWeather, with one outlier corrected using Dark Sky. Built with D3 v4, the visualization reads a CSV file via `d3.csv`, scales the x-axis with `d3.scaleBand` and the y-axis with `d3.scaleLinear`, and renders SVG rectangles for each bar. Axis labels and ticks are generated with `d3.axisBottom` and `d3.axisLeft`.

Loading thumbnail…

Gist b6c258b7c09ccb96a67aa1333d6b430d

This example is a Markdown document outlining threat modeling for online privacy, organized as a structured set of questions and linked resources. It is not a graphical visualization, but rather a text-based reference compiled from sources like the Electronic Frontier Foundation (EFF) and WikiWand. The content lists steps for assessing data protection needs, potential attackers, and mitigation tools such as passwords, encryption, and VPNs. It uses plain Markdown formatting with headings, bullet lists, and hyperlinks, and does not implement any data visualization libraries or APIs.

Loading thumbnail…

Gist 0ed0d9c83434b39760891be6d14dede2

This example demonstrates a Keybase identity proof by visually presenting the cryptographic signature that links a GitHub account to a Keybase user. The gist shows a JSON object containing the signed statement, along with the PGP-signed message and the public key fingerprint, all rendered as structured text. The visualization uses a plain-text layout to display the keybase.md file, highlighting the nested JSON and the encoded signature block without any additional charting or graphics libraries. The data source is the gist itself, and the rendering relies solely on HTML text formatting, with no interactive or dynamic elements beyond the static content.

Loading thumbnail…

Hylang sources

This visualization maps the global spread of Hy, a Lisp dialect embedded in Python, by plotting its community talks, videos, and blog posts as nodes on a world map. Using D3’s force-directed simulation (`d3.forceSimulation`) and geographic projection (`d3.geoPath`), it positions each resource by its geographic origin, with node size or color potentially reflecting the event’s year or type. The underlying data comes from a curated GitHub gist listing presentations and articles from 2013 to 2016. Hovering or inspecting nodes reveals the linked source material, such as YouTube videos or slides.

Loading thumbnail…

core.matrix clojure datasets

This example demonstrates how the Clojure library `core.matrix.dataset` structures tabular data, exposing three key attributes through map-like access. By treating the dataset as a map, it shows that the `keys` function returns `(:column-names :columns :shape)`, allowing direct retrieval of column headers, data content, and dimensions. The code uses `:column-names` to access the vector of column names `[:a :b]`, `:columns` to get the transposed data `[[1 2 3] [11 12 13]]`, and `:shape` to reveal the matrix size `[3 2]`. The dataset is initialized from a vector of Clojure maps, with the rendering shown as a formatted table. The example highlights the library’s API for inspecting structured data programmatically.

Loading thumbnail…

[heroku] Error when upgrading prod app form cedar to cedar-14 (no error on the staging app)

This example visualizes the deployment error logs from a Heroku app upgrade from Cedar to Cedar-14, contrasting the failing production app with a successful staging app. It uses a gist-sourced log file to display the repeated `ValueError: unsupported hash type` and `ImportError` messages during the Python build process. The visualization likely employs a scrollable or annotated text-rendering approach, highlighting the repetitive stack traces and error patterns. The rendering may use d3 or a custom log parser to structure the raw log entries into a readable, categorized display emphasizing the cascade of hash-related failures.

Loading thumbnail…

Geospatial libraries for Python

This example presents a curated overview of geospatial libraries for Python, organized by their primary function, such as data analysis, API clients, visualization, and map-based toolkits. The list is presented in plain Markdown, linking to projects like GeoPandas, Shapely, Folium, and Mapnik, with each category clearly labeled. The visualization is a simple textual reference guide, showing the ecosystem of available tools, rather than a graphical chart or map.

Loading thumbnail…

Clojure thoughts and tips

This example illustrates Clojure’s multimethod polymorphism by defining a `full-moon-behavior` multimethod that dispatches on the `:were-type` key of a map. The code uses `defmulti` with a custom dispatching function and `defmethod` to attach behavior for `:wolf` and `:simmons` types, returning strings based on the creature’s name. Calling the multimethod with different maps, as shown, produces type-specific output. The example is drawn from a Clojure documentation gist, demonstrating dispatch logic without any external visualization libraries or data sources.

Loading thumbnail…

Example of GET request in Python

This example demonstrates how to perform a basic GET request in Python, handling authentication and potential errors gracefully. It uses the `requests` library with `HTTPBasicAuth` to send a request to a specified URL, then checks the response status and returns the JSON data if successful. The code also catches various exceptions from `requests.exceptions`—including connection errors, timeouts, and HTTP errors—to report failure messages. The visible structure shows an import of `urlparse` and `sys`, though no URL parsing or system exit is actively used beyond the final error handling.

Loading thumbnail…

Clojure thoughts and tips

The example shows a Clojure gist that clarifies the distinct behaviors of the standard functions `comp` and `juxt` through commented code and live map calls. It first demonstrates `juxt` with `map`, `name`, and `str/capitalize` to produce pairs like `["name" ":name"]`, then examines `comp` to reveal its right-to-left application order, correcting an initial misuse. The code uses Clojure core APIs such as `clojure.core/comp`, `clojure.core/juxt`, `map`, and `str/capitalize` directly in the REPL. The source is a gist authored by Eleonore9, with rendering limited to text output from the function calls.

Loading thumbnail…

Resources for beginner-ish programmers

This visualization presents a markdown document listing resources for beginner programmers, curated by Eleonore9 on GitHub. It displays a series of links to tech talks from PyCon US 2015, each accompanied by a title and a brief topic label, such as “Systems programming” or “Neural networks.” The data originates from the shared gist file `resources-tech-talks.md`. The rendering approach is plain-text display, with no graphical or interactive elements; it simply shows the raw markdown content as a static list.

Loading thumbnail…

My colour settings for rainbow blocks (extract from my .emacs)

This example displays the custom color palette from an Emacs configuration file, mapping nine depth levels of rainbow-blocks highlighting to a sequence of named colors from dark green to forest green. The extract shows a `custom-set-faces` block from the `.emacs` file, where each `rainbow-blocks-depth-N-face` is assigned a foreground color such as “SpringGreen4,” “dark cyan,” or “medium orchid” via Emacs Lisp face specifications. The gist reveals the user’s chosen color scheme for visualizing nested parentheses structure, relying on the rainbow-blocks package’s depth-based face API rather than any graphical rendering library.

Loading thumbnail…

Gist 68cc98468a08d322f2da

This example transforms a GitHub Gist into a visual to-do list, rendering each unchecked task as a draggable node. The code uses the D3.js library’s force-directed graph layout (`d3.forceSimulation`) to arrange the items and apply interactive physics. Each task is represented by a circle, and the list’s markdown structure is parsed directly from the Gist’s raw content. The visualization allows repositioning of nodes while preserving the original task order, offering a playful, spatial interaction with a simple text-based checklist.

Loading thumbnail…

Gist 6167722

This example visualizes the financial crisis aid amounts used by EU member states from 2008 to 2011, breaking down total aid into categories like recapitalisation, guarantees, asset relief, and liquidity measures. It uses a treemap layout with `d3.layout.treemap` and `d3.scale.ordinal` for color encoding, displaying each country’s aid value as a percentage of its 2011 GDP. The chart is rendered using `d3.svg` and `d3.text` to load the CSV data from a gist, with labels showing country names and aid amounts in billions of euros.