P

Pacsangon

@Pacsangon·30 public vizzes

Loading thumbnail…

fresh block

A simple bar chart displays five fixed values (100, 200, 300, 150, 275) as blue vertical rectangles against an SVG canvas. The bars are positioned sequentially along the x-axis with a fixed width of 50 pixels, while their heights directly encode the numeric data, anchored to a 500-pixel-tall chart. The code uses D3 v4’s data join (`selectAll`, `data`, `enter`) to append SVG `rect` elements, calculating each bar’s `y` position as the difference between the chart height and its value. It sets a white stroke for visual separation, with no axes or labels present.

Loading thumbnail…

Zoomable treemap template

This zoomable treemap template visualizes hierarchical data, allowing users to click on nested groups to zoom into deeper levels or click the orange top band to zoom out. Built with D3 v3, it uses `d3.layout.treemap`, custom layout functions, and SVG transitions to animate the zooming. The example includes sample data representing world population figures organized by region and subregion, sourced from countries.git. The code is written in ES2015 and follows an Airbnb-style format, with the main logic abstracted into `drawTreemap.js`.

Loading thumbnail…

Map Projections

This example draws a parallel coordinates plot of automotive specifications from a small CSV dataset, with eight vertical axes for attributes like fuel economy, cylinders, and model year. Each car is shown as a polyline connecting its attribute values. It supports one-to-many highlighting: hovering over an axis label or a line fades out all unrelated items. The code uses d3.svg.axis for axes, d3.scale.ordinal and d3.svg.line for the polylines, and d3.select's mouseover handlers to trigger the active/inactive class toggles.

Loading thumbnail…

Parallel Coordinates CSV Upload

This example presents an interactive parallel coordinates visualization that lets users upload a CSV file and explore multivariate datasets. It renders data as polylines across multiple vertical axes, with brushing to filter values, axis reordering via drag, and axis inversion on click. The visualization combines three stacked canvases for foreground, background, and highlighted lines with a D3.js SVG overlay for axes and labels. It uses `d3.csv.parse` for file parsing and `d3.svg.brush` for interactive filtering, with sample datasets included for cars, earthquakes, and nutrient compositions.

Loading thumbnail…

Nutrient Database Explorer

This interactive parallel coordinates chart explores USDA nutrient data for foods across 14 dimensions, colored by food group. It renders polylines on layered Canvas elements for performance, while using SVG for axes, ticks, and drag interactions. Users brush axes to filter, invert axes by clicking labels, reorder dimensions by dragging, and remove axes by dragging them to the edge. The code builds on d3.v2, utilizing d3.svg.axis, d3.behavior.drag, and d3.scale.ordinal, with additional controls for exporting data as CSV and toggling between dark and light themes.

Loading thumbnail…

Force-Directed Parallel Coordinates

A force-directed graph of character co-occurrence in *Les Misérables* sits beside a parallel coordinates chart tracking each node's x, y, and group membership. Dragging a circle in the network updates its corresponding polyline in real time, using the same underlying data. The SVG visualization is built with d3.v2 and Underscore, leveraging `d3.layout.force`, `d3.svg.axis`, and `d3.svg.line`. The y-axis is reversed to match SVG's top-down coordinate system.

Loading thumbnail…

treemap2

This interactive treemap visualizes the flare.json dataset, where each cell’s area and color both encode the data value. A custom `d3.layout.treemap2` extension of `d3.layout.treemap` computes the maximum area among sibling nodes; cell fill interpolates between lightgray and a material orange via `d3.interpolateHsl`. Clicking a cell zooms into its parent group, and a dropdown switches the value metric between size and count. The layout sorts children to place the largest cell in the top-right.

Loading thumbnail…

Loading json files

This example demonstrates an interactive circular bubble chart that visualizes hierarchical JSON data, with a focus on handling multiple datasets. The visualization uses D3 v3’s `d3.layout.pack` to position and size circles based on nested data values, while a click-to-zoom animation transitions between hierarchy levels. Users can switch between three JSON files via buttons, which are implemented as SVG groups with click handlers that reload and re-render the pack layout. The code uses `d3.json` for asynchronous data loading, `d3.scale.linear` with HCL color interpolation for node coloring, and `d3.interpolateZoom` for smooth zoom transitions.

Loading thumbnail…

Counties of the United Kingdom

This interactive treemap displays the counties of the United Kingdom, grouped hierarchically by country. Users can click on any cell to zoom into that region’s sub-level, with an animation that resizes and repositions all cells accordingly. The visualization uses the `d3.layout.treemap` API to lay out the nested structure, with data parsed from a CSV file listing counties by country. Clicking outside a group resets the view, and colors are assigned per country using `d3.scale.category20c`.

Loading thumbnail…

Zoomable Circle Packing

A zoomable circle packing visualization displays a hierarchical dataset as nested circles, where each circle's size corresponds to a numeric value. Clicking a circle zooms into that branch, expanding its children while hiding others, and clicking the background returns to the root. Built with D3 version 3, it uses `d3.layout.pack` to compute the circle layout and `d3.scale.linear` for positioning. The view animates via `transition.attr` over 750 milliseconds, updating circle positions and radii. The code uses the `flare.json` dataset and renders with SVG elements, including circles and text labels.

