lars-ruijs

@lars-ruijs·8 public vizzes

Sentiment

This example visualizes sentiment analysis by rendering a simple HTML page that loads the `sentimental` library from unpkg.com. The visualization draws on sentiment data processed through the `sentimental` API, which evaluates text and outputs a sentiment score. The page uses a minimal setup with CSS and JavaScript, where the main application logic resides in a bundled `bundle.js` file. The React framework is referenced, and the prototype connects sentiment analysis results to a visual representation, though the concrete rendering method is not detailed beyond relying on `sentimental` for the analysis.

Dec 16, 2020

Loading thumbnail…

RDW Data cleaning

This interactive dashboard visualizes the distribution of P+R parking capacities across Dutch cities, using data from the RDW open data portal. A bar chart shows the number of P+R locations per city, and clicking any bar generates a pie chart breaking down the parking capacity of each facility within that city. The visualization uses d3.scaleBand and d3.scaleLinear for the bar chart, while the pie chart is built with d3.arc and d3.pie. All graphics are rendered as SVG, with React managing the page structure.

Nov 20, 2020

Loading thumbnail…

Vis update

This example shows a bar chart of cities by number of P+R locations, and a pie chart of the capacity distribution for the selected city. The bar chart is drawn with SVG using `d3.scaleBand` and `d3.scaleLinear`, with bars colored in `dodgerblue`. Clicking a bar triggers `updatePie`, which filters sample data and calls `drawPie`. The pie chart uses `d3.pie` and `d3.arc`, with slices colored via `d3.schemeTableau10` and labels showing capacities. The code uses D3 v6 and dummy data based on cleaned RDW data.

Nov 12, 2020

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the auto-mpg dataset, loaded via `d3.csv` from a VizHub URL. It uses D3 v6’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to render axes, with gridlines from tick sizes. The SVG circles are semi-transparent blue, showing density. Axis labels and a title are added, with margins applied around the main plotting area.

Nov 9, 2020

Loading thumbnail…

Making a Scatter Plot

This example shows the top 10 most populous countries as circles positioned along a scatter plot, with population on the x-axis and country names on the y-axis. It uses D3 v6 APIs including `scaleLinear`, `scalePoint`, `axisBottom`, and `axisLeft` to construct the chart, while `csv` loads the data file. The rendering draws SVG circles with a fixed radius, and gridlines are created via tick marks. Population values are formatted with `format('.3s')` and converted from thousands to raw numbers.

Nov 9, 2020

Loading thumbnail…

Customizing Axes

A horizontal bar chart displays the top 10 most populous countries, using population values loaded from a CSV via `d3.csv`. The chart shows raw bars in dodger blue, with customized axes: the y-axis omits its domain line and tick lines, while the x-axis uses `d3.axisBottom` with a custom tick formatter that abbreviates large numbers and replaces 'G' with 'B'. The code leverages `d3.scaleLinear` and `d3.scaleBand` for scales, and `d3.format` for number formatting, with a labeled x-axis reading "Pupulation" and a chart title.

Nov 9, 2020

Loading thumbnail…

Making a Bar Chart!

This example shows a horizontal bar chart of country populations using a dataset loaded from a CSV file. The chart maps population values to bar widths with `d3.scaleLinear` and country names to vertical bands with `d3.scaleBand`, rendering SVG rectangles. Axes are added using `d3.axisLeft` and `d3.axisBottom`, while the code imports these functions from D3 v6 and handles the data with `d3.csv`. Population values are multiplied by 1,000 on load, and the chart is styled with a simple CSS rule for blue bars.

Nov 3, 2020

Loading thumbnail…

Let's make a Face!

An animated cartoon face is drawn on a yellow circle with black eyes, eyebrows, and a mouth, set against a blank SVG canvas. The face is rendered using D3.js v6 selections and shape generators, with `circle` and `rect` elements for the features and an `arc` generator to create the mouth’s path. Eyebrows animate vertically via chained `transition().duration()` calls, moving down and back. The code is structured as a React-compatible module, importing `select` and `arc` directly from D3.

Nov 2, 2020