Skip to main content
SimilarExport ZIP
100%

Promotions with SVG

✓ Published0🌍 Public
Cchrisdreece
Last edited Jan 18, 2021
Created on Jan 18, 2021
Forked from Promotions Bars

This visualization displays promotional metrics for various locations, using circles positioned diagonally across an SVG canvas. Each circle's size represents the headcount at that location, scaled by dividing the value by 80. The chart is rendered with D3 v6, using selections to append circles to an SVG element and binding data loaded from a CSV file. The code also converts percentage columns by multiplying them by 10, though these transformed values are not used in the final rendering.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Promotions

This example displays a simple text-based visualization of employee promotion data by location, coloring each location’s name blue for Detroit and black for all others. It loads a CSV file with location, headcount, and female eligibility/promotion percentages, scales those percentages by ten, and renders the location names using D3’s `select`, `csv`, and data join with `enter()`. The visualization uses plain paragraphs appended to the body, with text and style set via anonymous functions.

Cchrisdreece
79% match
Loading thumbnail…

Promotions Bars Improved

This bar chart displays headcounts for nine cities, with each vertical bar’s height proportional to the city’s population. The visualization uses D3 v6’s `select`, `csv`, and `append` APIs to load data from a local CSV file and render SVG rectangles. Bars are positioned with fixed spacing along the x-axis, while the y-axis is not scaled, resulting in a simple, unoptimized layout. The data includes city names and population figures, which are directly mapped to bar dimensions without additional axes or labels.

Cchrisdreece
78% match
Loading thumbnail…

Promotions Bars

The visualization displays horizontal bars representing headcount across nine U.S. cities, with each bar’s width scaled proportionally to its population count. The code loads data from `locations.csv` via `d3.csv`, converts the percentage columns, and then uses D3’s `select` and `data` join to append styled `div` elements with class `bar`. Bar widths are calculated by dividing the headcount value by two and setting the result as the CSS `width` in pixels. The bars share a uniform teal background and fixed height defined in the external stylesheet.

Cchrisdreece
76% match
Loading thumbnail…

SVG

This example shows two labeled line charts, “Home” and “Away,” tracking a numeric value across eight time steps, with hover interactions highlighting each line and its points. The visualization is built with React and D3 v5, using `d3.scaleLinear` for axes, `d3.line` for path generation, and SVG elements for rendering. Circles mark individual data points and show their values on hover, while lines increase in opacity and stroke width on mouseover. The chart includes bottom and left axes generated with `d3.axisBottom` and `d3.axisLeft`, and all transitions use D3’s `.transition()` and `.duration()` methods.

VVishwas2629
69% match
Loading thumbnail…

Test

This visualization uses D3.js to display percentile trends over time for performance metrics. The view combines multiple SVG areas and a line to represent the 5-95%, 25-75%, and median values across dates from August to September 2014. Animated markers slide upward from the bottom to highlight Client and Server release versions, using D3 transitions with dynamic path lengths. The chart includes axes, a custom clip path for the legend area, and smooth basis interpolation for all drawn shapes.

CCheah Peng Huat
68% match
Loading thumbnail…

1 Circles with D3

A D3.js data visualization displays fourteen colored circles at fixed positions with varying radii and hex fills across an SVG canvas. The code imports circle data from a separate JavaScript module and uses D3's `select` API with a data join to append and configure each `circle` element. Rendering targets a 960 by 500 pixel SVG, with the visualization defined in a reusable function that binds the dataset to attributes like `cx`, `cy`, `r`, and `fill`.

BBismark Kofi Owusu Sarfo
68% match
Loading thumbnail…

circles in D3

This example displays a static collection of thirteen colored circles scattered across a 600-by-400 SVG canvas, with varying radii, positions, and fills in blue, orange, and purple. The visualization uses no D3 or JavaScript logic, relying solely on hand-coded SVG elements inside an HTML document, with each circle defined by explicit `cx`, `cy`, `r`, and `fill` attributes. The rendering approach is direct SVG markup, and the code includes no data binding, interaction, or transitions.

Ee.rossi100@campus.unimib.it
68% match
Loading thumbnail…

circles in D3

This example displays a static collection of thirteen colored circles scattered across a 600-by-400 SVG canvas, with varying radii, positions, and fills in blue, orange, and purple. The visualization uses no D3 or JavaScript logic, relying solely on hand-coded SVG elements inside an HTML document, with each circle defined by explicit `cx`, `cy`, `r`, and `fill` attributes. The rendering approach is direct SVG markup, and the code includes no data binding, interaction, or transitions.

Ee.rossi100@campus.unimib.it
68% match