S

Sokrates86

@Sokrates86·23 public vizzes

Loading thumbnail…

Time Series Histogram

This chart displays a histogram of reported rat sightings in New York City between January 2010 and September 2014, binned by month. Each bar’s height represents the monthly count, drawn as steel-blue rectangles in an SVG. The visualization uses the D3.js v3 library, specifically `d3.time.scale()`, `d3.layout.histogram()`, and `d3.svg.axis()`, to parse dates, bin the data, and render axes. The data comes from NYC Open Data’s Rat Sightings dataset, which includes timestamps and location coordinates for each report.

Loading thumbnail…

Collapsible tree diagram in v4

This collapsible tree diagram displays hierarchical data with a root node and multiple nested levels of children. Users can click any parent node to collapse its subtree onto itself, and click again to expand it. The visualization uses D3.js v4, leveraging the `d3.tree()` layout and `d3.hierarchy()` functions, with SVG rendering and animated transitions. The tree’s nodes and links are styled with white circles and gray paths, driven by the `update()` function that recalculates positions after each collapse or expansion.

Loading thumbnail…

fresh block

An interactive SVG pictogram displays ten identical icons arranged in a single row, with a jQuery UI slider controlling how many are highlighted in black versus white. The code defines a reusable icon path in `<defs>`, generates each instance via `d3.selectAll("use").data().enter()`, and updates classes through `d3.selectAll("use").attr("class", …)` based on the slider’s `ui.value`. A text label shows the current count.

Loading thumbnail…

alkoholi-kulutus-kuolema2

This scatterplot with a connecting line displays the relationship between alcohol consumption and alcohol-related deaths in Finland from 2002 to 2014, using 13 data points. Each circle represents a year, and its position is determined by the consumption rate on the x-axis and the death rate on the y-axis. The visualization is built with the D3.js library (version 3.5.5), using `d3.scale.linear` for axes and `d3.svg.line` with cardinal interpolation to draw the path. Axis ticks are generated with `d3.svg.axis`. The data is hardcoded in the script, with years labeled next to each point.

Loading thumbnail…

alkoholi-kulutus-kuolema

A scatterplot maps Finnish alcohol consumption (liters per capita) against alcohol-related deaths (per 100,000) for each year from 1990 to 2014, with points connected by a semi-transparent cardinal-smoothed line. Each circle is labeled with its year, and hovering highlights a point in yellow. The visualization uses D3.js (version 3.5.5) with linear scales, SVG axes, and the `d3.svg.line` and `d3.svg.axis` APIs, rendering as a full-viewport SVG. Data is hardcoded in the script, sourced from a gist by Sokrates86, forked from a scatterplot-lines example.

Loading thumbnail…

Yliopiston työntekijät

This visualization presents the distribution of employees at a university, where each small rectangle represents a single individual. The 8,162 total employees are arranged in a dense grid, with the first 981 employees colored black and the remainder rendered in blue, visually differentiating a specific subset from the rest of the population. The piece uses D3.js (version 3.5.5) to programmatically generate SVG rectangles within a fixed 1200x1200 canvas, placing each element based on its index to form a uniform grid pattern. The data is sourced from a gist authored by Sokrates86, with the rendering handled entirely through SVG.

Loading thumbnail…

Postin työntekijät

A small multiples grid of 21,000 rectangles visualizes the distribution of employees at Posti, Finland’s postal service. The SVG rendering, built with D3.js version 3.5.5, encodes each individual as a 3×3 pixel cell, using black for the first 861 workers and orange for the remainder. The layout is computed with simple modulo arithmetic, placing 200 cells per row, producing a dense, abstract population map that highlights the proportional scale of the workforce.

Loading thumbnail…

Progressive pie chart 4

