Xenos Panagiotis

@xenospan·10 public vizzes

Choropleth Map

This choropleth map uses a color scale to depict the economy classification of each country from the world-atlas dataset. The visualization includes a color legend built with custom SVG shapes, and it supports interactive pan and zoom through event handling. The implementation relies on D3’s geoPath and geoNaturalEarth1 projection for map geometry, and uses scaleOrdinal with schemeSpectral for categorical coloring. Country data is loaded from TopoJSON and TSV files, with paths rendered as SVG elements that display the country name and economy type on hover.

Jun 7, 2023

Loading thumbnail…

Customizing Axes

This example shows the ten most populous countries as a horizontal bar chart, with each bar colored according to a value in the data and labeled with country names on the left axis. The x-axis is customized to display population values in abbreviated form (e.g., "1.42B") using D3’s `format` function, while grid lines extend across the chart. The code loads a CSV file, scales the data with `scaleLinear` and `scaleBand`, and renders axes with `axisLeft` and `axisBottom`.

May 17, 2023

Loading thumbnail…

Fork of Let's make a face with D3.js!

This example uses D3.js to render a world map with dynamic geographic projections. It displays country boundaries from the World Atlas TopoJSON dataset, styled as light green polygons with dark blue oceans on an SVG canvas. The code creates four different projections—Natural Earth, Mercator, Orthographic, and Bottomley—using `d3.geoNaturalEarth1`, `d3.geoMercator`, `d3.geoOrthographic`, and `d3.geoBottomley`, then applies `d3.geoPath` to draw the shapes. While the title references a smiley face, the actual visualization only shows the map, loading data asynchronously via `d3.json`.

May 25, 2022

Loading thumbnail…

2) Fork of Let's make a map with D3.js!

This example visualizes a world map using a natural Earth projection, rendering continents as green countries with black outlines against a blue sphere background. It employs D3.js with the `geoNaturalEarth1` projection and `geoPath` to generate geographic shapes, while the TopoJSON library’s `feature` function converts the world-atlas GeoJSON data from unpkg into plottable features. The SVG canvas also demonstrates alternative projections—Mercator and orthographic—defined but not applied to the final output. The map highlights basic choropleth styling through CSS classes for the sphere and country paths.

May 25, 2022

Loading thumbnail…

1) Let's make a map with D3.js!

An empty SVG map canvas is set up with D3.js, awaiting geographic data to be drawn. The code imports the `select` function from D3 and reads the SVG’s width and height attributes to prepare for rendering. Using `d3.geoPath` and SVG elements, this example demonstrates the foundational steps for creating a map visualization, though no map data or path generation is currently implemented. The HTML loads D3 v5 from a CDN and links to a separate bundle script.

May 25, 2022

Loading thumbnail…

Cheap Tricks for Interaction

This example demonstrates how to enhance a natural Earth projection map with basic interactive affordances. Users can pan and zoom the world map, and hovering over any country highlights it in red. The map renders geographic data from the World Atlas TopoJSON and TSV datasets using `d3.geoNaturalEarth1`, `d3.geoPath`, and `d3.zoom`. Country names are joined from the TSV file and displayed as SVG `<title>` tooltips. Styling relies on CSS hover effects while the zoom behavior applies SVG group transformations.

Jun 3, 2021

Loading thumbnail…

Fork of Let's make a face with D3.js!

A smiley face drawn with SVG elements demonstrates fundamental DOM manipulation and animation with D3.js v5. The face features a yellow circle, two eyes, and a mouth created using the `arc` generator, while the eyebrows animate upward and downward via chained `transition` calls. The code uses `select` and `append` to build the SVG structure, and CSS hover and active states change the face's fill color. The example focuses on showing how D3 can construct and transform visual elements through data-independent selection methods.

Jun 3, 2021

Loading thumbnail…

Hierarchical Bar Chart

This visualization shows a hierarchical bar chart using the Flare data, where users can click blue bars to drill down into subcategories or click the background to navigate back up. The chart renders with SVG and uses animations to smoothly transition between hierarchy levels. The implementation relies on the D3.js library, specifically using the `d3.create` method for SVG creation, `transition` for sequenced animations, and `xAxis` and `yAxis` for scale updates. Bars are colored to distinguish parent nodes from leaf nodes, with fill opacity fading during transitions.

May 21, 2020

Loading thumbnail…

Let's make a map with D3.js!

This example shows how to create a world map using D3.js and TopoJSON, displaying countries as light green shapes on a blue sphere. The code loads world atlas data from the `world-atlas` package, converts TopoJSON features into GeoJSON using `topojson.feature`, and renders them with `d3.geoPath` and a `d3.geoNaturalEarth1` projection. Countries change color to green on hover, and the SVG includes a styled sphere background.

May 21, 2020

Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart visualizes daily temperature fluctuations in San Francisco over a week, with time on the x-axis and temperature on the y-axis. The SVG rendering uses d3.scaleTime and d3.scaleLinear for axes, d3.line with curveBasis for the smoothed path, and d3.axisBottom/axisLeft for gridlines. Data is loaded as CSV from a remote URL, parsed with timestamps converted to Date objects, and dimensions are derived from SVG attributes. Axis labels and a title are positioned using margins.

May 21, 2020