fresh block

100%

✓ Published0🌍 Public

Last edited Jun 4, 2018

Created on Jun 4, 2018

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.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

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

90% 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

86% 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

86% match

Loading thumbnail…

fresh block

A simple bar chart displays five hardcoded values—10, 30, 15, 20, and 100—as vertical rectangles. The chart uses D3 v4’s selection and `append` API to create SVGs directly: `d3.select("body").append("svg")` builds the canvas, then `.selectAll("rect").data(data).enter()` generates bars whose height, y-position, and opacity are derived from each data value. Text labels repeat the same numbers below each bar using `d3.selectAll("text")`, with fixed styling for font size and monospace family. All geometry and styling are set via SVG attributes and styles, with no axes or gridlines present.

GGregory-Howard

83% 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

83% match

Loading thumbnail…

fresh block

This example shows a simple bar chart built from an array of five numeric values, rendered as blue rectangles with white strokes on an SVG canvas. The code uses D3 v4’s selection and data binding to map each data point to a rectangle, with the x-position determined by an index-based offset and the y-position calculated as the height minus the data value, so bars rise from the bottom. The chart’s fixed width per bar is set via a constant, while the height directly encodes each number. The data is hardcoded in the script, and the rendering relies on SVG’s native shape elements.

BBraMKJ

82% 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

82% match