E

EndNight95

@EndNight95·23 public vizzes

Loading thumbnail…

Basic bar chart

This basic bar chart displays yearly values from a CSV file, with bars colored blue and highlighted on hover. It uses D3 v4 to load the data via `d3.csv`, scales with `d3.scaleBand` and `d3.scaleLinear`, and renders SVG rectangles. The chart is configured as a reusable template, where users can edit column names, axis labels, and colors in a designated section. Axes are drawn using `d3.axisBottom` and `d3.axisLeft`, with labels positioned manually. The example is a fork of Mike Bostock’s original bar chart block, adapted for CSV input.

Loading thumbnail…

China tile grid map

This tile grid map visualizes electricity consumption across Chinese provinces, with each province represented by a colored rectangle. The map uses a quantile color scale ranging from light yellow to dark red, showing the varying electricity values per province. Built with D3 v4 and the geo2rect library by Sebastian Meier, the visualization transforms geographic polygon data into a rectangular grid layout. Users can toggle between the standard geographic view and the tile grid representation, with both views rendered as SVG paths and animated transitions.

Loading thumbnail…

China tile grid map

A tile grid map of China displays provincial electricity consumption for 2015, with each province flattened into a square positioned on a grid and colored by a quantile scale from light yellow to dark red. A toggle button triggers an animated transition between the original geographic layout and the gridded arrangement. The visualization combines D3 v4, the geo2rect library for polygon-to-rectangle conversion, and Turf.js for geometric calculations. Province boundaries and values come from a China GeoJSON file and a CSV dataset.

Loading thumbnail…

China tile grid map

This interactive map of China displays electricity consumption data by province, color-coded using a quantile scale. Users can toggle between a standard geographic projection and a simplified tile grid layout, with animated transitions between the two states. The visualization uses the geo2rect library to transform geojson polygons into rectangular tiles, while d3.v4 handles SVG rendering, data loading via d3.queue, and the color encoding based on the electricity2015.csv dataset.

Loading thumbnail…

China tile grid map

This example shows a tile grid map of China where each province is drawn as a rectangle instead of its actual geographic shape. The map is colored by electricity consumption per province from a 2015 CSV dataset, using a quantile color scale. The visualization uses `d3.geoMercator()` for projection, `geo2rect` to convert polygon geometries into rectangular tiles, and SVG paths for rendering. A toggle button animates between the tile grid and the original geographic map layout using `g2r.toggle()` and redraws with `g2r.draw()`.

Loading thumbnail…

Number of People in major countries and regions employed in agriculture in 2007

This bar chart displays the number of people employed in agriculture across major regions in 2007, with values shown alongside their percentage of the total. The visualization uses D3 v4 with an SVG rendering approach, employing `d3.scaleLinear` for the x-axis, `d3.scaleBand` for the y-axis, and `d3.format` to display percentages. Data originates from Max Roser’s "Employment in Agriculture" dataset via Our World in Data, and the chart is styled with custom CSS on a dark background. Each bar includes a label and numeric annotation with its share of the maximum value.

Loading thumbnail…

Horizontal Bars with Slalom Styles

This example displays the relative frequencies of English letters as horizontal bars sorted in ascending order, with a blue Slalom logo and a credit link to Seemant Kulleen overlaid at the bottom-right. The chart uses D3 v4 with an SVG rendering, employing `d3.scaleLinear` and `d3.scaleBand` for axes, `d3.axisTop` and `d3.axisLeft` for tick marks, and `d3.tsv` to load the `data.tsv` file. Bars are hoverable, changing color, while axis labels use Open Sans and Montserrat fonts.

Loading thumbnail…

Horizontal Bars with Slalom Styles

This horizontal bar chart displays the relative frequencies of English letters, sorted in ascending order from Z to A. Built with D3 v4, it uses an SVG rendering approach with `d3.scaleBand` for the y-axis and `d3.scaleLinear` for the x-axis. The chart imports data from a tab-separated file and includes hyperlinked images and text, crediting Slalom and Seemant Kulleen.

Loading thumbnail…

Pie Chart

This example visualizes the relative population sizes of two abalone gender categories, with one representing a 'dangerous' proportion, using a donut-style pie chart. The chart is rendered as SVG, and the data is loaded from a local CSV file that is derived from the UCI Machine Learning Repository's Abalone data set. The code uses D3 v4's `d3.pie`, `d3.arc`, and `d3.scaleOrdinal` to compute the arc geometries and apply colors, and it integrates a categorical color legend via the `d3.legend` library. The visualization positions the pie chart centrally within the SVG and displays the legend off to the right, all set against a black background.

Loading thumbnail…

Data Summary

This donut chart shows the percentage of nuclear explosions detonated by each country from 1945 to 1998, based on data from the SIPRI report. It uses d3.nest to aggregate the CSV data by country and d3.pie with d3.arc to generate the SVG paths. A d3.legendColor adds a color legend, and a hover tooltip is implemented but not populated with content.

Loading thumbnail…

JS Bin

A donut chart displays browser market share percentages for five browsers, with animated arcs that grow from zero to their final values over one second using `transition.attrTween` and `d3.interpolate`. The chart, built with D3 v3 and SVG, renders colored slices via `d3.layout.pie` and `d3.svg.arc`, with labels positioned at arc centroids appearing after a delay. A legend of rounded color swatches identifies each browser. The dark-themed widget also uses CSS drop shadows for visual depth.

Loading thumbnail…

Run a race in every town in Connecticut: "elusive" races

This visualization shows the number of Run169-qualifying races in Connecticut for each month of 2017, highlighting "elusive" races from towns with two or fewer races. It uses d3.v4 with SVG rendering, employing `d3.scaleLinear`, `d3.scaleBand`, and `d3.csv` to load and map data. Bars are colored by past, current, or future months, with hover tooltips revealing race dates and towns. The data comes from debticonn.org, and the layout is styled with Roboto font and a clean, grid-free design.

