C

ceresfin

@ceresfin·22 public vizzes

Loading thumbnail…

Zoom Capability of Art Tree

This visualization presents a hierarchical tree of world regions and countries, arranged using the `d3.tree` layout and rendered as SVG. Users can pan and zoom the entire structure through the `d3.zoom` API, which updates a transform group. The hierarchy is loaded from a JSON file, with links drawn via `d3.linkHorizontal` path generators and text labels styled with font sizes that scale by node depth. The code relies on D3 v5 for DOM selection, data binding, and zoom event handling.

Loading thumbnail…

Choropleth Map w Interactive Filtering

This choropleth map displays global income groups, color-coded using a spectral scale and an interactive zoom projection built with D3’s geoNaturalEarth1 projection and geoPath. The map renders country boundaries from World Atlas TopoJSON and TSV data, with a custom legend generated by colorLegend.js. Users can pan and zoom via the zoom overlay, while hovering over a country highlights it in gray and reveals its name and income group in a tooltip. The visualization demonstrates SVG-based DOM manipulation and event handling through D3’s selection and event APIs.

Loading thumbnail…

Choropleth Map

This choropleth map depicts global income groups, coloring countries according to their income classification. Built with D3 v5 and TopoJSON, it loads world map data and country metadata, then projects it using a natural Earth projection with `d3.geoPath`. A color legend uses `scaleOrdinal` and `schemeSpectral` to map income groups to colors. The visualization supports zooming via `d3.zoom` and shows interactive hover states that display country names and income levels.

Loading thumbnail…

Color and Size Legends

This example demonstrates two interactive legends for mapping data to visual channels in D3 v5. A color legend uses `scaleOrdinal` to associate fruit names with distinct hues, while a size legend employs `scaleSqrt` to encode numeric values through circle radii. Both legends animate their tick marks using `transition().duration(3000)` as they enter or update. The code implements custom legend components through D3 selections and data joins, rendering SVG circles and text elements with configurable spacing and offsets.

Loading thumbnail…

Art Tree

An interactive tree visualization maps the hierarchical relationships among world regions and countries. The code loads data from `data.json` and uses the D3.js `tree` layout with a horizontal link generator to position nodes as text labels. Users can pan and zoom the entire diagram through D3's `zoom` behavior. Node text size scales inversely with depth, and the visualization is rendered as SVG with custom styling applied to the connecting paths.

Loading thumbnail…

World Countries Tree

This example shows the hierarchical structure of world countries arranged as a tree diagram, with each country nested under its region and subregion. The visualization uses D3.js v5’s `tree` layout and `hierarchy` function to compute node positions, while `linkHorizontal` generates the curved connector paths between parent and child nodes. The data is loaded asynchronously from a local JSON file via `d3.json`, and the final SVG is sized to fill the browser viewport, rendering all nodes and links without interactive features.

Loading thumbnail…

Blank Canvas

This example demonstrates fundamental DOM manipulation with D3.js by rendering an interactive smiley face whose eyebrows move. It shows how to select and modify SVG elements dynamically, creating a playful character that responds to browser dimensions. The code uses D3 v5's `select` and `arc` methods to construct shapes, with SVG attributes for width, height, and corner radius set programmatically. The visualization adapts to the full viewport size, with a fixed-position body and hidden overflow ensuring the canvas fills the entire screen.

Loading thumbnail…

Fork of Maps with Cheap Tricks for Interaction

A fork of the world-atlas map demonstrates pan-and-zoom interaction using d3.zoom, applied to an SVG group containing country paths rendered with d3.geoPath and a Natural Earth projection. The map loads TopoJSON world data and TSV country names, displaying light-green countries on a dark-blue sphere. Hovering highlights a country in red, while zooming transforms the entire group. This example uses d3 v5 and TopoJSON to combine fundamental data binding with cheap yet effective interaction techniques.

Loading thumbnail…

Maps

This example renders a world map using D3.js and TopoJSON, displaying countries as light green shapes against a dark blue spherical background. It uses d3.geoNaturalEarth1 for the projection and d3.geoPath to generate SVG paths from the world-atlas dataset. The code loads TopoJSON data, converts it to GeoJSON with topojson.feature, and appends country paths to an SVG container. The visualization demonstrates basic data binding and DOM manipulation while showing geographic features with minimal styling.

Loading thumbnail…

Fork of Fork of Fork of Bowl of fruit - with hover selection

A bowl of fruit shows apples and lemons as scaled circles that animate in and out as items are added or removed. Hovering over a fruit selects it, highlighting it with a black stroke. The example demonstrates data joins and transitions using d3.selectAll, selection.merge, and selection.exit, with d3.scaleOrdinal for color and radius mapping. Animated updates occur via transition.attr over one second, triggered by setTimeout calls that pop, replace, or filter the fruit array.

Loading thumbnail…

Fork of Fork of Bowl of fruit - with click events

