P

pkcesar

@pkcesar·18 public vizzes

Loading thumbnail…

Colour and Size Legends

This example demonstrates two types of map legends rendered as SVG. A color legend for an ordinal scale shows four fruit categories with distinct colors, while a size legend for a square-root scale displays five circular symbols whose radii encode numeric values. The code builds reusable legend components using D3 v5 selection methods, including `selectAll`, `enter`, and `merge`, with scales from `scaleOrdinal` and `scaleSqrt`. Both legends are positioned manually via `translate` and styled with CSS classes.

Loading thumbnail…

World Countries Tree

This visualization displays the hierarchical structure of world countries, organized by continent and subregion. The data is presented as a horizontal tree layout with curved link paths connecting parent nodes to their children. Built with D3 v5, the code uses `d3.tree` and `d3.hierarchy` to compute the layout, `d3.linkHorizontal` for the paths, and `d3.zoom` for panning and scaling. Country names are rendered as text labels with sizes that decrease at deeper hierarchy levels.

Loading thumbnail…

Cheap tricks for Interaction

This example demonstrates a world map with smooth zoom and pan interaction, achieved using D3 v5’s `zoom` behavior. Hovering over countries highlights them in red, while the base map renders with a blue sphere outline and a green country fill. The visualization uses `d3.geoNaturalEarth1` for the projection and `d3.geoPath` to draw geometries from TopoJSON world-atlas data, with country names loaded from a TSV file and attached as `title` tooltips. The zoom transform is applied to a group element containing all map paths.

Loading thumbnail…

Let's make a map with D3.js

