a-ydobon

@a-ydobon·6 public vizzes

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by building a smiley face from SVG circles, with animated eyebrows that move. The code uses D3 v5’s `select`, `range`, and data joins to bind an array of five fruit objects to circles, setting position and fill attributes. The rendering is pure SVG, created through `.enter().append('circle')` on an empty selection. The eyebrows are implied through the data structure, though the visible output focuses on the static face layout.

Aug 12, 2019

Loading thumbnail…

Bar Chart

This example demonstrates a bar chart that loads population data from a CSV file and renders it as SVG rectangles using D3.js. The code uses `d3.csv` to parse the data, `d3.scaleLinear` to map population values, and `d3.select` with `append('rect')` for DOM manipulation. The resulting visualization displays raw rectangles without axes or labels, showing only the initial data-binding step. The chart is constructed with a fixed width and height for each bar, leaving the scaling incomplete.

Aug 9, 2019

Loading thumbnail…

Hello VizHub

This example visualizes population data for the ten most populous countries using a bar chart rendered with SVG. The code loads data from a CSV file and uses D3 v5 scales—`scaleBand` for the x-axis and `scaleLinear` for the y-axis—to map values. It also employs `axisLeft` and `axisBottom` to generate the chart’s axes, while styling is applied via CSS.

Aug 9, 2019

Loading thumbnail…

Customizing Axes

This example displays a bar chart of the top 10 most populous countries, using 2018 estimates from the United Nations World Population Prospects 2017. It demonstrates customization of D3 axes, including removing default domains, using a custom tick formatter that converts billions to a readable format, and applying gridlines. The chart is rendered as SVG, with axes created via `d3.axisBottom` and `d3.axisLeft`, and styling applied through CSS classes.

Aug 8, 2019

Loading thumbnail…

SVG Example

This example demonstrates basic SVG shapes arranged to show color blending through overlapping rectangles. The visualization uses three semi-transparent rectangles in red, blue, and yellow, which combine to create secondary colors where they intersect. The markup is hand-written SVG directly in the HTML file, with dimensions fixed at 500 by 500 pixels. The code also imports D3’s `select` function to update text content in the page, showcasing how D3 can complement pure SVG rendering.

Aug 7, 2019

Loading thumbnail…

Hello VizHub

This example demonstrates how a static text message can be rendered on a webpage using D3.js and ES6 modules. It shows a single text element, “Hello VizHub!”, displayed prominently on a dark blue background with white Ubuntu font styling. The page loads D3 v5 from a CDN and uses the `d3.select` API to insert the message into a div, while the message content is defined in a separate module and imported via ES6 `import` syntax. The visualization relies on basic DOM manipulation rather than data binding or complex rendering.

Aug 3, 2019