Melina

@melidalessandro·18 public vizzes

Cheap Tricks for Interaction

This example displays a world map using Natural Earth data via TopoJSON, projecting countries with the `geoNaturalEarth1` projection and rendering them as SVG paths through `d3.geoPath`. The map shows country names on hover through SVG `<title>` elements, populated from the world-atlas TSV file. The visualization implements cheap interaction by altering the fill color of countries when hovered, using a CSS `:hover` rule. The code loads data with `d3.tsv` and `d3.json`, and builds the map with `topojson.feature`.

Jun 15, 2020

Loading thumbnail…

Bowl of fruit - Hover to Select

Five fruits (initially all apples) sit in a row, and hovering over a circle highlights it with a black outline while the mouse is over it. The visualization demonstrates the D3 general update pattern, using `transition().duration(1000)` to animate the radius and x-position of each fruit. Over time, fruits are removed and a lemon appears, changing its color via a d3 `scaleOrdinal` color scale. The example relies on SVG circles and mouseover/mouseout events to trigger the selection state.

Jun 15, 2020

Loading thumbnail…

Bowl of fruit - Click to Select

Five fruit circles sit in a row; clicking one highlights it with a black outline. Apples and lemons are distinguished by color and size, and fruit is removed or swapped in over time. Built with D3 v5, the example uses a general update pattern with `selection.selectAll`, `.enter().append`, `.merge`, and `.exit().transition` to animate radius and position changes over one second. Settings come from an `index.js` script that modifies a fruit array at timed intervals.

Jun 15, 2020

Loading thumbnail…

Pie chart

This interactive pie chart, built with D3.js, visualizes the regional distribution of apple and orange counts. A radio-button form lets the viewer toggle between the two datasets, triggering a smooth animated transition of the chart's arcs. The visualization includes a legend with colored dots and labels to identify each region. It uses D3's `pie`, `arc`, and `transition.attrTween` APIs to render the SVG and animate the changes.

Jun 15, 2020

Loading thumbnail…

Bowl of fruit - General Update Pattern

A bowl of fruit demonstrates the D3 general update pattern, showing apples and lemons rendered as colored circles that are added, removed, and changed over time. The visualization uses d3.select, data joins, and enter/merge/exit selections in the fruitBowl function, with d3.scaleOrdinal mapping fruit types to colors and radii. The SVG output updates through three timed transitions, first removing an apple, then changing an apple to a lemon, and finally filtering out another apple.

Jun 15, 2020

Loading thumbnail…

Bowl of fruit - General Update Pattern

Five apples appear in a row, then one apple is removed, a second apple changes into a lemon, and a third apple is removed. The animation demonstrates the D3 general update pattern by using the `data()`, `enter()`, `merge()`, `exit()`, and `transition()` methods on D3 selections. The code applies an ordinal color scale and radius scale to distinguish fruit types, and uses `transition().duration()` and `.attr()` for animated size and position changes. Rendering is done with SVG and JavaScript, using D3 v5's selection and range utilities.

Jun 14, 2020

Loading thumbnail…

Temperature in San Francisco Scatterplot

This scatterplot visualizes world population by year using a filled area chart. The data comes from a CSV file and is rendered as an SVG using D3 v5, with scales for time and linear values. The code employs `scaleTime`, `scaleLinear`, `area`, and `curveBasis` to generate the smooth filled path, while axes, labels, and tick formatting are handled via `axisLeft`, `axisBottom`, and `format`. The visualization emphasizes the population growth curve over time with a styled grid and title.

Jun 14, 2020

Loading thumbnail…

Temperature in San Francisco Scatterplot

This scatterplot visualizes one week of temperature in San Francisco, using data from Data Canvas - Sense Your City. Timestamps on the x-axis and temperatures on the y-axis show daily fluctuations, with an overlaid maroon area path smoothing the trend via `d3.area` and `curveBasis`. The chart is built with D3 v5, using `scaleTime`, `scaleLinear`, and `axisBottom`/`axisLeft` for axes, while CSV data is loaded asynchronously and rendered as SVG within a fixed 960x500 canvas.

Jun 14, 2020

Loading thumbnail…

Temperature in San Francisco Scatterplot

This scatterplot visualizes one week of temperature data in San Francisco, with time on the x-axis and degrees Celsius on the y-axis. The visualization uses D3.js with SVG rendering, employing `scaleTime` and `scaleLinear` for axes, and `axisBottom` and `axisLeft` for tick marks. A smooth line, generated with `line` and `curveBasis`, connects the points. The data is loaded from a CSV file hosted on VizHub.

