CarloGato

@CarloGato·19 public vizzes

Interactive Color Legend

This interactive scatter plot visualizes the Iris Dataset, mapping petal length against sepal width and coloring each point by species. Using React and d3.scaleOrdinal, hovering over a color legend entry highlights that species’ circle by raising its opacity from 0.2 to full strength, while dimming the others. The chart includes axis labels and a formatted tick axis using d3.format.

Dec 17, 2019

Loading thumbnail…

D3 Line Chart with Multiple Lines

This visualization displays temperature trends for multiple cities over time, with a color-coded line for each city and a legend identifying each series. The chart uses a time-scaled x-axis, a linear temperature axis, and a categorical color scale. Built with D3 v5, it employs `scaleTime`, `scaleLinear`, `scaleOrdinal`, and `axisBottom`/`axisLeft` to construct axes. Data is loaded from an external CSV containing city temperature readings, then nested by city using `nest()`, with lines rendered as SVG paths using `lineGenerator` and a basis curve.

Dec 17, 2019

Loading thumbnail…

D3 Line Chart with Multiple Lines

This visualization displays city temperature trends over time as a multi-series line chart titled “Temp Around the World.” It plots temperature readings (y-axis) against timestamps (x-axis) for multiple cities, with each city distinguished by color from a categorical color scale. Built with D3 v5, the chart uses `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.lineGenerator` with `d3.curveBasis` for smoothed paths, `d3.nest` to group data by city, and a custom legend component. The interactive SVG renders the data from a CSV file sourced from data-canvas-sense-your-city-one-week.

Dec 17, 2019

Loading thumbnail…

Circles on a Map

This visualization displays global population estimates for 2018 by placing semi-transparent blue circles at the geographic centroids of each country on a natural Earth projection. The map supports zooming and panning via d3.zoom, with a size legend showing population values scaled using d3.scaleSqrt. Data combines UN population CSV with TopoJSON world boundaries, processed using d3.csv, d3.json, and topojson.feature. The code uses d3.geoPath, d3.geoCentroid, and d3.geoNaturalEarth1, alongside SVG rendering to show the choropleth-like country fills and legend components.

Dec 17, 2019

Loading thumbnail…

Circles on a Map

Dec 14, 2019

Loading thumbnail…

Circles on a Map

This visualization uses a natural Earth projection map to display the population of each country for 2018, with the area of each circle proportional to its population. The map supports pan, zoom, and hover interactions for additional details. The code employs d3.geoPath and d3.geoNaturalEarth1 for the map projection, along with d3.scaleSqrt for sizing the circles. Population data comes from a CSV file, while country boundaries are sourced from TopoJSON. Legends for both color and size are rendered using SVG, with hover effects revealing population figures.

Dec 14, 2019

Loading thumbnail…

Sophie's version: Aggregation by Country using Excel + Dropdowns!

This interactive map visualizes course viewership data by country, using a dropdown menu to filter between different courses and an "All" option for aggregated totals. It renders a world map with D3 geoMercator projection, drawing D3 geoGraticule lines, geoPath land masses, and sphere background. Data is loaded via D3's csv and json from external sources, with circle markers sized using scaleSqrt based on view counts and tooltips displaying country and view totals. The React frontend updates the map and circles when a course is selected from the dropdown menu.

Dec 14, 2019

Loading thumbnail…

Bowl of Fruit - General Update Pattern

This visualization demonstrates the general update pattern in D3, showing a bowl of fruit that changes over time as items are added, removed, and modified. Initially five apples appear, then one is eaten, an apple is replaced by a lemon, and another apple is removed. The example uses D3's `select`, `scaleOrdinal`, and transition system with `transition().duration()` to animate circle radii and colors, rendering in SVG. The code in `fruitBowl.js` shows enter, merge, and exit transitions, with each fruit assigned an `id` for key-based data joining.

Dec 14, 2019

Loading thumbnail…

Choropleth Map with Interactive Filtering

A choropleth map colors countries by economic category using an ordinal color scale derived from d3.scaleOrdinal and d3.schemeSpectral. Clicking a legend item filters the map, reducing the opacity of non-matching countries and highlighting the selected category. The map uses d3.geoNaturalEarth1 and d3.geoPath to render world features from TopoJSON data, while d3.zoom enables panning and zooming on the SVG. Hovering a country turns it red via CSS.

Dec 14, 2019

Loading thumbnail…

Choropleth Map

