Marks and Channels_NH_2

100%

Marks and Channels_NH_2

✓ Published0🌍 Public

Last edited Feb 7, 2023

Created on Feb 7, 2023

This example visualizes daily solar energy production data from a Bloomington Parks & Recreation site by encoding wattage values through bar length. The visualization arranges seven rectangles along an x-axis, where each bar’s height corresponds to the wattage measurement for a given day. The implementation uses D3 v7 with a band scale for positioning the bars and renders them as SVG rectangles. Color is applied via the `schemeCategory10` palette, and the code structure separates the bar-drawing logic into a reusable `length` function that receives the dataset and height parameters.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Marks and Channels_NH

This example demonstrates how different visual channels can encode the same quantitative data. Seven circles are horizontally positioned by value, with their size, position, and color all reflecting the data. The visualization cycles through three distinct encoding methods: length, where bars of varying height represent values; size, where circles use square-root scaling for area; and hue, which assigns categorical colors from `d3.schemeCategory10`. Built with D3 v7, it uses data joins and selection methods to render the SVG marks.

NNavak94

77% match

Loading thumbnail…

Marks and Channels_3_NH

This example demonstrates marks and channels by encoding a simple array of numbers (0–6) in three different ways: as bar length, circle size, and hue. It uses d3-selection and d3-scale-chromatic’s `schemeCategory10` to map each data value to a distinct color. The visualization renders seven fixed-position elements in an SVG canvas, with the length channel using `rect` elements and the size channel using `circle` elements scaled by the square root of the data. D3’s data join (`selectAll().data().join()`) updates the marks, while the `viz.js` file selectively applies the length encoding.

NNavak94

76% match

Loading thumbnail…

my DC-Multi BAR chart

This visualization displays monthly energy consumption in kilowatt-hours across multiple building sites, with each site represented by a distinct color. It combines bar charts and line graphs within small multiples, plotting time on the x-axis and energy values on the y-axis. The code uses D3 v5’s `csv`, `scaleBand`, `scaleLinear`, `axisBottom`, `axisLeft`, and `nest` functions to process the MonthData.csv file and render SVG elements. Colored bars show individual monthly readings, while overlaid lines and labels track each site’s trend over time.

Mmab3105

72% match

Loading thumbnail…

D3 Marks & Channels

This example demonstrates five fundamental D3 marks and encoding channels using a small array of numbers. It shows circles positioned along the x-axis and y-axis, circles scaled by area, rectangles representing length, and symbols displaying different shapes. The visualization uses D3 v7 with the `select`, `symbol`, and `symbolsFill` APIs to bind data and generate SVG elements. The data is a simple fixed set of integers, rendered as multiple separate SVG canvases, each focusing on a distinct mark and channel combination.

SSubhendu Karmakar

72% match

Loading thumbnail…

Marks and Channels

A small multiples grid of five D3.js plots demonstrates how the same dataset—the numbers zero through four—can be encoded through different visual channels. Each panel isolates a single mark or channel: x-position, y-position, size, length, shape, and hue, using circles, rectangles, and paths. The code uses D3’s selection and join API within a custom viz.js orchestrator, rendering SVG directly. Shape encoding leverages d3.symbol() with symbolsFill, while hue applies schemeCategory10.

SSubhendu Karmakar

72% match

Loading thumbnail…

Patriots Marks and Channels

This example shows how different visual encodings—position, length, size, shape, and hue—can represent data, demonstrated through a series of simple marks. The main view renders a bar chart of player statistics using `d3.selectAll` and `join` to bind data arrays. It uses `schemeCategory10` for categorical colors and scales the bar width and height from paired values in the `playerStats` array. The visualization is built with D3 v7, using modular imports for each encoding type and an SVG container sized at 800 by 400 pixels.

KKyle?

71% match

Loading thumbnail…

Interactive Color Legend_With_Menu_NH_2

This interactive scatter plot displays daily solar power generation data from Kaggle, plotting maximum wattage against data point (date) for Banneker and Davies solar sites. A drop-down menu switches between sites, while a color legend highlights points by site name and dims unrelated circles on hover. Built with D3 v7, the visualization uses `scaleLinear` for axes, `scaleOrdinal` with `schemeCategory10` for coloring, and custom modules for axes, legend, and menu rendering. The fetched CSV data is parsed and coerced to numeric types before being plotted as circles.

NNavak94

71% match

Loading thumbnail…

Marks and Channels

This visualization demonstrates the concept of marks and channels, showing how position (x and y), size, length, shape, and hue encode data in separate SVG panels. Each panel uses D3 joins to bind the array [0, 1, 2, 3, 4] to circle, rect, and path elements, with attributes like `cx`, `cy`, `r`, `height`, and `fill` set via scale-like functions. The code imports from the `d3` module, using `schemeCategory10` for color, `symbol()` and `symbolsFill` for shapes, and `selection.each()` to dispatch each mark function.

CCurran Kelleher

71% match