C

chaimmaeee

@chaimmaeee·33 public vizzes

Loading thumbnail…

Interactive barChart TRYING NEW TRANSITIONS

This interactive bar chart visualizes the number of Park and Ride (P+R) parking spaces across Randstad cities, with data fetched from a GitHub-hosted JSON file. A checkbox toggles between individual city entries and combined capacities for double-listed cities, updating the visualization. Built with D3 v6, the chart uses `scaleBand` and `scaleLinear` for axes, and `axisBottom`/`axisLeft` for ticks. Bars animate from zero height to their final values via `.transition().duration()`, and the x-axis labels rotate 50 degrees for readability.

Loading thumbnail…

Making a Bar Chart

This bar chart displays the biomass energy production in megawatts for five North African countries, with Algeria leading and Libya at zero. The visualization uses D3 v5 with `scaleLinear` for the x-axis and `scaleBand` for the categorical y-axis, rendering SVG rectangles. Customized axes via `axisBottom` and `axisLeft` include formatted tick labels using `format('.3s')` and a titled chart. Data comes from local CSV file `data.csv`, which reports 2018 estimates.

Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates how to create a world map using D3.js, displaying a blue sphere with a natural Earth projection and a green landmass rendered as SVG paths. The visualization uses `d3.geoPath` with a `d3.geoNaturalEarth1` projection to draw the sphere outline, while TopoJSON data is loaded from an external URL using `d3.json` and processed with TopoJSON’s `feature` method. The code imports specific D3 modules like `select`, `json`, `geoPath`, and `geoNaturalEarth1`, and styles the sphere and country paths via CSS classes.

Loading thumbnail…

Let's make a map with D3.js!

This example displays an orthographic map of the world, rendered as green SVG paths with black outlines on a blue background. It loads geographic data from a remote JSON file and projects it using `d3.geoOrthographic` and `d3.geoPath`, while `topojson.feature` converts the TopoJSON input into GeoJSON features. The map is static, with no interaction or animation, and serves as a simple demonstration of generating a globe-like projection with D3.js v5.

Loading thumbnail…

Let's make a map with D3.js!

This visualization presents a map of geographic regions, with each area rendered as a solid green path outlined in black. The map is drawn using SVG paths generated from GeoJSON data, which is loaded from an external URL. The code employs D3.js version 5 functions such as `d3.json` to fetch the data and `d3.geoPath` to construct the path geometries, while the TopoJSON library's `feature` function is used to process the geographic features. The resulting paths are appended to the SVG canvas with a fixed width and height, and CSS styles define the fill and stroke colors.

Loading thumbnail…

Let's make a map with D3.js!

This example generates an orthographic map of world features from a JSON dataset, rendering each geographic feature as a green SVG path with black stroke outlines. The code uses D3.js version 5’s `geoPath` and `geoOrthographic` projections, along with the topojson library’s `feature` function to convert the remote GeoJSON data into drawable paths. The map is displayed in a 900-by-500 pixel SVG element, with the projection offering a globe-like perspective.

Loading thumbnail…

Let's make a map with D3.js!

This example renders a world map using D3.js, loading GeoJSON country data from a remote URL and projecting it with the `geoArmadilloRaw` projection from `d3-geo-projection`. The map displays countries as green SVG paths with black strokes, generated through `d3.geoPath`. It imports `select`, `json`, and `geoPath` from D3, and uses TopoJSON’s `feature` utility to convert the data. The visualization is static, with no interaction, and the CSS sets a blue background.

Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates how to create a map visualization using D3.js, rendering geographical features as green shapes with black strokes on a blue background. It showcases a basic choropleth-style map by loading GeoJSON data from an external URL and projecting it using the `geoAlbers` projection. The code employs `d3.json` to fetch the data and `d3.geoPath` with the projection to generate SVG paths for each feature, while `topojson.feature` converts the data into GeoJSON format. The visualization is rendered entirely as SVG within an HTML page, making it a simple, self-contained map example.

Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates how to build a map visualization using D3.js, displaying geographic features as green polygons with black outlines on a blue background. It loads GeoJSON data from a remote URL and renders it as SVG paths using the `geoPath` generator with the `geoAiryRaw` projection from d3-geo-projection. The code relies on `d3.json` for data loading and topojson’s `feature` conversion, with all styling defined in external CSS.

Loading thumbnail…

Let's make a map with D3.js!

This example shows a simple world map rendered with D3.js, displaying geographic features as green filled paths with black borders against a blue background. The visualization loads GeoJSON data from a remote GitHub URL using `json()` and applies `geoPath()` from the d3-geo module to generate the SVG path data. With topojson-client’s `feature()` method, the code binds the geographic features to `path` elements in an SVG canvas via `selectAll()`. The map is static, with styling defined in CSS, and serves as a basic introduction to mapping with D3 v5.

Loading thumbnail…

Let's make a map with D3.js!

This example shows a world map rendered as green SVG paths with black borders on a blue background. It uses D3.js v5 to load GeoJSON data from a GitHub repository and project it with a Natural Earth projection. The map is drawn by applying `d3.geoPath` with `geoNaturalEarth1` to each feature, while TopoJSON's `feature` function prepares the data. Styling is handled via CSS, and the visualization updates automatically once the remote data loads.

