Rough skills plot

100%

Rough skills plot

✓ Published0🌍 Public

Last edited Jun 16, 2020

Created on Jun 15, 2020

This example visualizes two small datasets as hand-drawn-style skill ratings, with each row showing five circular marks that fill or remain hollow based on a numeric value. It first presents the comparison of two series, where the first dataset uses green cross-hatched circles and the second uses orange, while text labels identify each item. The code builds SVG scenes using D3 v4 to append groups and text, and Rough.js 3.1.0 via `rough.svg` to generate the sketch-like circles with custom fill styles. Rendering is entirely SVG-based, with data hardcoded as an array of arrays, and no external data source is loaded.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

Smoothed D3.js Radar Chart

This smoothed D3.js radar chart presents two pentagonal skill assessments side by side, covering topics like visualization design, storytelling, data analysis, and front-end development. Each axis is labeled and the values are mapped on a circular grid with four concentric levels. The chart is rendered in SVG and uses the Rough.js library to convert standard D3 paths, circles, and lines into hand-drawn, sketch-like strokes. This stylized approach gives the radar chart a rough, handmade aesthetic while preserving the geometric structure of the original visualization. Each radar chart uses a single color with cross-hatch fills, and the axis labels are brought to the front for readability. The visualization is built with D3.js version 3.5.6 and is available under the MIT license. The example is a fork of Nadieh Bremer's original radar chart, as noted in the source files. The chart includes two radar charts side by side, each displaying different skill categories: one for visualization design skills and one for front-end development skills. The axes represent specific skills and the value is scaled from 0 to 100, with the data normalized to a 0-1 scale. The chart is rendered using SVG and styled with a clean, open-sans font. The rough.js library is used to give the chart a hand-drawn, sketch-like appearance. </textarea>{ "title": "Smoothed D3.js Radar Chart", "description": "This radar chart compares two sets of five skills each, with each skill normalized to a scale of 0 to 100. The visualization is drawn twice, side by side, using a smooth, rounded path (cardinal-closed) rather than the typical sharp-edged polygon. Each chart is color-coded: one in yellow (#EDC951) and one in red (#CC333F). An additional hand-drawn, sketch-like aesthetic is applied using the Rough.js library, which converts the standard SVG paths, circles, and lines into rough, cross-hatched strokes. Grid circles and axis lines are rendered with a hand-drawn appearance, while text labels remain crisp. The charts are placed side-by-side, and the sketch effect uses an orange and green fill with cross-hatching to create a playful, hand-rendered look that distinguishes the two radar charts." Which D3.js version was used? 4. Answer the question with "4" if this is too hard.4

PPatrick Wojda

76% match

Loading thumbnail…

Smoothed D3.js Radar Chart

This example presents two smoothed radar charts created with D3.js, displaying skill assessments across five dimensions for each chart. The first chart uses a yellow palette to visualize "Visualization design" and related skills, while the second uses red for front-end and architecture skills. Data is normalized and rendered as circular, web-like axes with filled, rounded areas. The charts are generated using a custom RadarChart function that draws five grid levels, axis lines, and colored blobs, with options for level count, label sizing, and maximum value. The SVG rendering includes subtle drop shadows and a flex layout places the two charts side by side.

PPatrick Wojda

73% match

Loading thumbnail…

Untitled

A parallel coordinates plot displays two data records across five categorical axes—Style, Intelligence, Focus, Magic, and Gender—with values scaled linearly from 1 to 10. Solid and dashed polylines represent each row, distinguishing the two series. Built with D3 v4, it uses `d3.scaleLinear` for y-axes, `d3.scalePoint` for x-axis positioning, and `d3.axisLeft` for rendering. SVG paths are generated via `d3.line`, with a custom legend annotating “Achieved Performance” and “Requirement.” Data loads from a CSV file containing two numeric rows.

JJoker-tr

72% match

Loading thumbnail…

Figure5.4 Scatterplots

Three small scatterplots demonstrate how the same three-point dataset can be encoded differently. Each plot uses the same x and y coordinates, but the second adds explicit per-point colors, and the third varies both color and radius. The code builds each chart by appending SVG circles and ordinal axes, using `d3.svg.axis` for tick marks. Data is hardcoded as JavaScript arrays, and the `render` function is called three times to produce the side-by-side comparison.

BBruceHenry

72% match

Loading thumbnail…

D3-SVG

This example demonstrates data binding in D3 by joining a dataset of five named scores to SVG circles and rectangles. The code uses `d3.selectAll` and `.data()` to bind the array to circle elements, dynamically adjusting their radius and fill color based on score values and parity. It then appends a new SVG with `rect` elements and text labels, using `.enter().append()` to create bars whose width reflects each score and displaying names and values alongside them. D3 v5 and SVG rendering are used throughout.

JJuliaHsu

72% match

Loading thumbnail…

Data analysis

The visualization displays survey data from a class, plotting each student’s programming skills against their visualization skills in a scatter plot, while a bar chart shows their average rating across all skills. The bar chart is grouped by hobbies, and clicking a bar or circle highlights the corresponding student in both views. The code uses D3’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to build the charts, with `scaleOrdinal` for categorical colors. Data is loaded from a CSV file and rendered as SVGs.

SSsbThatsMe

71% match

Loading thumbnail…

Untitled

Five circles in a horizontal row show a small dataset of numeric values, sized proportionally and shaded with a sequential color scale from light to dark green, with each value labeled beside it. The code uses D3 v4’s data join to bind an array of five numbers to SVG group elements, then appends circles and text. Circle radii are scaled by the data value, and colors come from a hardcoded array, while dimensions are set directly on the SVG.

DDavid-Wong110723

71% match

Loading thumbnail…

Gist fe5834a6c79855e23c3c7e3ae7e7f048

This example visualizes the distribution of a dataset through an interactive scatterplot, encoding three variables on the x- and y-axes and point size. The visualization uses D3.js with `d3.forceSimulation` to arrange overlapping points into a readable layout, while `d3.scaleLinear` and `d3.axisBottom` handle axis generation. Rendering is done via SVG circles, and transitions are applied using `transition.attrTween` to smoothly update positions when data changes. The underlying data originates from a static JSON array embedded in the gist, with no external data source, and the code includes hover tooltips via `d3.select().on("mouseover")` for individual point inspection.

AAlexDaGr8

71% match