semopz

@semopz·6 public vizzes

Making a bar chart

A yellow circle face with eyes, eyebrows, and a mouth is drawn in SVG, then the eyebrows animate upward and back down using chained `transition` calls in d3.v5. The face is centered in a 960x500 SVG, with features positioned via SVG transforms and an arc path for the mouth. The animation runs continuously in a loop, demonstrating how SVG shape attributes can be transitioned with D3’s `transition.attr` method.

May 8, 2020

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face drawn with SVG shapes—a circle for the head, two circles for eyes, and a path generated by the arc function for the mouth—appears centered in a 960×500 viewport. The code imports select and arc from D3 v5, using SVG groups to position features. The eyebrows, rendered as rectangles, animate by moving up and down through chained transition().duration() calls, while the static face elements remain fixed.

May 8, 2020

Loading thumbnail…

Shapes with SVG and css

This example shows how SVG shapes and CSS styling can be combined to create a simple composition of circles, rectangles, lines, and a path. The first two shapes use default black fill, while the next two apply explicit red and green fills via attributes. A nested group applies a light blue fill and black stroke to its children, and a separate group with the class "lines" sets stroke color and width through CSS, with the path getting a cyan stroke and rounded joins. The entire drawing uses SVG elements and CSS rules, scaled 1.5 times within a 960 by 500 viewport.

May 8, 2020

Loading thumbnail…

HTML Cars Report

This example shows a simple HTML cars report listing three used vehicles with their prices, highlighting the 2012 Nissan Leaf in tomato red. It demonstrates styling with CSS and semantic markup using a plain HTML document. The report uses standard DOM elements—an unordered list, list items, and a class attribute—to present the data. No JavaScript libraries or APIs are involved, and the rendering relies solely on the browser’s default HTML and CSS engine. The datasource appears to be static, hardcoded values within the HTML file.

May 8, 2020

Loading thumbnail…

Cars Report

This visualization displays a car report as a large text list, showing each car’s year, make, model, and price, filtered to include only vehicles under $2000. The page initially shows “Loading...”, then after a simulated two-second delay, the filtered list replaces it. The code relies on async/await with a Promise-based timeout, JSON parsing, and string formatting via the `formatCar` and `generateReport` functions. The presentation uses a plain HTML `<pre>` element styled with inline CSS, with no external charting libraries.

May 6, 2020

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates how SVG shapes and CSS styling can be combined to create a simple visual composition. It shows circles, rectangles, lines, and a path, with shapes using inline attributes for fill and stroke colors, while a CSS class applies stroke properties to the line and path elements. The rendering relies on native SVG elements inside an HTML page, with a scale transform on the parent group and a translate on a subgroup to position elements. No external libraries are used; the code directly employs SVG markup and CSS rules.

May 5, 2020