DavideSanto

@DavideSanto·11 public vizzes

Bowl of fruits.js

Bowl of fruits.js demonstrates the D3 data-join pattern with enter, update, and exit selections. Five circles, initially apples, are rendered in SVG; a timer pops one fruit, another timer changes a fruit’s type to lemon, and a final filter removes an element. The example uses `selection.merge` to manage updates and `selection.exit` for removals, with `d3.scaleOrdinal` mapping types to fill colors and radii. It shows how array mutations trigger re-renders of the same chart.

Mar 28, 2020

Loading thumbnail…

World Population Chart by Davide.js

This example visualizes world population over time as a smooth, filled area chart, with the y-axis labeled in billions and the x-axis showing time. The chart uses D3 v5 to load CSV data from a VizHub dataset, scales the data with `scaleTime` and `scaleLinear`, and renders the area using the `area` generator with `curveBasis`. Axis labels and a title are added via SVG text elements, while grid lines are created through axis tick settings. The data is parsed from the CSV, converting years to JavaScript Date objects and population values to numbers.

Mar 28, 2020

Loading thumbnail…

Area Chart by Davide.js

This area chart visualizes temperature variations in San Francisco over one week, using data from DATA CANVAS: sense your City. The SVG rendering employs D3 v5’s `scaleTime`, `scaleLinear`, `area`, and `curveBasis` to create a smooth filled path, with axes annotated via `axisLeft` and `axisBottom`. Data is loaded as CSV and parsed into timestamps and numeric temperatures.

Mar 28, 2020

Loading thumbnail…

Line Chart by Davide.js

This line chart displays temperature readings in San Francisco over a week, with a smooth curved line connecting data points across a time-based x-axis and a linear y-axis. The visualization uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisLeft`, `axisBottom`, and `line` with `curveBasis` for the smooth curve. Data is loaded as CSV from an external URL and parsed with timestamps converted to `Date` objects. The SVG rendering includes gridlines, axis labels, a title, and a maroon line path, with styling handled through external CSS.

Mar 23, 2020

Loading thumbnail…

SFO Temperature linear plot Graph by Davide.js

A line plot displays San Francisco's temperature readings over one week, with blue circles marking each data point along the time-based x-axis and temperature-based y-axis. The visualization loads CSV data from an external VizHub dataset, parsing timestamps and numeric temperatures before rendering. Built with D3 v5, the code uses scaleTime, scaleLinear, axisBottom, axisLeft, and extent APIs to construct the chart, including grid lines, axis labels, and a title, all rendered as SVG elements.

Mar 23, 2020

Loading thumbnail…

A Cars scatter plot Graph by Davide.js

This scatter plot from the Auto MPG dataset visualizes the relationship between horsepower and weight for cars, with each point representing a vehicle. The visualization uses d3.csv to load data and d3.scaleLinear for both axes, with d3.axisBottom and d3.axisLeft rendering the gridlines and tick marks. Circles are appended as SVG elements with fill and opacity styling from the CSS. The chart includes axis labels and a title, all rendered using d3’s selection and data-join methods.

Mar 23, 2020

Loading thumbnail…

A scatter plot Graph.js

This scatter plot visualizes world population for 25 countries in 2016, with each circle’s horizontal position encoding population size on a linear scale and vertical position using a point scale for country names. The SVG chart uses D3 v5 APIs including `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom`. Data is loaded from a CSV file, with population values parsed as numbers, and axes are styled with custom tick formatting that abbreviates billions as "B".

Mar 22, 2020

Loading thumbnail…

A bar Graph with custom Axis.js

This example displays the world population in 2016 for 24 countries as horizontal bars, sorted by population size. Using D3 v5, the code loads data from a CSV file and renders an SVG bar chart with custom axes. The y-axis uses `scaleBand` for country names, while the x-axis uses `scaleLinear` with custom tick formatting via `format('.3s')` to abbreviate numbers, and grid lines are drawn with `axisBottom` and `tickSize`.

Mar 21, 2020

Loading thumbnail…

Stylized Bar Chart

This stylized bar chart shows the top 10 most populous countries, with country names on the y-axis and population values (formatted in billions using D3’s `format` function) on the x-axis. It uses React to render SVG marks and axes, with D3’s `scaleBand` and `scaleLinear` for positioning. The chart pulls data from the United Nations World Population Prospects 2019 CSV via D3’s `csv` loader. Tooltips display exact population values via SVG `<title>` elements.

Mar 20, 2020

Loading thumbnail…

Let's make a face with D3.js

A yellow circle with black outline and two black eyes forms a simple face using D3.js v5. The mouth is drawn as an arc path using the `d3.arc` generator, positioned within a centered `<g>` group. The SVG canvas is 960 by 480 pixels, with elements placed via absolute coordinates and the group's transform. The code selects the `svg` element and appends circles and a path, demonstrating basic SVG shape creation and coordinate positioning in D3.

Mar 18, 2020

Loading thumbnail…

HTML CIAO3

A minimal HTML page displays the static text “Hello CIAO22” centered in a large font. The example uses plain HTML markup within an `index.html` file, styled by an external `styles.css` rule that sets `text-align: center` and a font size of 5em. No JavaScript libraries or data sources are involved; the visualization is purely presentational, demonstrating how a simple text element can be rendered and centered using core web technologies. The code includes a link to the React Starter for further expansion.

Mar 18, 2020