A progress widget displays a percentage value inside a ring-shaped pie chart, with the ring filling clockwise as the number animates. The visualization cycles automatically, updating the displayed percentage and arc every 1.5 seconds. Built with D3.js, the code uses `d3.layout.pie` for layout, `d3.svg.arc` to define both full-circle background and foreground arcs, and `transition.attrTween` with `d3.interpolate` to smoothly animate the arc and a text counter. The SVG includes an inset-shadow filter for a recessed effect, and the page styles the widget with a card-like header and centered layout.

Loading thumbnail…

Progressive pie chart 3

This animated donut chart displays a "Progress Status" percentage within a stylized widget. A dark blue background ring contains a lighter blue foreground arc that grows to represent the current percentage value, with a large numeric label at the center. The visualization uses the D3.js library, leveraging `d3.layout.pie` for the arc geometry and `d3.svg.arc` to define the ring shape. The animation is driven by `pathForeground.transition()` with the `arcTween` function, which interpolates the arc's end angle and updates the center text every 1.5 seconds. The SVG rendering includes a custom filter inset-shadow applied to the arcs, created through a series of `feOffset` and `feComposite` elements. No external data file is used; the displayed percentage is randomly generated within a set range.

Loading thumbnail…

Progressive pie chart 2

A donut chart visualizes the proportion of 546 successful operations against 155 errors, with an animated arc that sweeps to the success ratio while the center count updates from zero to 546. Rendered as an SVG using D3 v3, the example builds a pie layout, computes an ordinal color scale, and animates the inner progress arc via `transition.attrTween` with an interpolated end angle. The dark-themed widget card displays percentage labels around the ring, and the animation runs on a 750-millisecond delay.

Loading thumbnail…

Progressive pie chart 1

D3.js renders a donut chart displaying 65% progress. The visualization shows a dark-themed widget titled “Progress Status,” with a gradient-filled arc representing the completion ratio over a static background ring. The central percentage text updates dynamically during the animation. Using SVG paths and the d3.layout.pie and d3.svg.arc APIs, the arc’s angle interpolates from zero to the target proportion via transition.attrTween, while the count of 0 to 65 animates alongside it.

Loading thumbnail…

fresh block

A circular boundary is drawn in the center of the SVG canvas with a thick black stroke. Inside this boundary, a blue polyline connects 24 data points, each representing a monthly value from 2010 to 2011. The x-axis is scaled by value and the y-axis by month using ordinal scales, and the line is generated with `d3.svg.line()`. The visualization uses D3.js version 3.5.5 and renders entirely as SVG.

Loading thumbnail…

Voronoi Treemap

A Voronoi treemap displays hierarchical data as nested, weighted polygonal cells filling a chosen boundary shape, such as a rectangle or triangle. The example uses Finnish household expenditure data from the included `data.js`, showing categories and subcategories with sizes proportional to spending. The algorithm iteratively adjusts site weights to match target areas, relying on convex hull computation and power diagrams implemented in `ConvexHull.js` and `PowerDiagram.js`. Rendered as an SVG via d3.v2, the visualization offers interactive controls to switch datasets, polygon shapes, and color schemes.

Loading thumbnail…

The Finnish Map

This map visualizes Finland's geographic shape using GeoJSON data loaded from a local file and rendered as an SVG. The code uses D3.js version 3.5.5, employing `d3.geo.path` to generate map paths and a transverse Mercator projection applied via `d3.geo.transverseMercator` with specific rotation and translation parameters. The map is displayed inside an SVG element sized to 500 by 300 pixels, with each feature drawn from the `finland.json` source file.

Loading thumbnail…

Maptime AMS #4: Geopolitics, Borders & D3.js!

This example visualizes the territorial expansion of the United States from 1790 onward, animating state boundaries over time. A draggable timeline slider, built with the custom chroniton library, controls the year and triggers map updates. The map is rendered as SVG using D3.js, with geographic data loaded from TopoJSON files (states.json and usa.json). Each state is colored according to its name using a predefined color palette, and the chroniton slider includes play/pause buttons for automatic animation.