Loading thumbnail…

Let's make a map with D3.js!

This example shows how to create a world map using D3.js, rendering geographic features as SVG paths. It loads TopoJSON data from a remote URL and converts it to GeoJSON using the `feature` function from Topojson. The map uses a `geoNaturalEarth1` projection with a `geoPath` generator to draw each country boundary. The code imports specific D3 modules such as `select`, `json`, and `geoPath`, and appends path elements to an SVG canvas with a width of 960 and height of 500.

Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates how to build a world map using D3.js, rendering geographic features as SVG paths with a natural Earth projection. The visualization loads geographic data from an external JSON file and uses the TopoJSON library to parse it before drawing each country or region. D3’s `geoNaturalEarth1` projection defines the map’s perspective, while `geoPath` projects the coordinates onto the screen. The code relies on D3 v5’s `json` method to fetch the data and uses `.enter()` to append the paths, offering a straightforward template for creating choropleth or point-based maps.

Loading thumbnail…

Let's make a map with D3.js!

This example displays a geographic map using D3.js and TopoJSON. It shows country boundaries projected with the Natural Earth projection. The map is rendered as SVG paths generated from a GeoJSON dataset loaded from an external URL. The code uses `d3.geoPath()` to generate the path data and `d3.geoNaturalEarth1()` for the projection, with the TopoJSON library converting the input data into geographic features.

Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates how to create a simple world map using D3.js v5 and TopoJSON. It loads geographic data from a remote JSON file and renders each country as an SVG path using `d3.geoMercator` for the projection and `d3.geoPath` to generate the path data. The map is drawn onto a static SVG canvas with no interaction or animation. The code relies on the `json` function from D3’s fetch module and the `feature` method from TopoJSON to convert the raw data into GeoJSON features.

Loading thumbnail…

Let's make a map with D3.js!

This example displays a choropleth map of geographic features rendered as SVG paths. It uses D3.js v5 to load the GeoJSON data, apply a Mercator projection with `d3.geoMercator`, and generate the path data via `d3.geoPath`. The TopoJSON library converts the datasource into GeoJSON features using `feature()`, while `d3.json` fetches the remote file before appending each path to the SVG canvas.

Loading thumbnail…

Let's make a map with D3.js!

This example displays a geographic map using D3.js and TopoJSON. It shows country boundaries projected with the Natural Earth projection. The map is rendered as SVG paths generated from a GeoJSON dataset loaded from an external URL. The code uses `d3.geoPath()` to generate the path data and `d3.geoNaturalEarth1()` for the projection, with the TopoJSON library converting the input data into geographic features.

Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates how to create a world map using D3.js version 5 and the TopoJSON library. It loads geographic data from a remote JSON file and renders country boundaries as SVG paths using the `geoNaturalEarth1` projection and `geoPath` API. The visualization shows the map at a fixed 200 by 200 pixel size with no interactivity or styling beyond the default path rendering.

Loading thumbnail…

Let's make a map with D3.js!

This example displays a geographic map using D3.js and TopoJSON. It shows country boundaries projected with the Natural Earth projection. The map is rendered as SVG paths generated from a GeoJSON dataset loaded from an external URL. The code uses `d3.geoPath()` to generate the path data and `d3.geoNaturalEarth1()` for the projection, with the TopoJSON library converting the input data into geographic features.

Loading thumbnail…

Let's make a map with D3.js!

This example shows a simple world map rendered in an SVG element using the Natural Earth projection. It loads geographic data from a remote JSON file and draws countries as light green paths with subtle black strokes. The code uses D3 v5’s `geoNaturalEarth1`, `geoPath`, and `json`, along with TopoJSON’s `feature` to extract the geographic features. The map is displayed in a full-viewport layout with no interactivity or additional styling.

Loading thumbnail…

Let's make a map with D3.js!

This example shows a world map rendered as an SVG, featuring a blue sphere background and light green country outlines. It demonstrates a basic D3.js geographic visualization using `d3.geoNaturalEarth1` for the projection and `d3.geoPath` to generate path data for the sphere. The map loads TopoJSON data from a GitHub-hosted `.json` file via `d3.json` and the `topojson` library's `feature` module, though the country data is only logged to the console rather than drawn. The code imports specific D3 functions (`select`, `json`, `geoPath`, `geoNaturalEarth1`) and relies on v5 syntax, with CSS applying fill and stroke styling to the sphere and country paths.

Loading thumbnail…

Let's make a map with D3.js!

This example displays a natural Earth projection map of the world, rendered as a single blue sphere with country boundaries drawn in light green. The visualization first appends a sphere path using `d3.geoPath` with a `d3.geoNaturalEarth1` projection, then loads GeoJSON data from a remote URL via `d3.json` and converts it to GeoJSON features using `topojson.feature`. The map is rendered as SVG within an HTML page, with styling for the sphere and country fills defined in an external stylesheet.

Loading thumbnail…

Let's make a map with D3.js!

