leothimoteo

@leothimoteo·5 public vizzes

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by building a smiley face whose interactive eyebrows respond to user input. Clicking the button generates a random sequence of letters, which triggers a redraw using D3’s data join pattern (`d3.select` and `.enter()`). The code uses `d3.v5` to append styled `div` elements inside a target container, while the face itself is rendered as an SVG. The animation and face elements are driven by the bundled `bundle.js` script, showcasing basic selection, data binding, and dynamic updates.

Sep 13, 2020

Loading thumbnail…

Cars Report

This example demonstrates a JavaScript module workflow that fetches car data and generates a text report filtered by price. It shows how to structure code using ES6 modules, with separate files for data retrieval (`getCars.js`), formatting (`formatCar.js`), and report generation (`generateReport.js`). The app uses a simulated asynchronous API call via `setTimeout` and `Promise`, then renders the filtered list of cars under a $2,000 threshold into an HTML `<pre>` element using `document.getElementById`. The data is embedded as JSON and parsed in the browser.

Sep 13, 2020

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates how to build a smiley face using D3.js, with interactive eyebrows that move to create an expressive animation. It showcases fundamental DOM manipulation by binding an array of fruit objects to SVG circles using `select`, `data`, and `enter`. The visualization uses D3 v5 and SVG rendering, with the face elements positioned across a 960×500 coordinate space, and includes a video tutorial explaining the construction process.

Aug 23, 2020

Loading thumbnail…

Customizing Axes

This bar chart displays the populations of the world’s ten most populous countries, using 2018 estimates from the United Nations World Population Prospects. It highlights how D3 axes can be customized for appearance and readability. The visualization uses d3.csv, d3.scaleLinear, d3.scaleBand, and d3.axisLeft to render countries along the vertical axis and population values as horizontal bars. SVG elements are styled via external CSS, with tick labels, grid lines, and text sizes adjusted through the .tick class.

Aug 23, 2020

Loading thumbnail…

Let's make a face with D3.js!

A D3.js example demonstrates fundamental DOM manipulation by rendering a smiley face with movable eyebrows, using SVG elements. The code loads population data from a CSV file and appends rectangle shapes to the SVG canvas via `d3.select` and `d3.csv`, though the data is only logged to the console. The visualization relies on D3 v5’s selection and data-binding methods, with the face constructed through chained attribute calls on SVG elements.

Aug 23, 2020