Loading thumbnail…

Zoomable Circle Packing

This interactive visualization displays the flare software hierarchy as a nested circle packing layout, where each package and subpackage is represented by a colored circle whose size corresponds to its `size` value from the `flare.json` data. Clicking a circle zooms in to that node, and clicking the background returns to the root view, using animated transitions to smoothly interpolate the scale and translation. The example uses `d3.layout.pack` to compute circle positions and radii, with SVG circles and text labels, and `d3.interpolateZoom` to animate the zoom effect.

Loading thumbnail…

Multiple Line Climate Plot with Zoom

This example shows monthly global temperature anomalies from five climate datasets (GISS, HAD, NOAA, RSS, UAH) in a zoomable multi-line chart. A large focus panel displays all series, while a smaller context panel beneath it serves as a brush-based navigation tool. Dragging the brush window updates the focus panel’s x-axis domain and redraws the lines accordingly. The visualization uses D3 v3 with SVG rendering, `d3.svg.brush` for zooming, and `d3.time.scale` for date handling, with data loaded from a CSV file.

Loading thumbnail…

Force-Directed Graph (modificación de datos, español)

A force-directed graph maps Facebook profile attributes—such as hometown, political views, and employer—as linked nodes, with edge thickness indicating relationship strength. The D3 v4 code uses `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to position nodes, while `d3.drag` enables interactive movement. Data comes from Stanford's SNAP Facebook ego-network dataset, adapted into Spanish with custom node labels and grouping colors via `d3.scaleOrdinal`.

Loading thumbnail…

Treemap

This treemap displays the hierarchical structure of the Flare data visualization toolkit, with each rectangle’s area and color representing the byte count of files within the codebase. The visualization uses D3.js v4 to parse a CSV file and build a treemap layout with the `d3.stratify` and `d3.treemap` APIs, while a color scheme from `d3.scaleOrdinal` distinguishes top-level categories. Each node is rendered as an HTML `div`, with labels and values positioned using absolute pixel coordinates.

Loading thumbnail…

Usuarios de Internet

This interactive line chart shows the percentage of internet users per country from 2000 to 2014. Each thin brown line represents a country, and hovering over a line highlights it. The visualization colors lines by continent—red for the Americas, purple for Asia, orange for Africa, blue for Europe, and green for Oceania—with a legend implied in the styling. The SVG is rendered using the D3.js library, with data loaded from a CSV of ITU statistics. Hovering over a line turns it orange, and a selected line grows thicker via CSS stroke-width changes.

Loading thumbnail…

Usuarios de Internet

This visualization shows the percentage of internet subscribers in 222 countries from 2000 to 2014, with each country represented as a separate line in a multi-series chart. The data comes from ITU and is displayed using SVG rendering. The code uses the D3.js library (version 3.5.6) to create the time-series graph, employing `d3.svg.axis()` for both x and y axes, `d3.time.scale()` for parsing dates, and `d3.scale.category20c()` to assign distinct colors to each country's line.

Loading thumbnail…

D3.js Drag and Drop, Zoomable, Panning, Collapsible Tree with auto-sizing.

This interactive tree visualization demonstrates a collapsible, draggable hierarchy using D3.js v3 with SVG rendering and animated transitions. The root "flare" node is fixed, while any other node can be dragged and dropped onto a new parent, changing the tree structure. Panning occurs by dragging empty space or pushing nodes toward the edge, while zooming uses double-clicks or the mouse wheel, with shift+double-click to zoom out. The tree auto-sizes to fit the viewport, and the code builds the diagram with `d3.layout.tree`, `d3.svg.diagonal`, and JSON data from `flare.json`.

Loading thumbnail…

Usuarios de Internet

This visualization shows the percentage of internet users in Costa Rica from 2000 to 2014, with each year plotted as a circle on a time-series line chart. The data, sourced from ITU's "TIME SERIES BY COUNTRY (UNTIL 2014)" indicator, is rendered as an SVG using D3.js version 3.5.6. The code uses `d3.time.scale` for the x-axis and `d3.scale.linear` for the y-axis, with `d3.svg.axis` generating ticks and labels. A hover effect changes circle fill color to orange.

Loading thumbnail…

Usuarios de Internet

This visualization shows the percentage of internet users in 222 countries from 2000 to 2014, with each country represented by a circle. The code animates the circles across the chart, sequentially sorting them by their 2000 and 2014 values and changing their color and size to reflect changes over time. Built with D3.js, it uses `d3.scale.linear`, `d3.svg.axis`, and `d3.csv` to read the data from a CSV file and render the animated SVG. The data is sourced from ITU’s Time Series by Country indicators.

Loading thumbnail…

Usuarios de Internet

The visualization displays the percentage of internet users across 222 countries, comparing values from 2000 to 2014. It plots each country as a circle, positioning it by its 2000 value on the x-axis and its 2014 value on the y-axis, with an animated transition and a title tooltip showing both percentages. The data comes from the ITU’s time series by country and is rendered as an SVG using the D3.js library, specifically utilizing `d3.scale.linear`, `d3.svg.axis`, and the `transition()` method to animate the circles.

Loading thumbnail…

Usuarios de Internet

This visualization shows the percentage of internet users in 222 countries during the year 2000, arranged as a horizontal bar chart sorted in descending order. Each bar represents a country, with its length scaled to the proportion of the population using the internet. Hovering over a bar reveals a tooltip with the exact percentage. The data comes from the ITU’s time series and is rendered using the D3.js library (version 3.5.6), utilizing `d3.csv`, `d3.scale.linear` for the x-axis, `d3.scale.ordinal` for the y-axis, and `d3.svg.axis` for building the chart axes.

Loading thumbnail…

Internet

A horizontal bar chart shows the percentage of individuals using the internet per country, based on the year 2000 column of a CSV file containing data from 2000 to 2014. The visualization initially focuses on the earliest year, with each country represented by a single bar whose length encodes its value. The code uses D3.js version 3.5.6, employing `d3.scale.linear` for bar widths and `d3.scale.ordinal` with `rangeBands` for evenly spaced bar heights, and reads the data via `d3.csv`, appending `rect` elements to an SVG canvas.

Loading thumbnail…

Internet

This bar chart displays the percentage of Internet subscribers in the year 2000 for various countries, sorted in descending order. Each green rectangle represents a country, with its width proportional to the subscription percentage, and hovering reveals a tooltip with the exact value. The visualization uses D3.js to load data from a CSV file, sorts the data, and appends rectangles to an SVG canvas. The chart’s height accommodates each country as a separate row, making comparisons straightforward.

Loading thumbnail…

Internet

This example uses the D3.js library's `d3.csv` method to load tabular data from a CSV file and generates a simple bar chart inside an SVG element. It reads internet usage statistics from the file `IndividualsInternet_00-14.csv`, and creates one horizontal bar per data row by appending `rect` elements to the SVG. The bar widths are proportional to the values in the `y2000` column, scaled by a factor of ten, while each bar’s vertical position is determined by its row index. The page is styled with a plain white SVG background on a light gray page.

Loading thumbnail…

Gist 8d0dd436131999d73be5

This visualization displays an SVG map of Costa Rica with its provinces highlighted as individual paths. The code uses ammap.com's SVG map data, with each province path styled using CSS classes for land and water features. Rendering relies on the raw SVG path elements and the amcharts:ammap projection metadata, which specifies the Mercator projection and geographic bounds. The map is presented as a static, standalone SVG file with no interactive JavaScript libraries involved.

Loading thumbnail…

Carga datos CSV

This example demonstrates how to load a CSV file containing internet usage statistics by country and year using D3.js. It fetches the `IndividualsInternet.csv` file from a gist via `d3.csv` and logs the parsed data to the browser console for inspection. The visualization itself is minimal, focusing solely on the data-loading step rather than rendering any chart, with the resulting array of objects available for subsequent use in a D3-based application.

Loading thumbnail…

Datos: porcentaje de personas que utilizan Internet 2000-2014

This visualization maps the percentage of internet users per country from 2000 to 2014, using a choropleth world map. The data is drawn from a CSV file listing countries and yearly percentage values, with missing entries left blank. The rendering is built with D3 and likely uses `d3.geoPath` to project country boundaries, while color intensity is scaled to represent the percentage range. The code also references `d3.forceSimulation` for layout purposes, though the primary display emphasizes geographic distribution over time.

Loading thumbnail…

D3 Line Chart

A responsive D3.js line chart displays time-series data sampled every ten days across 2014, with a red locator circle that tracks touch or drag events. The chart loads CSV data via `d3.csv`, uses `d3.time.scale` and `d3.svg.line` for rendering, and adapts its margins and axis orientation based on window width. It includes two static text annotations and redraws on window resize through a custom `Chart.render` function.

Loading thumbnail…

Nutrient Database Explorer

This interactive parallel coordinates explorer visualizes USDA nutrient data across 14 dimensions for various foods, colored by food group. Users can brush axes to filter data, reorder axes by dragging labels, invert axes, and remove them entirely. The visualization uses HTML5 Canvas layers for efficient rendering of polylines, with D3.js (v2) managing the SVG axis ticks, labels, and drag interactions. The tool includes features for exporting filtered data as CSV and dynamically searching the dataset.

Loading thumbnail…

Correct zoom of layout

This example demonstrates improved zoom behavior for a D3.js layout where a background rectangle maintains full coverage of the SVG viewport during pan and zoom operations. It uses the `d3.behavior.zoom` API with a `scaleExtent` of [0.2, 5] to constrain zoom limits. The rescale function applies an inverse transform to the rectangle, using `1 / d3.event.scale` to counteract the group’s scale transformation, ensuring the drag target remains correctly sized and positioned at all zoom levels.