Loading thumbnail…

My first map

This map displays the neighborhoods of Boston as a static set of gray polygons. The visualization uses D3.js version 3.5.5, with the `d3.geo.albers` projection and `d3.geo.path` to render the geographic features. It pulls spatial data from a `neighborhoods.js` file, sourced from a gist by Sokrates86. The map is centered on Boston coordinates, and the code was built with Blockbuilder.org.

Loading thumbnail…

piechart

This example presents a nested donut chart that visualizes product purchasing behavior across Finnish households. The chart breaks down the total population into segments showing general purchase habits, then focuses on a specific product’s market share and the simulated effect of a 5% price increase. The visualization is built with D3.js (v3.5.5) using the `d3.layout.pie` and `d3.svg.arc` APIs to render concentric rings with distinct color scales. The SVG rendering includes interactive mouseover highlighting, and the data is structured as static JavaScript arrays showing household amounts and percentages.

Loading thumbnail…

scatterplot-lines-SAINTS

This example plots the offensive and defensive rankings of three NFL teams (Cardinals, Panthers, Packers) from 2008 to 2015. Each team’s yearly data is shown as a set of white-bordered circles connected by a smooth cardinal-spline path, with the two axes representing rank positions from 1 to 32. The visualization uses D3.js, including `d3.scale.linear` for axes, `d3.svg.axis` for tick marks, and `d3.svg.line` with cardinal interpolation to draw each team’s trajectory. Built as an SVG, it adds year labels and simple mouseover highlighting, with the underlying data embedded directly from the code’s arrays rather than an external source.

Loading thumbnail…

Lottokone1

A grid of 39 colored rectangles displays lottery draw frequencies, with colors mapped from red to darker shades based on value. The layout positions six columns per row, expanding vertically across seven rows. Built with D3.js version 3.5.5, ordinal and linear scales (`d3.scale.ordinal`, `d3.scale.linear`) compute x and y positions, while a third linear scale maps minimum to maximum values to RGB red intensity. SVG renders the static visualization, using hardcoded data and blockbuilder.org as the source.

Loading thumbnail…

Fertility and life expectancy

This example shows the relationship between fertility rate and life expectancy for eight European countries over the period 2002-2013. Each country is represented as a set of points on a scatter plot, with the x-axis showing fertility and the y-axis showing life expectancy. The visualization uses D3.js to render an SVG chart, plotting annual data points for each country to reveal trajectories and trends over time, such as increasing life expectancy and fluctuating fertility rates. The data is embedded directly in the HTML source.

Loading thumbnail…

Palkkikuvio

This visualization compares Democratic and Republican responses to a set of survey questions. Each question is listed on the left, with a horizontal line connecting the two party positions, marked by colored circles, along a 0–100 scale. The chart uses D3.js (v3.5.5) to render the SVG, including the axis, lines, and labels, with hard-coded sample data from a gist.

Loading thumbnail…

fresh block

A large red rectangle transitions to blue over three seconds using a bounce easing effect. Built with D3.js version 3.5.5, the code selects an SVG element, appends a rectangle with explicit x, y, width, and height attributes, and applies a `transition().duration(3000).ease("bounce")` to animate the fill color. The visualization demonstrates basic SVG shape creation and property animation, with the rectangle remaining static in position while its color shifts. The source is a gist created by Sokrates86, rendered as inline SVG within an HTML page.

Loading thumbnail…

Multiple polygons with d3.js

Three polygons render in a fixed 960 by 700 SVG canvas, with each polygon’s vertices scaled from x,y coordinates in JSON data to pixel positions using `d3.scale.linear`. The example loads `polygons.json` via `d3.json`, binds the polygon array to SVG elements, and sets each `polygon`’s `points` attribute by mapping coordinate pairs through the scales. All polygons share a black stroke with a width of two pixels. The code uses D3 v3’s selection and data-join patterns, with no interactivity or animation present.