Loading thumbnail…

Triangle Pentagon

This example displays a closed polygonal line connecting eight points in a two-dimensional coordinate space, forming a shape reminiscent of a star or a triangle-pentagon hybrid. The visualization uses the D3.js v4 library’s `d3.line()` path generator to convert the array of x-y coordinates into an SVG `path` element, which is then rendered with a blue stroke and no fill. The code appends the SVG container to the document body via `d3.select()`, hardcoding the 1000x1000 pixel canvas and the data points. The geometric pattern is drawn as a single continuous path, illustrating how D3’s line interpolation handles multiple segments within one dataset.

Loading thumbnail…

d3 | reusable circle legend

This example demonstrates a reusable circle legend for bubble charts, using nested concentric circles to represent proportional values such as 8%, 34%, and 89%. The legend renders in SVG via d3 v4, with `d3.scaleSqrt()` mapping the domain to circle radii, and includes dashed guide lines and text labels for each value. The code exposes a configurable API for setting domain, range, values, dimensions, colors, and suffixes, making the legend adaptable to different datasets.

Loading thumbnail…

d3 | 1 triangle repeated

This visualization arranges 45 identical triangles in a circular pattern, each rotated by 10 degrees around the center of an SVG canvas, creating a complex, gear-like mandala from a simple repeated shape. The code defines triangle vertices as coordinate pairs and uses D3 v4’s data join with `d3.range` to generate groups, appending a path per triangle via `append('path')` and the `datum` method. A slider input lets users adjust the number of triangles from 1 to 50, triggering a re-render with updated rotations, while all strokes use a semi-transparent yellow against a dark background.

Loading thumbnail…

Trembling triangle #2

An animated triangle on a canvas trembles and morphs as it fills with shifting, warm-colored bands. The rendering uses a D3 v4 timer loop to drive the shape’s jitter, with the triangle’s edges recursively subdivided to create fractal depth. Each frame, the canvas is cleared, and ten offset triangle paths are drawn in sequence with semi-transparent fills, producing a shimmering, layered effect. The code employs `d3.randomNormal`, `d3.scaleLinear`, `d3.interpolateWarm`, and the Canvas 2D API to generate the motion and color.

Loading thumbnail…

d3 | reusable circle legend

This example shows a reusable circle legend for bubble charts, displaying three concentric circles sized by a square-root scale to represent data values like 8%, 34%, and 89%. Each circle is paired with a dashed tick line and a text label, making the mapping from numeric value to area immediately readable. The code defines a `circleLegend` function that builds SVG elements via `d3.scaleSqrt`, `selection.append`, and chained data joins. Users configure the legend through methods like `.domain()`, `.range()`, and `.values()`, then call `.render()` to draw it, with all defaults adjustable for colors, padding, and suffixes.

Loading thumbnail…

China tile grid map

This example shows a tile grid map of China, where each province is rendered as a rectangular cell colored by its electricity consumption in 2015. The view toggles between a traditional geographic map and the grid layout. It uses `d3.geoMercator` for projection, the `geo2rect` library to convert polygons to rectangles, and `d3.scaleQuantile` to map electricity values to colors. Province positions are manually defined in a configuration object, and the animation is triggered by clicking the toggle button.

Loading thumbnail…

Reusable Donut Chart in D3 v4

This reusable donut chart, built with D3 v4, displays the probability distribution of bacterial species in a sample. It renders an interactive SVG donut with labeled slices and connecting lines, and shows a tooltip in the center when hovering over a slice or species name. The chart is implemented as a reusable function using `d3.pie`, `d3.arc`, and `d3.scaleOrdinal`, with data loaded from a tab-separated values file. It features animated transitions and customizable parameters like corner radius and pad angle.

Loading thumbnail…

Top Internet Countries Visualization

A horizontal bar chart displays the top 20 countries by internet users, with bars sorted descending and labeled by country. The visualization uses D3 v4 to load data from a CSV file, scales with `d3.scaleLinear` and `d3.scaleBand`, and renders axes via `d3.axisBottom` and `d3.axisLeft`. Bar widths encode user counts, with `d3.csv` parsing comma-formatted numbers. The chart includes styled tick marks and an axis label, drawing from Internet World Stats data.

Loading thumbnail…

China tile grid map

This example shows a tile grid map of China, where each province is represented as a rectangle colored by its electricity consumption in 2015. A toggle button switches between the grid layout and the original geographic map, animating the shape change. The code uses the geo2rect library to convert GeoJSON polygons into rectangles, with D3 v4 (d3.geoMercator, d3.scaleQuantile) for rendering and coloring, and Turf.js for geographic calculations. Province positions in the grid are manually specified in the config, and the electricity data comes from a CSV file.

Loading thumbnail…

d3 | reusable circle legend

This example shows a reusable SVG circle legend that maps numeric values to circle sizes using a square-root scale, with dashed guide lines and text labels for each value. Built with D3 v4, the `circleLegend` function accepts configuration options like domain, range, values, colors, and text padding, then renders circles, lines, and labels centered within a specified width and height. The legend is useful for bubble charts, allowing users to customize the suffix, text color, and circle stroke.

Loading thumbnail…

Tidy Tree

A tidy tree diagram displays the hierarchical structure of the Flare class hierarchy, organizing nodes by distance from the root. The visualization uses the Reingold-Tilford algorithm via `d3.tree()` for an efficient, layered layout. Data is loaded from flare.csv and processed with `d3.stratify()` to build the tree. SVG rendering includes horizontal links with `d3.linkHorizontal()`, while internal nodes are distinguished with darker circles and varying text positions.