pinardag

@pinardag·5 public vizzes

Mass/Height Menu

This scatter plot displays car data from the UCI Machine Learning Repository’s Auto MPG dataset, where users select the X and Y columns via two dropdown menus. The plot uses d3’s `scaleLinear`, `axisLeft`, and `axisBottom` for axes, with circles animated via `transition().delay()` to move from an initial position to their data points. The `dropdownMenu` component builds the `<select>` elements, and data is loaded as CSV from a local file.

Jan 22, 2019

Loading thumbnail…

Merhaba DM

This example displays a large, centered greeting in a dark-themed webpage. It uses D3.js version 5, specifically the `select` function, to target a div element and set its text content with a message imported from a separate ES6 module. The page’s styling applies the Ubuntu font and a solid background color via CSS. The visualization is minimal, demonstrating basic D3 DOM manipulation and modular JavaScript integration rather than data-driven rendering.

Jan 22, 2019

Loading thumbnail…

Merhaba DM

This example displays a large, centered greeting message using D3.js. The code selects a div element and sets its text content from a separate ES6 module, demonstrating modular JavaScript with D3’s `select` function. The page uses a dark background with a light Ubuntu font, and the greeting is rendered at a massive font size for visual impact. The visualization is minimal, focusing on the integration of D3 for DOM manipulation and text updates within a custom stylesheet setup.

Jan 22, 2019

Loading thumbnail…

Customizing Axes

This bar chart displays the populations of the top 10 most populous countries from the 2018 United Nations World Population Prospects. It uses D3 v5.6.0 with an SVG rendering. The code customizes axes by removing the default y-axis domain and ticks, and by formatting x-axis tick labels with a custom `format('.3s')` function to replace 'G' with 'B'. It also adds custom axis labels and a title using SVG text elements.

Jan 22, 2019

Loading thumbnail…

Ordinal Scatter Plot

This ordinal scatter plot shows the population of the top 10 most populous countries as circles positioned along a categorical y-axis, with a linear x-axis for population values. The chart uses `d3.scalePoint` for the ordinal country scale and `d3.scaleLinear` for population, with circle radius fixed at 18. Axes are generated via `d3.axisLeft` and `d3.axisBottom`, while population labels use `d3.format` with custom tick formatting to abbreviate values. Data comes from the 2017 United Nations World Population Prospects estimate, loaded from a CSV file with `d3.csv`.

Jan 22, 2019