Nemastoja

@Nemastoja·8 public vizzes

Cars Jbt Scatter Plot

This scatter plot displays the relationship between vehicle weight and horsepower using the classic auto-mpg dataset, with large green circles marking each car. The visualization uses D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` to construct axes with gridlines, while `extent` sets the domains. Data is loaded via `csv` from a remote URL and rendered as an SVG. Custom labels and a title are added, and the code formats tick values using `format` with a '.1s' specifier.

Feb 7, 2021

Loading thumbnail…

Jbt Scatter Plottic

A scatter plot maps employee roles to their salaries using circular marks. The visualization loads data from a local CSV file and renders with SVG through D3 v5, employing `scaleLinear` for the x-axis and `scalePoint` for categorical y-axis positions. Axis ticks extend across the plot area, and the x-axis label displays text in a foreign language. The code uses `csv`, `axisBottom`, `axisLeft`, and `format` to construct the chart, though the data transformation attempts to reference a nonexistent `population` field.

Feb 7, 2021

Loading thumbnail…

A Bar Chart - Part two

This horizontal bar chart compares salary figures across four financial job roles, with salaries arranged along the x-axis and role names on the y-axis. The visualization uses D3 v5, importing functions like `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the plot. Data is loaded from a CSV file and rendered as SVG rectangles with a fixed green fill. The chart includes labeled axes, a custom x-axis tick format using `format('.1s')`, and styled grid lines, with the y-axis labels and domain lines removed for a cleaner look.

Feb 6, 2021

Loading thumbnail…

My first Bar Chart in D3!

This bar chart displays salary levels for several finance-related roles, with horizontal bars ordered by job title. The visualization uses D3 v5’s `scaleLinear` for the salary axis and `scaleBand` for categorical roles, rendering SVG rectangles via `selectAll` and data joins. It reads a local CSV file with `d3.csv`, and axes are generated using `axisLeft` and `axisBottom`. The chart applies margins and scales to map salary values to bar widths, with a fixed 960×500 SVG canvas.

Feb 4, 2021

Loading thumbnail…

An ahaha Face with D3!

A stylized face is drawn with D3 v6 and rendered as an animated SVG. An outer circle forms the head, two pairs of concentric black and white circles create the eyes, and a path uses `d3.arc` to define a mouth. The white eye pupils repeatedly change radius over two-second intervals using chained `.transition()` calls, creating a looping blink effect. The code directly manipulates SVG attributes like `cx`, `cy`, and `r`, with layout coordinates calculated from the SVG's width and height.

Jan 30, 2021

Loading thumbnail…

Funny shapes with SVG

This example demonstrates basic geometric shapes constructed with SVG elements, including circles, rectangles, lines, and paths. It shows how graphical primitives can be styled with fill colors and strokes, and grouped and transformed using SVG’s `g` element with `scale` and `translate` attributes. The code uses raw SVG markup inside an HTML document, with CSS classes like `.lines` to control stroke properties. A simple path with rounded line joins illustrates polyline rendering within the scaled coordinate space.

Jan 24, 2021

Loading thumbnail…

SVG. Just saying

This example demonstrates the basic setup of a D3.js visualization using SVG, showing how to load D3 from a CDN and structure an HTML page with a message div and linked stylesheet. The code imports D3 via UNPKG and uses the `d3` object to render SVG content, though no specific data or interactive behavior is implemented. It serves as a minimal template for understanding how D3 v5 integrates with local ES6 modules and external libraries, highlighting the foundational structure for more complex visualizations.

Jan 23, 2021

Loading thumbnail…

HTML Cars Report

This example renders a stark, monochrome HTML page titled “Merdaaa” that presents a short bulleted list of three placeholder items. It serves as a minimal static report, demonstrating basic semantic markup structure with an unordered list. The presentation is controlled entirely through CSS, applying a large monospace font to the body and highlighting the second list item in red using the `.highlighted` class. No JavaScript, charting library, or data source is utilized; the visualization is purely a styled HTML document, not an interactive or data-driven graphic.

Jan 23, 2021