antoinecarto

@antoinecarto·9 public vizzes

Responding to Resize

This example shows a single SVG that dynamically redraws a large green X to fit the full browser window whenever the viewport changes. It uses plain JavaScript to listen for the window’s resize event, then reads the container’s clientWidth and clientHeight to update the SVG’s width and height attributes. A D3 v5 data join binds two line objects to render the diagonal strokes, merging enter and update selections to adjust coordinates. The chart fills the page via fixed CSS positioning, and no external data source is used.

Jul 11, 2019

Loading thumbnail…

Let's make a Map with D3.js!

This example demonstrates how to build a map visualization using D3.js, rendering geographic data as SVG shapes within a 960×500 viewport. The code initializes an SVG canvas and prepares it for map plotting, likely displaying projected geographical boundaries or regions. It relies on D3 v5, imported via the `select` and `arc` functions from the `d3` module, though the actual geographic path drawing with `d3.geoPath` is not yet implemented in the visible source. The visualization uses a minimal stylesheet with hidden overflow, suggesting a clean, full-bleed map display without surrounding page elements.

Jul 5, 2019

Loading thumbnail…

Temperature in San Francisco

This scatterplot displays the relationship between horsepower and weight for cars, with each red semi-transparent circle representing a vehicle. The visualization uses d3.scaleLinear for both axes, d3.axisBottom and d3.axisLeft for ticks, and d3.extent to compute the domains. Data is loaded from a CSV file using d3.csv, and the SVG rendering includes styled gridlines, axis labels, and a title. The code parses numeric fields before rendering the 960x500 chart.

Jul 5, 2019

Loading thumbnail…

Scaterplot

This scatterplot shows the population of the top 10 most populous countries, using a linear scale for population and a point scale for country names from United Nations 2018 estimates. The chart uses D3 v5 APIs including `scaleLinear`, `scalePoint`, `axisLeft`, and `axisBottom` to render an SVG visualization with custom tick formatting that converts large numbers to abbreviations. Gridlines extend from both axes, and circles are positioned using the scales with a fixed radius, while axes are customized by removing domain paths and styling tick elements via CSS.

Jul 5, 2019

Loading thumbnail…

Customizing Axis

A horizontal bar chart displays the populations of the ten most populous countries, using a CSV data source. The D3 v5 code loads the data and builds the visualization with an SVG canvas, applying a linear scale to the population axis and a band scale for country names. The chart customizes both axes by removing their domain lines, applying a custom tick format that abbreviates large numbers with 'B' for billions, and adding styled labels. The y-axis labels and tick lines are removed entirely, while the x-axis includes negative tick lines extending across the plot area.

Jul 4, 2019

Loading thumbnail…

Making a bar chart

This bar chart displays the population of the ten most populous countries, with horizontal bars ordered by country name. The visualization encodes population values through bar length, using a linear scale for the x-axis. The chart is built with D3 v5, leveraging `select`, `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` APIs. Data is loaded from a local CSV file, and the chart is rendered as SVG within an HTML page, with bars styled via CSS.

Jul 4, 2019

Loading thumbnail…

D3

A smiling face is drawn in yellow with black outlines, featuring two eyes, animated eyebrows that move up and down, and a curved mouth. The animation is built with D3 v5 transitions, where the eyebrow group’s transform attribute is tweened over two seconds to shift vertically, then returns. The SVG is centered using a translated `<g>` element, and the mouth’s arc path is generated with the `d3.arc()` helper, while circles and rectangles define the other facial features.

Jul 4, 2019

Loading thumbnail…

let's make a face with d3.js

This example constructs a face using a node-link diagram generated with the D3.js library’s force-directed layout. Each facial feature, such as eyes, nose, and mouth, is formed by a distinct set of circles (nodes) connected by links, with their positions determined by a physical simulation. The SVG rendering uses `d3.forceSimulation` to iteratively solve for node placement, creating a recognizable face from the structured network. The code is a minimal HTML page with an empty SVG canvas and embedded JavaScript that defines the graph structure and applies the force algorithm.

Jul 4, 2019

Loading thumbnail…

Untitled

This example presents a geographic visualization built on the v3 dataset and authored by antoinecarto. It plots spatial elements using the D3.js library, specifically leveraging `d3.geoPath` to render map boundaries and shapes. The rendering occurs on an HTML5 Canvas, with the code in `index.html` and `styles.css` defining the layout and appearance. The visualization appears to derive its geographic coordinates from the provided source data, and the interactive behavior is minimal, focusing primarily on static map display.

Jul 4, 2019