A bowl of five apples animates through a sequence of changes: one fruit disappears, another transforms into a lemon, and a third is removed. Clicking any fruit selects it, highlighting its outline in black. The example demonstrates reusable data joins with `d3.selectAll`, `enter`/`merge`/`exit` selections, and ordinal scales for mapping fruit type to color and radius. Smooth transitions are applied via `transition().duration()`, animating circle position and radius over one second.

Loading thumbnail…

Fork of Bowl of fruit - with text

A dynamic bowl of fruit demonstrates data-driven DOM manipulation with D3.js v5. Animated circles representing apples and lemons scale and color-code according to fruit type, transitioning between states as fruits are added or removed over time. The code uses d3.scaleOrdinal for color and radius mapping, d3.selectAll with enter/merge/exit patterns, and d3.transition for smooth updates. Fruit data is generated in JavaScript and rendered as SVG groups containing circles and text labels.

Loading thumbnail…

Bowl of fruit

A bowl of five apples rendered as SVG circles uses D3's enter, merge, and exit selections to update the scene. Over time, apples disappear, one transforms into a lemon, and colors and radii shift via ordinal scales and smooth transitions. The animation runs through timed JavaScript calls, with data bound to random IDs for stable updates. D3 v5's selection methods and transition API drive the changes, replacing apples with lemons at fixed x-positions.

Loading thumbnail…

Apples & Lemons

This area chart titled "World Population" displays population growth over time, with data points overlaid as circles. The visualization uses D3.js version 5, employing `scaleTime` and `scaleLinear` for axes, an `area` generator with `curveBasis` for the shaded region, and `axisBottom`/`axisLeft` for ticks. Data comes from a CSV file of yearly world population figures. The SVG rendering applies a maroon fill with a steelblue stroke for the area path.

Loading thumbnail…

population area chart

This visualization displays global population trends over time, combining a filled area chart with overlaid points to highlight yearly values. The chart uses a time-scaled x-axis and a linear y-axis, with the area rendered using d3.area and curveBasis for smooth transitions. Data comes from a CSV file of world population by year, loaded via d3.csv, and rendered as SVG using d3.scaleTime, d3.scaleLinear, and axis functions. The title and axis labels clarify the chart’s purpose.

Loading thumbnail…

Fork of Area Chart

This area chart visualizes temperature over time for San Francisco, using a smooth curve to show the trend with overlaid scatter points. The visualization loads CSV data via `d3.csv` and renders using D3 v5's `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft`. The `d3.area` generator with `curveBasis` creates the filled path, while individual temperature readings appear as semi-transparent circles. The SVG output includes labeled axes, a title, and gridlines, with styling applied via CSS classes.

Loading thumbnail…

Tempurature

This visualization shows temperature over time in San Francisco, plotting timestamp values on the x-axis and temperature readings on the y-axis. A smooth basis curve connects the data points, with semi-transparent circles marking individual measurements. The chart uses D3’s `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to build the axes and grid, while `curveBasis` generates the line path. Data is loaded from a CSV file via `csv()`, and rendered as SVG with styled axis labels and gridlines.

Loading thumbnail…

Scatter Plot

This scatter plot visualizes the relationship between horsepower and weight for cars, with each circle representing a vehicle. The chart uses D3 v5’s `scaleLinear` and `extent` to map data values to pixel coordinates, while `axisBottom` and `axisLeft` render labeled axes with tick marks. Data comes from a CSV file loaded via `csv`, and the SVG rendering applies a steelblue fill with opacity to the circles. The visualization includes a title, axis labels, and a margin-based layout to position the plot area.

Loading thumbnail…

Making a Bar charg

This example displays a horizontal bar chart of the ten most populous countries, using data from a CSV file where population values are multiplied by 1000. D3.js v5 scales and positions the bars with `scaleLinear` and `scaleBand`, while `axisBottom` and `axisLeft` render the axes. The chart uses an SVG canvas, with formatting that abbreviates large numbers and a title labeling the visualization.

Loading thumbnail…

Fork of Bar Chart + Axis customisation

This example presents a horizontal bar chart of population data for ten countries, drawn from a CSV file. It uses D3 v6 APIs including `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to position bars and axes. Custom axis formatting converts large numbers into abbreviated labels like "B" for billions, and the chart includes styled titles and labels. The bars render as SVG rectangles filled with a linear gradient, while tick text uses a separate gradient for visual distinction. The chart also removes default axis domain lines and tick marks.

Loading thumbnail…

Fork of Stylized Bar Chart

This bar chart displays the population of the top 10 most populous countries using React and D3 v5, rendering as SVG. It uses `d3.scaleBand` for the vertical axis and `d3.scaleLinear` for the horizontal axis, with data from the United Nations World Population Prospects 2019. The chart includes formatted axis ticks and tooltips, styled with the Poppins font and a teal color scheme.

Loading thumbnail…

Making a face

This example shows a single circle positioned on an SVG canvas, its center placed at coordinates (200, 100) with a radius of 200 pixels. The code uses D3 v6’s `select` method to grab the SVG element, then appends a circle and sets its visual attributes with `attr`. The visualization demonstrates the fundamental D3 pattern of chaining selections and attribute assignments to generate SVG shapes.