fresh block

100%

✓ Published0🌍 Public

Last edited Jan 16, 2019

Created on Jan 16, 2019

This visualization gallery entry presents a suite of D3.js charts, each embedded via external scripts and configured through data attributes. It shows multiple interactive views of 2018 data, including regional comparisons, partner breakdowns, and beneficiary analyses, with toggles for sorting and average lines. The code leverages D3.js for rendering, with responsive layouts and lazy loading, while the source data is fetched from linked gist-hosted scripts.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

fresh block

This example assembles a set of interactive D3.js charts into a single dashboard, each presenting different facets of public budget and indicator data for a given year. The visualization shows multiple coordinated views, including bar charts, line charts, and region-based comparisons, with toggles for sorting and filtering by year, partner, or modality. The code loads data and chart logic from external scripts, using D3’s data-join and scales to render responsive SVG elements. It relies on `d3.select`, `d3.json`, and custom chart-building functions, while the layout adapts to container width. The charts are embedded via HTML `div` placeholders and external script tags, with no animation or brushing visible.

GGerardoFurtado

88% match

Loading thumbnail…

fresh block

This example displays an interactive bar chart for a single year of data, rendered inside a responsive container. The visualization is generated by a custom D3 chart script that loads a dataset and encodes values as horizontal bars. The code uses `d3.select`, `d3.scaleBand`, and `d3.axisLeft` to construct the chart, while the page itself is styled with a centered, max-width layout. The visualization is initialized by including an external JavaScript file from a gist, which references data for the year 2018. The example demonstrates a straightforward, embeddable chart built with D3.js, with no additional interaction or animation beyond basic rendering.

GGerardoFurtado

86% match

Loading thumbnail…

fresh block

This example presents an interactive chart of data for the year 2018, embedded in a responsive container. The visualization is built with the D3.js library, specifically using the `d3chartcbpfbp.js` script, which likely leverages D3’s data-binding and scaling capabilities to render the chart. The page loads the chart from an external source via a script tag, while the custom styling uses the Crimson Text and Roboto fonts from Google Fonts. The chart adapts to the container’s width, with the overall layout centered and constrained to a maximum width for readability.

GGerardoFurtado

85% match

Loading thumbnail…

fresh block

This example visualizes a geographic or map-based dataset for the year 2018, using a custom JavaScript component embedded in a responsive container. The visualization is rendered through a dedicated script that likely leverages D3.js v4, as indicated by the imported d3.v4.min.js library. It employs D3’s force simulation or projection techniques to display spatial data, though the exact method is not visible in the code snippet. The page uses a full-viewport fixed layout, with the chart container supporting lazy loading and responsive behavior. The data source originates from a GitHub-hosted gist, and the implementation relies on standard DOM manipulation via D3’s selection and data-binding APIs, without additional frameworks like Three.js or Canvas getImageData.

GGerardoFurtado

85% match

Loading thumbnail…

fresh block

This example shows an interactive year-by-year view of GitHub-style contribution data, with each year’s activity rendered as a grid of colored cells. It uses D3 v4’s `d3.forceSimulation` to lay out the cells in a compact, force-directed arrangement, while the `data-yearStart` and `data-yearEnd` attributes in the HTML control the visible time range. The visualization is driven by a custom script from an external source, with `d3.select` and `d3.axis` used to manage the timeline and scale. The data is sourced from a gist and rendered responsively, though the exact encoding of color intensity or hover interactions is not exposed in the visible code.

GGerardoFurtado

81% match

Loading thumbnail…

fresh block

A stacked area chart displays how four unnamed data categories change over time, with each layer labeled at the right edge and a y-axis formatted as a percentage. The code loads tab-separated data via `d3.tsv`, parses dates with `d3.timeParse`, and builds the visualization using `d3.stack`, `d3.area`, `d3.scaleTime`, `d3.scaleLinear`, and `d3.scaleOrdinal` with `d3.schemeCategory10`. SVG rendering and axes are created with `d3.axisBottom` and `d3.axisLeft`.

AAsilve00

80% match

Loading thumbnail…

fresh block

This example presents four separate D3 visualization panels, each displaying a distinct chart type in a single page layout. The upper panels show static data visualizations, while the fourth panel contains interactive text that, when clicked, triggers a one-time data update that refreshes the chart with new values. Built with D3 v3, the code sets up styled axes and SVG containers for each visualization, relying on D3's core selection and data-binding methods to render and update the graphical elements.

NN0taN3rd

80% match

Loading thumbnail…

fresh block

This visualization uses a parallel coordinates chart to compare five socioeconomic metrics across different types of educational institutions, with data loaded from a CSV file. The SVG rendering uses d3.svg.axis, d3.svg.line, and d3.scale.ordinal to draw axes and paths, while d3.svg.brush enables interactive filtering along each dimension. Users can drag axes to reorder dimensions and brush ranges to highlight specific institutions, with a d3.divgrid table below showing the raw data values.

GGoomble

80% match