This example displays a world map rendered as an SVG using a Natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`. It draws countries in green with black strokes atop a blue sphere outline. The map loads TopoJSON data from the world-atlas package, converting it to GeoJSON with `feature` from the TopoJSON library. The visualization highlights the simplicity of projecting geographic data into an interactive-free static SVG using D3 v5.

Loading thumbnail…

Bowl of fruit - Hover to select

Five pieces of fruit sit in a rendered bowl, and hovering over an apple or lemon highlights it with a black outline while clearing the selection on mouseout. The example uses D3 v5’s data join and scaleOrdinal for color and radius, with SVG circles and text. Animated updates over time remove and replace fruit, demonstrating enter, update, and exit transitions.

Loading thumbnail…

Bowl of fruit - Click to select

A bowl of fruit displays colored circles representing apples and lemons, with an animated sequence of removals and a type change. Clicking a fruit selects it by adding a black stroke. The visualization uses d3.scaleOrdinal for color and radius mappings, builds groups with circles and text labels, and updates incrementally via setTimeout. The SVG rendering is generated through d3.select and d3.range, with event handling via `.on('click')`.

Loading thumbnail…

Bowl of fruit - General Update Pattern (Nested)

This example demonstrates the general update pattern with nested selections in D3 v5, showing a row of fruit that changes over time as apples are eaten and replaced by lemons. The visualization uses a static SVG bowl rendered from a rect, while fruit groups are bound to array data and updated through enter, merge, and exit selections. The code applies ordinal scales for color and radius to distinguish apple and lemon types, and employs d3.select, scaleOrdinal, and selection methods to manage the transitions.

Loading thumbnail…

Bowl of fruit - General Update Pattern

The visualization shows a changing bowl of fruit as apples are eaten and one apple becomes a lemon, using the d3.js general update pattern to animate the enter, update, and exit states. It renders circles as SVG elements, with color and radius scales mapping fruit type to visual properties via `scaleOrdinal`. The code employs `transition().duration()` for smooth animations and `merge()` to combine entering and updating elements, while `exit()` shrinks removed fruits.

Loading thumbnail…

World population area chart

This area chart depicts the growth of world population over time, using data from a CSV file that records population values by year. The chart renders as an SVG with a filled area beneath a curve, with axes labeled “Year” and “Population.” It uses d3.csv to load data, d3.scaleTime and d3.scaleLinear for scales, and d3.area with curveBasis to generate the curved path, while d3.axisBottom and d3.axisLeft create the gridlines and tick labels.

Loading thumbnail…

Temperature in San Francisco Area Chart

This area chart visualizes one week of temperature data in San Francisco, sourced from Data Canvas - Sense Your City. The chart uses a filled, smoothed curve to show temperature changes over time, with labeled axes for time and temperature. It loads data from a CSV file using the `csv` function, then employs `scaleTime` and `scaleLinear` for the axes, and `area` with `curveBasis` to generate the smooth filled path. SVG rendering displays the chart, styled via an external CSS file.

Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart displays one week of temperature data in San Francisco, sourced from Data Canvas - Sense Your City. The visualization uses d3.csv to load the data and d3.scaleTime, d3.scaleLinear, d3.line with curveBasis, and d3.axisBottom/axisLeft to render an SVG line path with labeled axes and grid lines. The title "A Week in San Francisco" appears above the chart, with maroon strokes marking temperature trends over time.

Loading thumbnail…

Temperature in San Francisco

This scatter plot visualizes one week of temperature data in San Francisco, using circles positioned by timestamp on the x-axis and temperature on the y-axis. The chart includes labeled axes, a title, and a grid-like background created through tick lines. The visualization is built with D3 v5, using `d3.csv` to load data, `d3.scaleTime` and `d3.scaleLinear` for scales, and `d3.axisBottom` and `d3.axisLeft` to render the axes as SVG elements. Data originates from the Data Canvas - Sense Your City project.

Loading thumbnail…

Cars Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Auto MPG dataset. Using d3.v5, the code applies linear scales, axis components, and SVG circles with red fill and opacity to render each data point. The chart includes labeled axes, a title, and gridlines created through tick sizing. Data is loaded via d3.csv and parsed before rendering.

Loading thumbnail…

Customizaing axis

This bar chart displays the population of the top 10 most populous countries, using data from World Population Prospects 201. It shows population values on a linear x-axis with abbreviated tick labels (e.g., “B” for billions) and country names on a categorical y-axis. Built with D3 v5, the visualization uses `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft` to render the chart as SVG, with gridlines and custom axis title formatting applied through the `format` API.

Loading thumbnail…

Making a bar chart

This horizontal bar chart displays the population of the top 10 most populous countries, using steelblue rectangles to encode each country’s population value. The chart is rendered as an SVG element using D3 v5, reading population data from a CSV file and scaling the bar lengths with a linear scale for the x-axis and a band scale for country labels on the y-axis. The code employs D3’s `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` functions to construct the axes, with data loaded via D3’s `csv` method.

Loading thumbnail…

Let's make a face with D3.js

A smiling face built from SVG shapes animates in D3.js v5. A yellow circle forms the head, with eyes, animated eyebrows that move up and down via chained `transition` calls, and a mouth drawn as an arc path using `d3.arc()`. The code positions elements within a group translated to the canvas center, using fixed pixel dimensions for features.

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates basic geometric shapes rendered as SVG elements, including circles, rectangles, lines, and paths, with styling applied through CSS. The visualization uses SVG's native `circle`, `rect`, `line`, and `path` tags within a `<g>` group, leveraging the `transform` attribute for scaling and translation. The CSS stylesheet applies stroke properties to a `.lines` class, setting the line color, width, and path join style, while the SVG `fill` and `stroke` attributes control shape colors directly.

Loading thumbnail…

HTML Cars Report

This example displays a simple cars report as a bulleted list of three vehicle entries, each showing the year, make, model, and price. The HTML page includes a heading and list, with one entry highlighted in red via a CSS class. It uses plain HTML elements (`<h1>`, `<ul>`, `<li>`) and external CSS for styling, which sets a monospace font and large text size. The data is hardcoded directly in the markup, demonstrating a static, unstyled-by-JavaScript report structure.