This example shows a single blue sphere representing the Earth, rendered in an SVG canvas, with a natural Earth projection. The map is drawn using D3.js version 5, specifically the `geoNaturalEarth1` projection and `geoPath` generator, while the sphere outline is created with a `pathGenerator` on a `{type: 'Sphere'}` object. The code loads external TopoJSON data via `topojson.feature`, though the current implementation only logs the fetched data to the console and does not yet display country boundaries. The visualization uses static SVG paths with CSS classes for styling.

Loading thumbnail…

Let's make a map with D3.js!

This example visualizes a world map using D3.js with a blue sphere background and green country shapes. It loads geographic data from an external JSON file and renders it as SVG paths using the `d3.geoPath` and `d3.geoNaturalEarth1` projection. The code employs TopoJSON’s `feature` method (though not yet called in the visible portion) and logs the fetched data to the console. The styles define the sphere’s fill color and country borders with a low stroke opacity.

Loading thumbnail…

Let's make a map with D3.js!

This example shows a natural Earth projection of the world, rendered as a blue sphere with no country boundaries loaded yet. The visualization uses D3 v5’s `geoNaturalEarth1` projection and `geoPath` to draw the sphere outline, while `topojson.feature` is called on an external GeoJSON file fetched via `d3.json`. The SVG canvas is 960 by 500 pixels, with the sphere filled in blue and CSS classes prepared for future country styling. The code’s console logs the fetched data but does not yet display it on the map.

Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates how to create a simple world map using D3.js, displaying countries as light green polygons against a blue sphere background. The visualization uses the `geoNaturalEarth1` projection and `geoPath` to generate SVG paths from TopoJSON data loaded from the world-atlas dataset. The code relies on D3 v5 and the topojson library, specifically using the `feature` function to convert TopoJSON to GeoJSON. The map is rendered entirely with SVG elements, with the sphere outline drawn first, followed by the country boundaries.

Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates how to create a simple world map using D3.js, displaying countries as light green polygons against a blue sphere background. The visualization uses the `geoNaturalEarth1` projection and `geoPath` to generate SVG paths from TopoJSON data loaded from the world-atlas dataset. The code relies on D3 v5 and the topojson library, specifically using the `feature` function to convert TopoJSON to GeoJSON. The map is rendered entirely with SVG elements, with the sphere outline drawn first, followed by the country boundaries.

Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates how to create a world map using D3.js version 5 and the TopoJSON library. It displays a blue sphere representing the globe and uses the Natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to render geographic boundaries. The map is rendered as an SVG element, with country borders styled in light green and black strokes. The code loads geographic data from a remote `borders-parsed.jsonp` file, though the actual data fetching and subsequent rendering of individual countries is not fully implemented in the visible code.

Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates how to build a geographic map of the world using D3.js, rendering landmasses as light green countries with a dark blue ocean sphere. The visualization uses the Natural Earth projection through `d3.geoNaturalEarth1` and projects geographic coordinates onto an SVG canvas via `d3.geoPath`. It loads world topology data from the World Atlas TopoJSON file using `topojson.feature` to extract country boundaries. The code also includes a YouTube tutorial embed in the README, showing the learning process behind creating the map.

Loading thumbnail…

Let's make a map with D3.js!

This example shows a natural Earth projection of the world, rendered as a blue sphere with no country boundaries loaded yet. The visualization uses D3 v5’s `geoNaturalEarth1` projection and `geoPath` to draw the sphere outline, while `topojson.feature` is called on an external GeoJSON file fetched via `d3.json`. The SVG canvas is 960 by 500 pixels, with the sphere filled in blue and CSS classes prepared for future country styling. The code’s console logs the fetched data but does not yet display it on the map.

Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates how to build a geographic map of the world using D3.js, rendering landmasses as light green countries with a dark blue ocean sphere. The visualization uses the Natural Earth projection through `d3.geoNaturalEarth1` and projects geographic coordinates onto an SVG canvas via `d3.geoPath`. It loads world topology data from the World Atlas TopoJSON file using `topojson.feature` to extract country boundaries. The code also includes a YouTube tutorial embed in the README, showing the learning process behind creating the map.

Loading thumbnail…

Let's make a map with D3.js!

This example demonstrates how to create a simple world map using D3.js, displaying countries as light green polygons against a blue sphere background. The visualization uses the `geoNaturalEarth1` projection and `geoPath` to generate SVG paths from TopoJSON data loaded from the world-atlas dataset. The code relies on D3 v5 and the topojson library, specifically using the `feature` function to convert TopoJSON to GeoJSON. The map is rendered entirely with SVG elements, with the sphere outline drawn first, followed by the country boundaries.

Loading thumbnail…

Let's make a map with D3.js!

This example shows a world map rendered as a set of SVG paths, with countries filled in light green and the sphere background in blue. It uses D3.js v5 and the topojson library to load and convert geographic data from the world-atlas GeoJSON file into country features. The projection is set with `d3.geoNaturalEarth1`, and paths are generated through `d3.geoPath`. The map appears after the JSON data is fetched asynchronously, with each country drawn as an individually styled path element.