Elora-dev

@Elora-dev·6 public vizzes

Kudu

Kudu is a data visualization that presents a bar chart of the ten most populous countries, using population data from a CSV file. The chart displays each country’s population as a horizontal bar, with axes labeled for continent and weight, though the rendered data is hardcoded. Built with D3 v5, it uses `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to construct the SVG chart, while a separate DataTables table loads species information from a JSON file. The page also embeds a Google Map iframe.

Jul 23, 2020

Loading thumbnail…

Sophie's version: Aggregation by Country using Excel + Dropdowns!

This interactive map visualizes aggregate course view counts by country using a Mercator projection rendered in SVG. Users filter the data by course category via a dropdown menu, which updates the circle sizes representing total views per nation. The visualization loads geographic boundaries from a TopoJSON world atlas and CSV data containing viewer locations and course enrollment metrics. Built with React, the example uses d3.geoPath for map rendering, d3.scaleSqrt for proportional circle sizing, and react-dropdown for the selection interface.

Jul 23, 2020

Loading thumbnail…

Bar chart

This bar chart displays the average weight of different species, categorized by continent, revealing which regions harbor the largest animals. The visualization fetches its data from a remote JSON file via `d3.json`, then uses `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the categorical y-axis. SVG rectangles are drawn for each species, with axes created using `d3.axisBottom` and `d3.axisLeft`. The chart applies a custom tick format via `d3.format` to abbreviate large numbers, and all rendering occurs in SVG.

Jul 23, 2020

Loading thumbnail…

Spread of Covid-19 in France

This chart visualizes the cumulative number of Covid-19 cases in France during March 2020. The data is loaded from a local CSV file and rendered as a single red line, with time on the x-axis and case counts on the y-axis. The visualization uses d3.csv, d3.scaleTime, d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.line to construct the SVG chart. Axes labels clarify the month and case counts, and grid lines are drawn using tick size modifications.

Jul 23, 2020

Loading thumbnail…

Spread of Covid-19 France

This line chart visualizes the growth of confirmed Covid-19 cases in France from early to late March 2020. The graphic displays the number of cases on the y-axis against the timeline on the x-axis, using a red path to show the escalating curve. Built with D3 v5, the visualization uses `scaleTime` and `scaleLinear` to map data, and `axisBottom` and `axisLeft` to render the axes. It pulls data from a remote JSON API and renders the chart as an SVG.

Jul 20, 2020

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates how D3.js can build an animated smiley face using fundamental DOM manipulation. The face includes a yellow circle, eyes, eyebrows, and a mouth. Using `d3.select` and chained methods like `.append` and `.attr`, the code constructs SVG elements and groups them with translations. The eyebrows animate via `transition()` with a 2000-millisecond duration, moving up and down repeatedly. The mouth is drawn using the `d3.arc()` helper to generate a path. The visualization relies entirely on SVG rendering and D3 v5.

Jul 19, 2020