Jun 14, 2020

Loading thumbnail…

Temperature in San Francisco Scatterplot

This scatterplot displays a week of temperature measurements in San Francisco, with time on the x-axis and temperature in degrees Celsius on the y-axis. The visualization uses d3.csv to load the data, then d3.scaleTime and d3.scaleLinear to map the values, with d3.axisBottom and d3.axisLeft rendering the labeled axes. Orange circles are positioned using the scales, and the chart includes a title and axis labels styled via CSS. The example originates from the Data Canvas - Sense Your City project.

Jun 14, 2020

Loading thumbnail…

Car's Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository Auto MPG dataset. The visualization uses D3 v5 to load CSV data and render an SVG with d3.scaleLinear for both axes. Circles are drawn with a semi-transparent purple fill, with axis labels and tick marks styled using d3.axisLeft and d3.axisBottom, including gridlines. The margin-based layout positions the title and rotated y-axis label, demonstrating a classic scatter plot built with the d3 data join pattern.

Jun 13, 2020

Loading thumbnail…

Scatter Plot

A scatter plot displays the population of the top 10 most populous countries as circles along a linear x-axis and a point-scale y-axis. Using D3.js v5, the code loads data from a CSV, applies a scaleLinear for population and scalePoint for country names, and renders axes with tick formatting using the format function. Circles are appended via a data join, with a custom title and axis labels, while tick lines and domain elements are removed for a cleaner appearance.

Jun 13, 2020

Loading thumbnail…

Customizing Axes

This visualization displays the top 10 most populous countries using horizontal bars, with population values along the x-axis and country names on the y-axis. It demonstrates customized axes in D3.js, including a formatted tick label that converts abbreviations like "G" to "B" for billions, removed axis lines, and custom axis labels. The code uses d3.csv to load data, d3.scaleLinear and d3.scaleBand for scaling, and d3.axisLeft and d3.axisBottom for rendering axes, with all elements drawn as SVG rectangles.

Jun 13, 2020

Loading thumbnail…

Making a pie chart!

This example demonstrates how to create a bar chart using D3.js, rendering population data for ten countries as an SVG. The chart shows each country's population as a horizontal bar, with the x-axis scaled linearly and the y-axis using a band scale for categorical labels. The code utilizes `d3.csv` to load data from a local file, `d3.scaleLinear` and `d3.scaleBand` for scaling, and `d3.axisLeft` and `d3.axisBottom` for axes. The rendering process involves appending rectangle elements to the SVG, with widths proportional to population values.

Jun 13, 2020

Loading thumbnail…

Let's make a face with D3.js!

A D3.js animation draws a yellow smiley face with eyes, a mouth, and eyebrows that move. The SVG is centered, and the code uses D3's `select` and `append` to build shapes, `arc` for the mouth path, and `transition().duration(2000)` twice to animate the eyebrow group up and down in a repeating sequence. The face is static except for the eyebrows, which shift vertically.

Jun 11, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to compose basic SVG shapes—circles, rectangles, lines, and a path—inside a single `<svg>` element. The code uses plain SVG markup and CSS to control visual properties, such as setting fill colors, stroke widths, and stroke line joins. CSS classes like `.lines` apply styling to groups of shapes, while inline attributes and nested `<g>` transforms position and scale the elements. The rendering is purely static, with no data binding or interaction, showcasing direct SVG and CSS coordination.

Jun 11, 2020

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic SVG shapes—circles, rectangles, lines, and a path—styled with CSS. It shows how shapes can be given explicit fill and stroke colors, or inherit styles from group elements and CSS classes. The code uses raw SVG elements (`<circle>`, `<rect>`, `<line>`, `<path>`, `<g>`) with attributes like `cx`, `r`, `x`, `width`, and `transform`, while external CSS defines stroke width, color, and line join styles. The rendering is purely static SVG without any JavaScript libraries.

Jun 11, 2020

Loading thumbnail…

HTML Cars Report

This example presents a simple HTML cars report, displaying a one-page document with a title and a list of two textual items, with the first item highlighted via CSS class styling. It demonstrates fundamental web visualization setup using plain HTML markup for structure and a linked external stylesheet, `styles.css`, to control typography and emphasis. The rendering relies on standard browser document object model parsing and CSS application, with no JavaScript or additional data-loading libraries involved. The approach is purely static, using a monospace font and a large font size for readability, illustrating basic DOM and CSS styling rather than interactive or data-driven visual encoding.

Jun 11, 2020