edmond gihozo

Choropleth Map

A choropleth map colors countries by their economy category using a categorical color scale. The map is rendered as SVG with geographic paths projected via `d3.geoNaturalEarth1` and encoded with `d3.geoPath`, while panning and zooming are handled by `d3.zoom`. A legend, built with custom code, displays color-coded circles in `d3.scaleOrdinal`’s `schemeSpectral` range. Data comes from World Atlas TopoJSON and TSV files, loaded with `d3.json` and `d3.tsv`, and each country shows its name and value on hover via a `<title>` element.

Apr 2, 2020

Let's do the Interaction sha

This interactive world map uses a Natural Earth projection with D3’s geoNaturalEarth1 and geoPath to render country boundaries from a TopoJSON dataset, while a secondary TSV file supplies country names for tooltips. Users can pan and zoom via D3’s zoom behavior, which applies a transform to the SVG group. The map features a dark navy fill with yellow strokes, and hovering over a country turns it black. The visualization demonstrates combining geographic data loading, projection, and user interaction in an SVG-based D3 workflow.

Apr 2, 2020

Lets make a MAP

This example renders a world map using a Natural Earth projection, highlighting countries as solid yellow shapes against a blue ocean sphere. The visualization builds the map with D3’s `geoPath` and `geoNaturalEarth1` projection, while the TopoJSON `feature` function converts country boundaries from a JSON dataset. Path elements are generated for each country, with styling controlled by CSS classes for the sphere and landmasses. The map is drawn using SVG, and the data source is the world-atlas countries-110m JSON file.

Apr 1, 2020

Make the bown of fruits

Ten red apples appear in a row, and after a second one is removed. A moment later, the apple in the sixth position turns into a lemon, changing color and size. The visualization uses D3's `select`, `range`, and `scaleOrdinal` to map fruit types to visual properties and handle the dynamic updates. The SVG scene is rendered with `d3.merge` and `exit`/`remove` to animate changes, while the title and styling come from the CSS file.

World Population Area chart

This area chart visualizes global population pledges and contributions over time, with the x-axis representing years and the y-axis showing monetary amounts. The chart uses a smooth curved area fill to display the data distribution, with custom formatted tick labels converting values to billions. Built with D3.js version 5.6.0, the visualization employs `area()`, `scaleTime()`, `scaleLinear()`, and `axisBottom()`/`axisLeft()` APIs. The data comes from a CSV file containing donation records, with the area path generated using `curveBasis` for smoothing. The SVG rendering includes styled axes, tick marks, and a title using the Baloo 2 font.

The True line chart

An area chart visualizes temperature trends in San Francisco over time, with a filled region beneath a curved line and circular markers at each data point. The visualization uses D3 v5’s `area`, `scaleTime`, and `scaleLinear` to map timestamps and temperatures, while `axisBottom` and `axisLeft` render labeled axes. Data is loaded from a CSV file via `csv`, and the SVG output applies a custom color scheme with a title.

The True line chart

This visualization displays a line chart of temperature over time, using San Francisco temperature data from a CSV file loaded via D3. The chart includes a smoothed curve, circular data points, and labeled axes with gridlines, all rendered in SVG via D3’s `scaleTime`, `scaleLinear`, `line`, `axisLeft`, and `axisBottom`. The line is drawn with `curveBasis` for a smooth path, while the responsive layout uses margins and a custom title.

A U T O M P G

This scatterplot displays the relationship between temperature and time for San Francisco weather data, with each point representing a daily temperature reading. The visualization uses D3.js v5’s `scaleTime`, `scaleLinear`, `extent`, and axis components to map timestamps and temperatures to circle positions. Circles are semi-transparent orange, and the chart includes gridlines from tick marks, a title, and custom fonts via Google Fonts. Data is loaded as CSV from a remote URL, with temperatures converted to numbers and timestamps parsed into `Date` objects before rendering.

A U T O M P G

The visualization plots automobile weight against model year for a dataset of cars, displaying each vehicle as a semi-transparent circle. The chart includes labeled axes with minimal gridlines and a title, “The Cars on market.” The code uses D3 v5 methods including `csv`, `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `tickFormat` to load and scale data from the auto-mpg CSV file, then renders circles and axes as SVG elements. Styling is applied via external CSS with custom fonts and colors.

Creating the scatter Plot

This scatter plot visualizes country populations using a circular mark for each nation, with population values scaled along the x-axis and countries ordered on the y-axis. The chart adds horizontal gridlines and formats tick labels with the `d3.format` function. Built with D3 v5, the example uses `d3.csv` to load data, `scaleLinear` and `scalePoint` for positioning, and `axisLeft`/`axisBottom` to render axes. The SVG output includes a styled title and custom margins, with data loaded from a local CSV file.

Creating the Bar Chart

This horizontal bar chart displays population estimates for eight countries, from China down to Rwanda, using a clean, left-aligned layout with labeled axes. The visualization is built with D3 v5, using `scaleLinear` for the x-axis, `scaleBand` for the categorical y-axis, and `axisLeft` and `axisBottom` for ticks. Data is loaded from a CSV file, formatted with `format(".2s")`, and rendered as SVG rectangles with a custom title and styled axis text via the Baloo font. The code removes axis domain lines and tick lines for a minimal aesthetic.

Creating the Bar Chart

This bar chart displays population counts for eight countries, with horizontal bars ordered from most to least populated. The visualization encodes data from a local CSV file using D3 scales—a linear scale for population and a band scale for country names. Rendering as SVG, the code applies D3’s `axisLeft`, `axisBottom`, `scaleLinear`, and `scaleBand` APIs to construct the axes and bars. Styling is handled through CSS, which sets bar fill colors, tick labeling, and the chart title.

Cars report

This example displays a car report using static JSON data embedded in `cars.js`. The page renders the first car’s price into an `h1` header via React’s `textContent` assignment, with the data parsed using `JSON.parse`. The visualization is minimal, showing only a single numeric value on a grey background, styled by `style.css`. It does not include charts, graphs, or interactive elements, focusing instead on a simple data-to-text output.