Skip to main content
Log in
D

Dominika Modzelewska

@d-modz·14 public vizzes

Loading thumbnail…

building a heatmap

This example demonstrates a basic heatmap-building workflow using D3.js v5. It loads a CSV file via `d3.csv` and preprocesses the data by parsing string values into floating-point numbers with a custom callback function. The code logs the sum of the x and y coordinates for each row to the console, showing how raw data is read and transformed. A large "Hello VizHub!" message is displayed on screen, styled with an Ubuntu font and a dark blue background. The project relies on ES6 modules and external stylesheets for its structure and presentation.

Nov 2, 2019
Loading thumbnail…

make a face with d3.js

A simple face built from SVG shapes using D3 v5. The code creates a yellow circle with a red stroke for the head, two eyes with white pupils, and a mouth drawn as an arc path. It uses `d3.select` and `d3.arc` to position elements at fixed coordinates on a 960×500 SVG canvas. The example demonstrates basic D3 shape generation and attribute manipulation without data binding.

Oct 28, 2019
Loading thumbnail…

make a face with d3.js

A simple face built from SVG shapes using D3 v5. The code creates a yellow circle with a red stroke for the head, two eyes with white pupils, and a mouth drawn as an arc path. It uses `d3.select` and `d3.arc` to position elements at fixed coordinates on a 960×500 SVG canvas. The example demonstrates basic D3 shape generation and attribute manipulation without data binding.

Oct 28, 2019
Loading thumbnail…

make a face with d3.js

This example draws a simple face using D3.js version 5, rendered as SVG. The code uses `d3.select` to target the SVG element and `svg.append` to create circles for the face, eyes, and eye highlights, with fixed coordinates and styling for stroke and fill. The resulting graphic is a static, yellow face with red-outlined eyes, demonstrating basic D3 shape creation without interaction or data binding.

Oct 28, 2019
Loading thumbnail…

make a face with d3.js

The example produces a stylized face as an SVG graphic using D3.js v5. It begins with a red background on the selected `svg` element, then constructs facial features through D3’s data-driven selection and path generation methods. The `styles.css` file defines classes for the face’s lines and stroke properties, while the JavaScript imports `select` from D3 to manipulate the DOM. The final face is drawn entirely with SVG elements, relying on D3’s core selection and shape utilities without external data sources.

Oct 27, 2019
Loading thumbnail…

shapes with svg and css

This example demonstrates a collection of basic geometric shapes rendered with SVG and styled using CSS, including circles, a rectangle, a line, and a path. The shapes are organized within nested groups to apply transforms like scaling and translation, and CSS classes define strokes and fill colors. The code uses raw SVG elements (circle, rect, line, path) inside an inline `<svg>` tag, with styles defined in an external stylesheet. No JavaScript data source is present; the visualization relies entirely on static markup and CSS for its appearance.

Oct 27, 2019
Loading thumbnail…

shapes with svg and css

A single SVG canvas displays several geometric shapes—a green circle, a blue circle with a black stroke, a red rectangle, a black line, and a yellow path with rounded joins—arranged with transforms and grouped elements. The shapes are styled using CSS classes from an external stylesheet, which set stroke properties and font sizing. The example demonstrates how SVG primitives and CSS together can create a static, styled composition without JavaScript interactions.

Oct 23, 2019
Loading thumbnail…

shapes with svg and css

This example demonstrates a simple collection of SVG shapes, including a green circle, a blue-outlined circle with a red rectangle, and a polyline path with a yellow fill. The shapes are rendered using raw SVG elements within an HTML page, with styling and stroke properties applied through an external CSS stylesheet, including a `.lines` class that controls stroke color and width. The code uses no JavaScript libraries, relying solely on SVG tags like `<circle>`, `<rect>`, `<line>`, and `<path>`, along with CSS for presentation.

Oct 23, 2019
Loading thumbnail…

HTML car report

This example presents a minimal HTML car report, listing three vehicles with their model years and values, where a highlighted class marks the 2012 Nissan Leaf in red. The page structure is built with core HTML elements, including a heading, an unordered list, and a stylesheet link, while the presentation is defined in an external CSS file using a monospace font at 2em. No JavaScript or external libraries are used; the visualization relies solely on static markup and CSS styling from `styles.css` to convey the data.

Oct 23, 2019
Loading thumbnail…

Cars Report

This example displays a static text message, “wtf,” on a dark blue page with large Ubuntu font styling. It imports a small JSON dataset of car names, models, and prices, but the data is not used in the rendering. The page is built with an HTML structure, a JavaScript module that sets text content via `document.getElementById`, and CSS with an imported Google Font. The visualization demonstrates basic DOM manipulation and modular ES6 imports without any data-driven charting or interactive features.

Oct 17, 2019
Loading thumbnail…

Cars Report

This example displays a static text message, “wtf,” on a dark blue page with large Ubuntu font styling. It imports a small JSON dataset of car names, models, and prices, but the data is not used in the rendering. The page is built with an HTML structure, a JavaScript module that sets text content via `document.getElementById`, and CSS with an imported Google Font. The visualization demonstrates basic DOM manipulation and modular ES6 imports without any data-driven charting or interactive features.

Oct 17, 2019
Loading thumbnail…

Cars Report

This example displays a filtered list of cars priced under $2,000, formatted as a multi-line text report. It uses JavaScript array methods (`filter`, `map`, `join`) to process an embedded JSON dataset of car entries, extracting and formatting the year, make, model, and price into a readable string. The report is rendered to the page via `textContent` on a `<pre>` element, styled with a large Ubuntu font and a dark blue background from CSS, with ES6 module imports.

Oct 17, 2019
Loading thumbnail…

Cars Report

The Cars Report displays a filtered list of vehicles priced under $2000, formatted as text lines reading year, make, model, and price. It shows five car entries from the embedded `carsJSON` data source, filtering out entries with prices above the threshold. The visualization uses a minimalist approach, rendering plain text to a `<pre>` element via JavaScript DOM manipulation. The code applies `JSON.parse` to structured car data and uses `Array.filter` and `Array.map` to generate the report. Styling relies on CSS with an Ubuntu font and dark background, but no charting or graphics libraries.

Oct 17, 2019
Loading thumbnail…

Cars Report

This example displays the text “wtf” in large, centered type on a dark navy background using the Ubuntu font. The page is built with an HTML pre-element that receives its content from an ES6 module, while the cars data file remains unused. Styling comes from a CSS file with a Google Fonts import, and the JavaScript imports the cars array without displaying it. The visualization demonstrates a minimal text-rendering setup rather than a data-driven chart.

Oct 17, 2019