Skip to main content
Log in
M

MatteoTomassetti

@MatteoTomassetti·11 public vizzes

Loading thumbnail…

Portugal, Housing Loan Customers, DashBoard

This dashboard visualizes housing loan customers in Portugal, linking a histogram of state frequencies to a pie chart and legend of loan outcomes (yes, no, unknown). Hovering over a histogram bar filters the pie chart and legend to that state, while the pie chart updates the histogram bars proportionally. Built with D3 v3 using SVG, it relies on ordinal and linear scales, `d3.svg.axis`, and transition methods to animate updates. Data is drawn from a Gist by MatteoTomassetti, forked from NPashaP’s block.

Apr 15, 2016
Loading thumbnail…

force graph astroph

This example visualizes a directed force-directed graph representing co-authorship relationships among astrophysicists, with nodes for researchers and curved, arrowed links for collaborations weighted by the number of shared publications. The code loads data from a CSV file via `d3.csv`, builds the graph using D3 v3’s `d3.layout.force`, and renders nodes as SVG circles with text labels. Curved paths with arrow markers indicate link direction, and the simulation updates node positions and path geometry on each tick. The visualization adapts Mike Bostock’s classic force layout examples, using SVG for all rendering.

Mar 13, 2016
Loading thumbnail…

OpeNER - Opinion targets (Amsterdam)

This interactive word cloud visualizes opinion targets extracted from Amsterdam accommodation reviews. Word size indicates frequency of mention, while color encodes aggregated sentiment, ranging from green (positive) to red (negative) with yellow as neutral. Users can pan and zoom with the mouse. The data comes from the Tour-Pedia APIs, processed by the OpeNER sentiment analysis pipeline. The visualization uses d3.v3 with Jason Davies's d3.layout.cloud for the word layout, rendering text via SVG and canvas with animation.

Mar 1, 2016
Loading thumbnail…

fresh block

This visualization displays the number of articles published by married, single, and divorced individuals across age brackets from 25 to 75. Each marital status is represented as a horizontal row of circles, where the circle’s size corresponds to the article count for that age range. Built with D3.js, the SVG chart uses linear scales for positioning and radius, and toggles between circles and numeric labels on mouseover. The data is loaded from a local JSON file, and the chart is styled with custom CSS for axes and labels.

Feb 26, 2016
Loading thumbnail…

Portugal banking

This example displays a horizontal bar chart comparing the accuracy scores of six machine learning algorithms, from Decision Tree (0.57) to Logistic Regression (0.98). The bars animate by growing from zero width, while their labels transition numerically from 0 to the final value. The chart uses d3.v3 with a linear scale for the x-axis and an ordinal scale for the y-axis, rendering as SVG. Text tweening is implemented via `d3.interpolate` within a `.tween` callback, with data loaded from a CSV file.

Feb 25, 2016
Loading thumbnail…

DashBoard

This dashboard links a histogram, pie chart, and legend to enable interactive exploration of frequency data across states. Hovering over a histogram bar filters the pie chart and legend to show that state’s breakdown by age group, while hovering over a pie slice updates the histogram to display the distribution of that age group across all states. Built with D3 v3, it uses SVG for rendering and transitions for smooth updates, with mouseover and mouseout events driving the synchronized changes between the three visual components.

Feb 24, 2016
Loading thumbnail…

FMI Census Analysis

This example displays a choropleth map of Portugal using the Datamaps library, with a Mercator projection centered on the country. It renders census data as color-coded geography within a fixed 300×600 pixel container, using the `datamaps.prt.js` module for country-specific boundaries. The map loads topojson data from `prt.json` and relies on D3.js v3 for its underlying projection and path generation via `d3.geo.mercator()` and `d3.geo.path()`. The visualization focuses on geographic distribution rather than interactive features, presenting the data as a static regional overview.

Feb 24, 2016
Loading thumbnail…

FMI Census Analysis

Using D3 v3 with the Datamaps library, this visualization displays a choropleth map of Portugal focused on the national census data. The map is rendered with a mercator projection centered on the country, with scale and translation configured for the container’s dimensions. It loads geospatial boundaries from a TopoJSON file via Datamaps’ `dataJson` option, while the custom `setProjection` function defines the map geometry. The visualization emphasizes geographic analysis rather than interactive features, presenting Portugal’s census-related information in a static, geographically organized format.

Feb 24, 2016
Loading thumbnail…

D3 Example

This interactive choropleth map visualizes 2010 unemployment rates by census tract in San Mateo County, California. It uses D3’s geo and zoom behaviors to render SVG paths from TopoJSON shapefile data, with colors scaled by an unemployment dataset from the county’s open data portal. Hovering reveals a tooltip with the exact percentage for each tract. The map is drawn using `d3.geo.mercator`, `d3.geo.path`, and `d3.behavior.zoom`.

Feb 24, 2016
Loading thumbnail…

Portugal banking

A horizontal bar chart displays the number of people across Portugal's banking regions, with labels such as Lisboa and Norte shown on the y-axis. Bars animate from zero to their final width over two seconds, while text labels count up from zero to the correct values using a text tween. The visualization uses D3 v3 with SVG, including `d3.scale.linear`, `d3.scale.ordinal`, and `transition.tween` for smooth updates. Data comes from a local CSV file read via `d3.csv`.

Feb 24, 2016
Loading thumbnail…

Text tween

A vertical bar chart displays the frequency of letters A through M as horizontal bars on a categorical y-axis. The chart uses D3 v3 to animate both the bar widths and accompanying text labels from zero to their target values over two seconds. The text labels tween numerically using D3's `d3.interpolate` and `transition.tween`, while bar rectangles animate with `transition.attr`. The x-axis formats values as percentages via `d3.format(".3s")`, and the data is loaded from a CSV file using `d3.csv`. SVG output is rendered with smooth easing.

Feb 24, 2016