Isabel

@belcortes·14 public vizzes

Chloropleth Map Interactive

This interactive choropleth map displays world countries colored by their economic classification using an ordinal color scale. Users can click legend items to filter and highlight countries matching the selected economy type, with non-matching countries fading to low opacity. The map uses d3.geoNaturalEarth1 projection and d3.geoPath for rendering country boundaries as SVG paths, with d3.zoom enabling pan and zoom interactions. Data comes from TopoJSON world atlas files, while the interactive legend is built with custom d3 selections and click handlers.

Oct 9, 2018

Loading thumbnail…

Cheap Tricks for Interaction

This example shows an interactive world map colored by economic classification, using a sequential spectral color scale. Users can pan and zoom the map via d3.zoom, which applies a transform to the geographic group. Hovering highlights individual countries with a red fill via CSS. The visualization loads country boundaries from TopoJSON and metadata from TSV, projecting them with d3.geoNaturalEarth1 and rendering paths with d3.geoPath. It uses d3.scaleOrdinal and d3.schemeSpectral to map economic data to colors, with tooltips showing country names and values.

Oct 9, 2018

Loading thumbnail…

Color and Size Legends

Two custom reusable legend components in D3 v5 display categorical color scales with colored circles and quantitative size scales with scaled circles. The color legend uses `scaleOrdinal` with fixed domain values like apple and lemon, while the size legend applies `scaleSqrt` with generated ticks. Both render as SVG groups with positioned circles and text labels, demonstrating generic legend creation patterns independent of any particular chart.

Oct 8, 2018

Loading thumbnail…

World Countries Tree!

This visualization displays a hierarchical tree of world countries, organized by continent and then by subregion. The data is structured with the world at the root, branching into continents and their respective countries. It uses the d3.tree layout and d3.hierarchy to compute node positions, while d3.linkHorizontal draws the connecting paths. Text labels are rendered at each node, with font size decreasing with depth to reflect hierarchy level.

Oct 2, 2018

Loading thumbnail…

Let's make a face with D3.js!

This D3.js v5 example demonstrates fundamental DOM manipulation by building a smiling face from SVG primitives, including yellow circles for the head and eyes, and rectangular eyebrows that animate upward and downward. The code constructs the face using `d3.select`, `svg.append`, and shape methods like `.attr`, while `d3.arc` generates the mouth as a path with specified inner and outer radii. A chained `transition().duration(2000)` sequence repeatedly moves the eyebrows up and down, creating a simple looping animation.

Oct 2, 2018

Loading thumbnail…

Bowl of Fruit - Click to select

Five circles represent fruit in a bowl, with apples and lemons distinguished by color and size. Hovering over a fruit selects it by adding a black stroke, while hovering away deselects it. The visualization uses d3 v5 with scaleOrdinal for color and radius, and the fruitBowl module binds data to SVG circles with enter, update, and exit transitions. A timer script removes and replaces fruits, demonstrating animated data updates over three seconds.

Oct 2, 2018

Loading thumbnail…

Bowl of Fruit - General Update Pattern

A bowl of fruit demonstrates the general update pattern for data joins in D3. Rows of apples transition in and out, with one apple changing into a lemon mid-animation, using d3.selectAll and data joins keyed by id. The code uses d3.scaleOrdinal for fruit color and radius, svg rect, circle, and text elements, and d3.transition with a 1000ms duration to animate updates. The index.js drives timed changes to the fruits array.

Oct 1, 2018

Loading thumbnail…

World Population Area Chart

This chart uses an area graph to show temperature trends in San Francisco over the course of a week, with time on the x-axis and temperature on the y-axis. The visualization is rendered as an SVG using D3 v5, with the `area` and `curveBasis` APIs to create the smoothed filled region. The data is loaded from a CSV file hosted on VizHub, and axes are styled using `axisBottom` and `axisLeft`, with gridlines and labels customized through CSS.

Oct 1, 2018

Loading thumbnail…

Week Temperature SF Area Chart

This area chart shows the temperature in San Francisco over a week, with time on the x-axis and temperature on the y-axis. The filled area beneath the curve is rendered in steelblue using an SVG path generated by d3.area with a curveBasis interpolation. Axes are created with d3.axisLeft and d3.axisBottom, and the data is loaded from a CSV file using d3.csv, with timestamps parsed as dates and temperatures as numbers.

Oct 1, 2018

Loading thumbnail…

Week Temperature SF Line Chart

The line chart displays one week of temperature readings in San Francisco, plotted over time from a CSV dataset. A smooth curve connects the data points, with temperature on the y-axis and time on the x-axis, using a steelblue path. The visualization is built with D3 v5, creating an SVG with time and linear scales, axis generators, and a basis curve for the line. The CSV is loaded asynchronously, parsed into date and numeric values, and rendered with labeled axes and a title.

Oct 1, 2018

Loading thumbnail…

Week Temperature SF Scatter Plot

This scatter plot shows temperature readings in San Francisco over a single week, with time on the x-axis and temperature on the y-axis, using orange circles to mark each observation. The visualization is rendered as an SVG using D3 v5, leveraging the `scaleTime` and `scaleLinear` functions to map data to axes, with grid lines and axis labels added via `axisBottom` and `axisLeft`. The data is loaded from a CSV file hosted on VizHub, where timestamps are parsed into `Date` objects and temperatures converted to numbers before being plotted.

Oct 1, 2018

Loading thumbnail…

Cars Scatter Plot

This scatter plot displays the relationship between horsepower and weight for a dataset of cars, with each orange, semi-transparent circle representing a single vehicle. The visualization uses D3 v5’s `scaleLinear`, `axisBottom`, and `axisLeft` to construct the axes, with gridlines, axis labels, and a title included. Data is loaded as CSV via `d3.csv` from a remote source and rendered as SVG circles positioned using `cx` and `cy` attributes. The code also applies margins and a custom inner plotting area.

Oct 1, 2018

Loading thumbnail…

Scatter Plot

This scatter plot displays the population of the top ten most populous countries, with each country represented as a circle positioned along a linear population axis and a categorical country axis. The data comes from the 2018 estimate in the United Nations World Population Prospects. Built with D3 v5, the visualization uses `d3.scaleLinear` and `d3.scalePoint` for axes, `d3.axisLeft` and `d3.axisBottom` for ticks, and SVG circles with a radius of 10 pixels. The code reads data from a CSV file, multiplies the population values by 1000, and renders the chart within an SVG canvas with custom margins and grid lines.

Oct 1, 2018

Loading thumbnail…

Making a bar chart

This example shows a horizontal bar chart ranking the ten most populous countries, with population values on the x-axis and country names on the y-axis. The code uses D3 v5’s `csv` loader to parse `data.csv`, then constructs the chart with `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom`. Bars are rendered as SVG `rect` elements, with dashed grid lines from a custom tick size and a formatted population axis using `format('.3s')`. Styling is applied via external CSS.

Oct 1, 2018