Skip to main content
Log in
P

PaolaAntonicoli

@PaolaAntonicoli·12 public vizzes

Loading thumbnail…

Making a Bar Chart

This example shows a bar chart of monthly incident counts, sorted by month from January through December. The code uses D3's `scaleLinear` and `scaleBand` to map incident values to bar widths and month labels to vertical positions, with `axisLeft` and `axisBottom` for the chart axes. Data is loaded asynchronously from a CSV file via `csv()`, and rendered as SVG rectangles within a 960x500 canvas. The visualization is built in a React environment, with styles defined in an external CSS file.

Feb 22, 2022
Loading thumbnail…

Bowl of Fruit

Five fruit circles with labels animate in a bowl-like row, with apples disappearing and one changing to a lemon. The example uses D3 v5’s data join and ordinal scales (colorScale, radiusScale) to map fruit type to fill and size, while enter and exit transitions handle updates. SVG rendering and React framework structure the visualization, with timeouts triggering pop, type-change, and filter operations.

Feb 22, 2022
Loading thumbnail…

Bowl of fruit

This example shows a simple still life of a bowl of fruit, drawn as two black dots on a large yellow circle with a black outline. The visualization uses basic Scalable Vector Graphics (SVG) shapes defined directly in an HTML page, with circle elements specifying center coordinates, radii, and fill and stroke styles. The rendering relies on inline SVG markup rather than any external JavaScript library, and the page is styled with a minimal CSS reset to remove default margins and hide overflow. No interactive or animated behavior is present in the code.

Feb 22, 2022
Loading thumbnail…

Untitled

A bar chart displays monthly incident counts, with values ordered from January to December despite the CSV’s shuffled rows. The visualization uses a linear x-scale and band y-scale, with bars styled in steelblue. D3’s `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` handle scaling and axes, while `axisBottom`’s tick format converts numbers to “Mila” units. The React framework is not used; instead, D3 selects the SVG directly. Data comes from `data.csv`, and a title and axis labels are added via SVG groups and text elements.

Feb 20, 2022
Loading thumbnail…

Let's make a face with D3.js!

A stylized orchid-colored face is drawn with SVG primitives, featuring circular eyes, rectangular eyebrows, and an arc-based mouth. The eyebrows animate up and down using chained D3 transitions. Built with D3 v5 within a React framework, the code demonstrates the use of `select`, `arc`, and `transition().duration()` to construct and animate geometric shapes within a fixed SVG coordinate system.

Feb 19, 2022
Loading thumbnail…

Fork of Customizing Axis

This example visualizes monthly incident counts as circles along a scatterplot-style chart, with the y-axis ordered by month and the x-axis scaled by incident frequency. The visualization uses D3.js v5 with React, loading data from a CSV file via `d3.csv` and rendering to SVG. It customizes the axes using `scaleLinear`, `scalePoint`, `axisBottom`, and `axisLeft`, with custom tick formatting that converts numbers to a "Mila" suffix. Styling is applied through CSS classes for circles, axes, and the title.

Feb 8, 2022
Loading thumbnail…

Fork of Customizing Axis

This example shows a bar chart of monthly incidents, using a diverging scale where bars extend horizontally from a central axis. The chart is rendered as an SVG in a React environment with D3 v5, using `scaleLinear` for the x-axis and `scaleBand` for the y-axis. The x-axis labels are formatted with `format('.2s')` to display numbers in thousands. The code customizes the axis by removing domain lines and tick marks, and adds a rotated title and axis label via `g.append`. Data comes from a CSV file loaded with `d3.csv`.

Feb 8, 2022
Loading thumbnail…

Fork of Hello VizHub

This example demonstrates how VizHub projects can load D3 and use local ES6 modules, displaying a centered “Hello VizHub!” message. The code imports the `select` function from D3 and a custom `message` string from a separate `myMessage.js` module, then sets the text of the `#message` div via `select('#message').text(message)`. Styling is applied through an external `styles.css` file.

Feb 6, 2022
Loading thumbnail…

shapes with SVG and CSS

This example shows a collection of basic geometric shapes—a circle, a rectangle, a line, and a path—rendered inside a single SVG canvas. The shapes are styled and transformed using CSS rules and inline presentation attributes, demonstrating how CSS can apply strokes, fills, and transformations like translating and scaling to SVG elements. The code uses raw HTML with an SVG element, and a linked `styles.css` file defines classes such as `.lines` and `.highlited` to control visual properties, including stroke color, line joins, and a scale transform on the line group.

Feb 6, 2022
Loading thumbnail…

HTML Cars Report

This example shows a static, styled HTML report listing three used cars with their model years and prices. The page uses plain HTML for structure, a linked CSS file named `styles.css` to set a monospace font and highlight the first car in orchid color via the `.highlited` class, and JavaScript is not actually utilized in the rendered output. It demonstrates a minimal, non-interactive data display without any charting or visualization libraries, relying solely on semantic markup and basic CSS styling.

Feb 6, 2022
Loading thumbnail…

Cars Report

This example displays a text-based car report filtered by price. It selects cars priced under 2009 from a small hardcoded JSON dataset and formats each entry into a single line containing year, make, model, and price. The page then renders the resulting list in a large monospace font. The code demonstrates local ES6 module imports and exports for data (`cars.js`), formatting (`formatCar.js`), and report generation (`report.js`), with no external libraries beyond the default bundled setup.

Feb 5, 2022
Loading thumbnail…

Fork of Hello HTML

This example shows a simple, hand-coded SVG smiley face drawn directly in an HTML page. It uses raw SVG elements with `circle` tags to create the face, eyes, and yellow body, all rendered in a 960×500 viewport. The code relies on basic SVG APIs for shapes and styling, with inline attributes controlling fill colors, stroke colors, and stroke widths. No external libraries or data sources are used; the visualization is purely static and defined entirely within the HTML markup.

Nov 30, 2021