This choropleth map visualizes countries colored by their economy classification, using a spectral color scale to differentiate income groups. The visualization displays country names and classifications on hover via tooltips, with a legend showing the ordinal color mapping. Built with D3 v5, the example uses `geoNaturalEarth1` projection and `geoPath` to render world geography from TopoJSON data, while `scaleOrdinal` with `schemeSpectral` assigns colors. The interactive zoom feature uses `zoom`, and a custom `colorLegend` function draws the legend with SVG circles and text.

Dec 14, 2019

Loading thumbnail…

World Countries Tree

This example shows a hierarchical tree of world countries organized by continent and subregion, with each country name rendered as text at varying font sizes based on depth. It uses d3.tree and d3.hierarchy to compute the layout from a JSON data file, then renders SVG paths with d3.linkHorizontal for the branches. Zooming and panning are enabled through d3.zoom, and text styling applies a custom Google Font, plus drop-shadow effects via CSS.

Dec 9, 2019

Loading thumbnail…

World Population Area Chart

This area chart visualizes world population growth from 1950 to 2020, with a smooth, filled curve showing the increase over time. The chart uses D3 v5 with SVG rendering, employing `d3.scaleTime`, `d3.scaleLinear`, `d3.area`, and `d3.curveBasis` to generate the path. Data is loaded from a CSV file via `d3.csv`, with axes formatted using `d3.axisLeft` and `d3.axisBottom`, including tick labels that abbreviate population values in billions.

Dec 5, 2019

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for 392 cars from the UCI Auto MPG data set, loaded via `d3.csv`. Each semi-transparent red circle represents a car, positioned by a linear scale on the x-axis for horsepower and a linear scale on the y-axis for weight. The SVG rendering uses `d3.scaleLinear` for axes, with `d3.axisBottom` and `d3.axisLeft` adding tick marks and labels, along with custom axis titles and a chart title.

Dec 5, 2019

Loading thumbnail…

Scatterplot

A scatterplot displays population figures for countries exceeding 100 million inhabitants. The visualization uses a linear scale for population on the x-axis and a point scale for country names on the y-axis, with axis labels and gridlines. It loads data from a CSV file using d3.csv, scales the population values, and renders SVG circles. The code employs d3.scaleLinear, d3.scalePoint, d3.axisLeft, d3.axisBottom, and d3.format for tick labels.

Dec 3, 2019

Loading thumbnail…

Customizing Axis

This example displays a horizontal bar chart of countries with over 100 million inhabitants, using population data from a CSV file. The chart shows a highly customized axis: the y-axis has its tick lines and domain removed entirely, while the x-axis uses a custom tick formatter that abbreviates numbers (e.g., converting 1.4G to 1.4B) and displays gridlines across the full chart height. The code leverages D3 v5 functions like `scaleBand`, `scaleLinear`, `axisBottom`, `axisLeft`, and `format` to achieve these modifications.

Dec 3, 2019

Loading thumbnail…

Making a Barchart

This example shows the population of the world’s most populous countries as horizontal bars, sorted by country name. Using D3 v5, it loads a CSV dataset and renders an SVG bar chart with linear and band scales. The code imports specific D3 modules—`select`, `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`—to create axes and position rectangles. Population values are converted from thousands to absolute numbers before being mapped to bar widths.

Dec 3, 2019

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to combine SVG shapes and CSS styling to create a static geometric composition. It pairs circles and rectangles with varying fills, strokes, and transformations, including a translated group of shapes outlined in black and a set of red lines with a rounded path. The visualization relies on inline SVG attributes for positioning and the `<g>` element for grouping, while an external stylesheet defines the red stroke style for lines and the stroke color for the path. The rendered output is a canvas of 960 by 500 pixels, scaled by a factor of 1.2.

Dec 2, 2019

Loading thumbnail…

Hello VizHub

This example demonstrates a minimal D3.js visualization that displays the text “Hello VizHub!” in a large, styled font. The page uses D3 v5’s `select` method to target a `div` element and set its text content from a separate ES6 module, `myMessage.js`. Styling is applied via an external CSS file with the Ubuntu font, a dark blue background, and centered white text. The code imports `select` from the D3 library and shows how to structure a simple single-page visualization with modular code and a separate bundle script.

Dec 2, 2019

Loading thumbnail…

HTML Cars Report

This example presents a simple HTML-based report listing three used cars with their model years and prices. It demonstrates basic document structure and styling using plain HTML and CSS, without any JavaScript or external libraries. The data is hardcoded directly in the markup, with one list item, the 2012 Nissan Leaf, highlighted in green through the `.highlighted` class. The page uses a monospace font at a large size for readability, showcasing how CSS can be applied to format and emphasize content in a minimal, static visualization.

Dec 2, 2019