C

Clara Hu

@Clarararaara·18 public vizzes

Loading thumbnail…

Color and size legends

A vertical color legend displays four fruit categories—apple, lemon, lime, and orange—as colored circles, with each fruit’s name placed to the right. The legend is generated using D3 v5’s `scaleOrdinal` for color mapping and a custom `colorLegend` function that binds data to SVG groups, appending circles and text elements with computed spacing and offsets. All shapes are rendered as SVG elements within a 960×500 viewport, with styling defined in an external CSS file.

Loading thumbnail…

Choropleth Map with Interactive Filtering

This choropleth map colors countries by economic classification using a spectral color scale, with an interactive legend that filters map regions by clicking legend items. The visualization combines a world map rendered with d3.geoPath and d3.geoNaturalEarth1, a colorLegend with clickable circles, and d3.zoom for panning and zooming. Country data comes from the world-atlas TopoJSON and TSV datasets, with hover highlighting and tooltips showing country names and values.

Loading thumbnail…

Choropleth Map

This choropleth map colors countries by income group using an ordinal color scale with the spectral scheme. It renders geographic boundaries with d3.geoPath and a Natural Earth projection, using TopoJSON data from the world-atlas package. Hovering highlights countries in red, while a legend built with custom D3 code displays the color categories. The map supports zooming and panning through d3.zoom, and tooltips show each country’s name and income group.

Loading thumbnail…

Blank Canvas

A blank SVG canvas is filled with a single gray rectangle that spans the full width and height of the viewport, creating a minimalist visual effect. The example demonstrates the basic structure of a D3.js v5 project, using `d3.select` to access the SVG element and `svg.append` to add a `rect` element. The rectangle’s width is set twice in the code, while its height remains unspecified, leaving the shape incomplete. This serves as a starting point for understanding SVG rendering with D3’s declarative API.

Loading thumbnail…

Cheap Tricks for interaction

This example demonstrates a zoomable, hover-highlighted world map using D3 v5. It renders country boundaries and a blue sphere backdrop via `d3.geoPath` with a Natural Earth projection, pulling geometry from the world-atlas TopoJSON dataset. The visualization supports interactive pan and zoom through `d3.zoom`, applying transforms to an SVG group, and changes country fill to red on hover via CSS. Country names are joined from a TSV file using ISO numeric IDs.

Loading thumbnail…

Let's make a map with D3.js

This example shows a world map rendered as an SVG, with countries filled in light green and oceans in blue. It uses D3.js version 5 and the `d3.geoPath` API with a Natural Earth projection to generate the map geometry. Geographic data comes from the world-atlas package, loaded via `d3.json`. The code also includes a sphere outline for the globe and uses the topojson library’s `feature` function to convert the raw data into usable features.

Loading thumbnail…

Fork of Bowl of Fruit - Click to select

This example demonstrates a dynamic fruit bowl visualization where apples and lemons are added, removed, and recolored over time. It shows how D3’s data join pattern, using `selection.data` with a key function on `id`, updates circle elements with smooth transitions via `transition().duration(1000)`. The code uses `d3.scaleOrdinal` for color and radius mapping, and `d3.range` to generate initial fruit data. Each fruit’s position is calculated by its index, with apples rendered larger and red, lemons smaller and yellow, all rendered as SVG circles in a 960x500 canvas.

Loading thumbnail…

Fork of Car Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars in the Auto MPG dataset from the UCI Machine Learning Repository. Red semi-transparent circles represent individual cars, with axes labeled and gridlines rendered via d3.axisBottom and d3.axisLeft. The code uses d3.scaleLinear for both axes, d3.extent to compute domains, and d3.csv to load the remote dataset, converting string values with parseInt before rendering the SVG.

Loading thumbnail…

Car Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository’s Auto MPG dataset. Each red circle represents a vehicle, positioned by its horsepower on the x-axis and weight on the y-axis. The visualization uses D3 v5 with SVG rendering, employing `d3.scaleLinear` for axes and `d3.axisBottom` and `d3.axisLeft` for tick marks. Axes labels and a title are added as SVG text elements, with grid lines created from axis ticks.

Loading thumbnail…

Scatter Plot

