Skip to main content
SimilarExport ZIP
100%

fresh block

✓ Published0🌍 Public
GGerardoFurtado
Last edited Jun 6, 2018
Created on Jun 6, 2018

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.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

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
90% 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
86% match
Loading thumbnail…

fresh block

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.

GGerardoFurtado
85% match
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
84% 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
79% match
Loading thumbnail…

fresh block

Two empty square divs sit side by side, one red and one blue, each 200 pixels wide and tall. The page currently contains no data or visualization logic; the embedded script tag is blank. The example relies on the D3.js v4 library loaded from a CDN, though no D3 functions or APIs are invoked. The layout uses a fixed-position body with inline-styled divs to create a simple placeholder canvas, indicating a starting point for a future chart rather than a finished graphic.

JJboulery
79% match
Loading thumbnail…

fresh block

This example shows a simple line chart of 21 random data points, with each point represented as a circle. The visualization uses D3.js v4 to generate an SVG, with a black line connecting the dots and interactive hover effects that turn the circles red on mouseover and fade back to black on mouseout. The code applies the margin convention, scales the data with `d3.scaleLinear`, and uses the `d3.line` generator to draw the path. Axes are rendered with `d3.axisBottom` and `d3.axisLeft`, and the chart fills the browser window.

663anp3ca
78% match
Loading thumbnail…

fresh block

This example shows a simple bar chart rendered as a series of vertical rectangles, each with a fixed width and varying heights that step down from left to right. Built with D3 v4 and SVG, the code appends each rectangle directly to the document body, setting explicit x, y, width, and height attributes. A text element also displays an instructional message for the viewer. The data is hardcoded in the markup rather than loaded from an external source.

KKirun1
78% match