This scatter plot displays the population of the top 10 most populous countries, with each circle positioned along a linear x-axis for population values and a point scale on the y-axis for country names. The visualization uses d3.csv to load data, d3.scaleLinear and d3.scalePoint for positioning, and d3.axisBottom with a custom tick formatter to display population in billions. Grid lines extend across the plot, circles are rendered in steelblue via SVG, and a title clarifies the chart’s purpose.

Loading thumbnail…

Fork of Choropleth Map with Interactive Filtering

This interactive choropleth map displays the world’s countries colored by their economic classification, with a color legend that filters the map when clicked. Clicking a legend value highlights corresponding countries and dims all others; clicking again clears the filter. Hovering a country reveals its name and value in a tooltip. Built with D3 v5, it uses `d3.geoNaturalEarth1` for projection, `d3.geoPath` to render country paths, and a custom `colorLegend` module for the clickable legend. Data comes from the world-atlas TopoJSON and TSV files, rendered as SVG.

Loading thumbnail…

Fork of Choropleth Map

This choropleth map colors countries by economy using world-atlas TopoJSON data. The visualization uses d3.geoNaturalEarth1 projection with d3.geoPath to render the map, and d3.scaleOrdinal with schemeSpectral for color encoding. The color legend, built with a custom colorLegend function, displays the ordinal scale. Interactive pan and zoom is implemented via d3.zoom, and hovering highlights countries in red.

Loading thumbnail…

Customizing Axes

This example displays a horizontal bar chart of the top 10 most populous countries, with population values on the x-axis and country names on the y-axis. The chart uses custom tick formatting to abbreviate large numbers (e.g., converting billions to "B") and removes axis domains and tick lines, replacing them with subtle gridlines. Rendered as SVG, the visualization is built with D3 v5, using `d3.scaleLinear`, `d3.scaleBand`, `d3.axisBottom`, `d3.axisLeft`, and `d3.format`. Data is loaded from a CSV file and parsed into numeric population values.

Loading thumbnail…

Making a Bar Chart

This bar chart displays the population of the top 10 most populous countries, based on 2018 estimates from the UN World Population Prospects. The visualization uses D3 v5 with SVG rendering, employing `d3.scaleLinear` for the x-axis and `d3.scaleBand` for categorical y-axis placement. After loading the data with `d3.csv`, population values are parsed from strings to numbers. The code appends rectangles to represent each bar, and adds axes using `d3.axisLeft` and `d3.axisBottom`, with styling applied via CSS.

Loading thumbnail…

Let's make a face with D3.js

A yellow circle with black outlines forms a smiling face, featuring two black eyes and rectangular eyebrows that animate upward and then return to their original position. The face is constructed with D3.js v5 using SVG elements, including circles for the face and eyes, rectangles for the eyebrows, and a path generated with the d3.arc() API for the mouth. The eyebrows transition via chained transition().duration() calls on a group element, which shifts their vertical offset by 50 pixels over two seconds before resetting.

Loading thumbnail…

Fork of Stylized Bar Chart

This bar chart visualizes the top 10 most populous countries using data from the United Nations World Population Prospects 2019. It uses React with D3 v5 to construct the SVG, with `scaleBand` for the categorical y-axis and `scaleLinear` for the numerical x-axis. The chart renders horizontal bars with a teal fill, Poppins font, and custom axes from `AxisBottom` and `AxisLeft`, with CSV data fetched via D3's `csv` helper. A tooltip displays the formatted population value using D3's `format` function.

Loading thumbnail…

Let's Make a Face Part I

This example shows a static smiley face made from three yellow circles with black outlines, all rendered inside an SVG canvas. The face is drawn using React elements, with two smaller circles representing eyes and a large circle serving as the head. The code uses React 16.7.0 and displays the face directly in the HTML, with no interactive behavior or data-driven updates. The title references a potential series, but the visualization itself is purely visual.

Loading thumbnail…

Fork of Smiley face part 1

A yellow circle with black outline and two filled black eyes forms a partial smiley face on an SVG canvas. The code uses React to render the SVG elements, while D3's `arc` API generates the mouth path with a specified inner radius and angle range. The face is centered within a 960 by 500 viewport, with the eyes positioned symmetrically from the center. All shapes are drawn using SVG primitives like `circle` and `path`, relying on D3 for the mouth's arc geometry.