F

fsajedi22

@fsajedi22·37 public vizzes

Loading thumbnail…

Religion Choropleth Map

This animated choropleth map visualizes the dominant religion in each country using a rotating orthographic globe. Country polygons are colored via a categorical scale, with gray indicating missing data. The visualization uses D3’s `geoOrthographic`, `geoPath`, `geoGraticule`, `scaleOrdinal`, and `schemeCategory10`, with an interactive legend from `colorLegend.js` that filters highlights on hover. Data comes from a 2020 CSV of religions by country, merged with country shapes from the visionscarto-world-atlas TopoJSON, fetched using `Promise.all` and parsed with `csvParse`.

Loading thumbnail…

Fork of Top Religion Per Country with Filter Round

This interactive choropleth map displays the dominant religion for each country, using an orthographic projection that rotates the globe. The map is rendered as SVG using d3.geoPath, with countries colored via a spectral color scale based on a data.tsv file. Users can click on the color legend to filter and highlight countries by a specific religion, and hover over a country to see its name and religion via a tooltip. The visualization is built with d3.v5, the topojson library for geographic features, and loads the world atlas geodata from unpkg.

Loading thumbnail…

Top Religion Per Country

A world map colors each country according to its most prevalent religion, with a legend listing the eight categories. The visualization uses `d3.geoNaturalEarth1` projection, `d3.geoPath` for rendering, and `d3.scaleOrdinal` with a spectral color scheme. Data is loaded from a TSV file and merged with TopoJSON from world-atlas, while `d3.zoom` enables panning and zooming.

Loading thumbnail…

Top Religion Per Country with Filter

This visualization presents a choropleth map of the world, coloring each country by its predominant religion. Users can click on color legend entries to filter and highlight countries sharing that religion. The map is rendered using D3 v5’s `geoPath` with a natural Earth projection and a `scaleOrdinal` color scheme. The legend, built with a custom `colorLegend` component, offers interactive filtering. Data is loaded from a TSV file containing country codes and religion labels, joined with geographic features from the world-atlas TopoJSON source.

Loading thumbnail…

Fork of Choropleth Map

This fork of a choropleth map visualizes countries color-coded by their economy type, using a spectral color scale with an accompanying interactive legend. Built with D3 v5, it renders world map shapes using `geoNaturalEarth1` projection and `geoPath`, with data from a TSV file joined to TopoJSON geometry. The map supports zooming via the `zoom` module and hover effects that highlight countries in red.

Loading thumbnail…

Scatter Plot with Menu Francesca

This scatter plot visualizes the Cheetah Dataset, plotting the number of cheetahs received against the number alive, with each point colored by the unit feature (e.g., Live, Skin, Trophy). A dropdown menu allows filtering the color scale’s domain to a specific unit type. Built with D3 v7, it uses `scaleLinear` for axes, `scaleOrdinal` for color mapping, and `csvParse` to load data from a Mendeley-hosted CSV file.

Loading thumbnail…

Scatter Plot Axes and Title Francesca

This scatter plot visualizes cheetah trafficking incidents from the Mendeley Cheetah Dataset, with the x-axis representing the number of cheetahs received and the y-axis the number alive. Each circle is colored by the units feature (e.g., Live, Skin, Trophy) using a static `colorScale`. The visualization uses D3 v7 to render WebGL, with `axisBottom` and `axisLeft` for axes and `csvParse` to load the data.

Loading thumbnail…

Fork of Choropleth Map with Interactive Filtering F

A choropleth map visualizes countries by their economic classification, with a color legend that doubles as an interactive filter. Users click legend items to highlight matching countries and dim others, while hovering over map regions reveals the country name and value in a tooltip. The map uses `d3.geoNaturalEarth1` and `d3.geoPath` for projection, `d3.zoom` for panning and zooming, and a `d3.scaleOrdinal` with `d3.schemeSpectral`. Data comes from the World Atlas TopoJSON and TSV files, with panning handled via SVG transforms.

Loading thumbnail…

Fork of Choropleth Map with Interactive Filtering F

This choropleth map displays global country-level economic classifications using an ordinal color scale. Users can click legend items to highlight matching countries and dim all others, with a second click clearing the filter. The map uses D3 v5’s `geoNaturalEarth1` projection, `geoPath`, and `zoom` for pan/zoom interaction, with SVG rendering. Data comes from the world-atlas TopoJSON dataset, joined to TSV metadata. The legend and map are both rendered with D3 selections, and hover effects highlight individual countries.

Loading thumbnail…

Fork of Fork of World Map Simple Francesca

This example displays a world map where each country is colored according to its predominant religion, using data from a CSV file. The visualization fetches geographic boundaries from the `visionscarto-world-atlas` package and renders them with `d3.geoPath` and `d3.geoNaturalEarth1`. A `d3.scaleOrdinal` color scale maps religious categories to colors, while the `topojson-client` library converts the TopoJSON data into GeoJSON features for plotting.

Loading thumbnail…

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

This example displays a world map using a natural Earth projection, with countries filled in light green and oceans in blue. It renders geographic boundaries as SVG paths, generated from a world-atlas dataset loaded via D3’s `json` function. The code employs `d3.geoPath` with the `geoNaturalEarth1` projection and uses the `topojson` library’s `feature` method to extract country geometries from the TopoJSON data. A static sphere outline is drawn first, followed by each country path, with stroke opacity creating subtle border definition.

Loading thumbnail…

Fork of Map with Selectable Countries F

This interactive choropleth map colors countries by economic grouping from the visionscarto-world-atlas dataset, using a spectral ordinal color scale. Clicking a country highlights it and dims all others, while a color legend allows filtering by category. The visualization uses d3.geoNaturalEarth1 projection and d3.geoPath to render the map, and d3.scaleOrdinal with schemeSpectral for coloring. Zooming via d3.zoom and interaction handlers are also included.

Loading thumbnail…

Fork of World Map Simple Francesca

This example shows a world map with country boundaries colored using the categorical `schemeCategory10` palette, overlaid with a graticule grid and a thick outline. The visualization uses `d3-geo`'s `geoNaturalEarth1` projection and `geoPath` to render geographic features, while `topojson-client` converts TopoJSON data from the visionscarto world-atlas into GeoJSON. Data loads asynchronously via `fetch`, and the React-based wrapper manages state transitions from loading to rendered map.

Loading thumbnail…

World map VI

This example presents an interactive world map using the Winkel Tripel projection, rendering countries from Natural Earth TopoJSON data with graticules and a sphere outline. It incorporates zooming via `d3.zoom` and semantic zoom by counter-scaling country name labels to remain readable. A level-of-detail mechanism hides labels for small regions based on zoom level and computed area using `d3.geoArea`. The visualization applies desaturated category colors from `d3.schemeCategory10` and uses `d3.geoPath` for geographic paths, with tooltips showing country names via SVG `<title>` elements.

Loading thumbnail…

Fork of Scatter Plot with Shape Francesca

A D3.js scatter plot visualizes the projected growth of Folk Religions across global regions from 2010 to 2050, using a time-scaled x-axis for years and a linear y-axis for population in millions. Each region is represented by a distinct fill shape, with a custom shape legend identifying the six geographic areas. The visualization loads data from a CSV file, parses dates with `timeParse`, and builds axes, scales, and marks using `scaleTime`, `scaleLinear`, `scaleOrdinal`, and `symbolsFill`. The chart leverages the `selection.join` API to efficiently render paths and SVG elements.

Loading thumbnail…

Project Progress Francesca

This scatter plot shows the projected growth of Folk Religions across global regions from 2010 to 2050, with each circle representing a region-year observation. The visualization uses d3.scaleTime and d3.scaleLinear to map the date and population values, while a color legend using d3.scaleOrdinal with schemeCategory10 distinguishes the six regions. Data is loaded from a CSV file using d3.csvParse, with dates parsed via d3.timeParse. The chart employs d3.axisBottom and d3.axisLeft for axes, and custom reusable functions for the scatter plot and legend.

Loading thumbnail…

Francesca Project Progress

This visualization displays projected religious population changes across global regions from 2010 to 2050 using a grouped stacked bar chart. Each bar represents a region, with colored segments corresponding to eight religious categories, allowing comparison of both total population and religious composition over time. The chart uses D3 v7’s `stack` function to generate the stacked series, with `d3.scaleBand` and `d3.scaleLinear` for positioning, and `schemeCategory10` for color encoding. Data comes from the provided CSV file containing regional religious population estimates in millions.

Loading thumbnail…

Pseudo-Visualization Francesca Sajedi 2

This visualization uses fake data about the religious composition of four named countries ("one" through "four") to render a stacked bar chart. It encodes counts for Christianity, Islam, non-affiliation, Hinduism, Buddhism, folk religions, other religions, and Judaism using different colors from the d3 schemeCategory10 palette. The chart is built with d3.v7, using d3.stack to compute the stacked series, d3.scaleBand for the x-axis, and d3.scaleLinear for the y-axis. Axes are added via d3.axisBottom and d3.axisLeft, while the bars are positioned and sized through the xScale and yScale within the stacked bars. The code also shows a pseudo-visualization approach, with bundled JavaScript files and a simplified data structure rather than the original external source.

Loading thumbnail…

Project Progress Francesca

This example shows the raw contents of a CSV file containing religious demographic data by country, displayed as a JSON-formatted string within a pre element. The visualization loads the Iris Dataset’s CSV structure—though the actual data lists religion percentages—and parses it using `d3.csvParse`. The current state is rendered via D3’s `select` and `join` methods, with asynchronous fetching triggered on initial load. The code demonstrates a simple state management pattern, where `setState` re-renders the visualization after data arrives.

Loading thumbnail…

Project Progress

This visualization presents a stacked bar chart of fictional religion data by country, using a subset of world religions. The chart displays eight religious categories per country, with each bar segment colored using a categorical palette and sized proportionally to its value. The visualization is built with D3 v7, leveraging D3’s stack layout algorithm to create the stacked segments, alongside scaleBand and scaleLinear for axes, and axisBottom and axisLeft for the x- and y-axis ticks. The underlying dataset is manually defined within the code, providing four countries with invented numeric values.

Loading thumbnail…

Francesca Religion Project

This visualization shows projected growth in religious populations across countries, displaying a line chart of Muslim population data from 2010 to 2050 for Afghanistan, based on data from the Global Monitoring Laboratory’s Trends in Atmospheric Carbon Dioxide. The chart is built with d3.v7, using `scaleTime`, `scaleLinear`, and `d3.line` to render the path, while `d3.csvParse` and `timeParse` handle data loading and date formatting. Axes are generated via `axisLeft` and `axisBottom`, with labels for year and population values.

Loading thumbnail…

Fork of Keeling Curve

This chart reproduces the Keeling Curve, a time series that visualizes atmospheric CO2 concentration over time, plotting a single line that traces the annual sawtooth pattern of rising carbon dioxide levels. The data is sourced from the NOAA Global Monitoring Laboratory, though the dataset used here contains religious demographics with a date field parsed from year and month. The visualization is built with D3 v7, using `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.line` for the path generator, and `d3.timeParse` for date parsing. A custom `axes` module renders the left and bottom axis labels.

Loading thumbnail…

Religion Project Francesca

This scatter plot visualizes the religious demographics of various countries in 2010, using the d3 library. It plots the year against the number of Christians in each country, with a color legend distinguishing species, a holdover from the Iris dataset example. The visualization uses d3's `scaleLinear` and `scaleOrdinal` for axis and color scales, and renders data points as circles. The data is loaded from a CSV file and parsed with `csvParse`, with numerical fields converted using the unary plus operator.

Loading thumbnail…

Fork of Fork of Loading Data Religion by Country Francesca Sajedi

This example visualizes the global spread of religions using data from the Pew Research Center, showing population figures for each religious group by country. The visualization displays a map view of countries, highlighting the dominant religion per country and enabling comparison of religious population sizes across regions. The code uses D3 v7’s `fetch` to load a CSV file, `csvParse` to parse the data, and converts string values to numbers for quantitative analysis. The data includes categories for Christians, Muslims, Hindus, Buddhists, and other faiths, with null values representing populations under 10,000.

Loading thumbnail…

Fork of Loading Data Religion by Country Francesca Sajedi

This example loads a CSV of religion data by country and displays the raw parsed data in a text format. The visualization fetches data.csv, parses it with `csvParse`, and converts quantitative fields like Christian, Muslim, and Buddhist populations to numbers. The current view shows the structured data as a JSON string, with a loading state indicated before the fetch completes. The code uses D3 v7’s `select` and `csvParse` to manage data loading and rendering updates.

Loading thumbnail…

Fork of Scatter Plot with Color Francesca

This scatter plot visualizes the Iris Dataset, showing the relationship between the number of cheetahs received and the number alive, with points colored by units via a categorical color legend. Built with D3 v7, it uses `scaleLinear` for axes, `scaleOrdinal` with `schemeCategory10` for coloring, and WebGL rendering. The axes and legend are created through reusable exported functions, while data loads from a CSV file using `csvParse`.

Loading thumbnail…

Fork of Scatter Plot Color Improved Francesca

This example visualizes a scatter plot of cheetah incident data, showing the number of cheetahs received versus the number alive, with points colored by unit type. The code uses D3 v7’s `scaleLinear` for axes and `scaleOrdinal` for color mapping, rendering circles via WebGL. Data is loaded from a local CSV and parsed with `csvParse`, while axes are drawn using `axisLeft` and `axisBottom` from D3’s d3-axis module.

Loading thumbnail…

Line Plot Francesca

This line chart visualizes the number of reported violations in Syria over time, using data from the Syria Violations Document Center. The chart plots a black line across a time-based x-axis and a count-based y-axis, with axis labels for "Year" and "Number of Violations." The visualization is built with D3 v7, leveraging `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, and `d3.timeParse` to parse the date strings from the CSV file. Data is loaded via `fetch` and parsed with `d3.csvParse`, with the full chart rendered into an SVG element.

Loading thumbnail…

Fork of Loading Data SyriaViolationsDocumentationCenter Francesca Sajedi

This visualization displays aggregated Syrian violation records from the Syria Violations Documentation Center, showing the count of civilian and non-civilian casualties across provinces, dates, and responsible actors. The code fetches a CSV file and parses it with `d3.csvParse`, converting the count column to numeric values. Using D3 v7, the visualization initially renders the raw data as JSON text in a `<pre>` element, with a state management pattern where data loading triggers a re-render through the `setState` function. The framework is D3 with a custom `viz` function handling the container updates.

Loading thumbnail…

Scatter Plot Titles Francesca Sajedi

A scatter plot of the Cheetah Dataset from Mendeley visualizes the relationship between the number of cheetahs in incidents and the count recorded as alive. The plot displays data points without axes, using D3 v7 with WebGL rendering. It loads CSV data via `csvParse`, scales values with `scaleLinear` and `extent`, and renders circles positioned by `xScale` and `yScale`. The custom `axes` module imports `axisLeft` and `axisBottom` but does not apply them in the final visualization.

Loading thumbnail…

Fork of Scatter Plot Simple Francesca Sajedi

This scatter plot visualizes cheetah incident data from a Mendeley dataset, plotting the number of cheetahs against the number alive in each recorded incident. The visualization uses D3.js v7 with a WebGL rendering approach, though the visible code relies on the SVG-based `scatterPlot` function. Circles are positioned using `scaleLinear` scales computed from the data’s extent, with no axes displayed. The data is loaded and parsed via `csvParse`, with numeric fields converted before rendering.

Loading thumbnail…

seudo-Visualization Francesca Sajed

The example shows a row of six small multiples, each a D3 visualization of the same static dataset, `[0,1,2,3,4]`, encoded by a different visual channel: x-position, y-position, size, bar length, shape, and color. Each small multiple uses a separate D3 `select` and `.join` operation to create its SVG elements, drawing circles, rectangles, or paths via `symbolsFill` and `schemeCategory10`. The code uses D3 v7 and JavaScript modules to separate each visual encoding into its own function, such as `xPosition.js`, `shape.js`, and `hue.js`.

Loading thumbnail…

Pseudo-Visualization Francesca Sajedi

This example shows a stacked bar chart of artwork medium counts (Graphite, Poster, Lithograph, Paint) by year from 2015 to 2020, with each category colored via `d3.schemeCategory10`. The bars are built using `d3.stack()` and `d3.scaleBand` for the x-axis, with `d3.scaleLinear` for the y-axis. Axes are rendered via `d3.axisBottom` and `d3.axisLeft`. The visualization uses static data defined in the script and is styled with a minimal CSS reset.

Loading thumbnail…

Fork of Transforming Data Cheetahs Francesca Sajedi

This visualization aggregates cheetah trafficking incident data from a CSV file, summing the number of cheetahs per region and per country using `d3.flatRollup` and `d3.sum`. The results are displayed as raw JSON text in `<pre>` elements. The code uses `d3.csvParse` to load the data and `d3.select` for DOM manipulation, though no graphical rendering is implemented.

Loading thumbnail…

Fork of Loading Data Cheetah Francesca Sajedi

This visualization explores a decade of illegal cheetah trade data from a Mendeley dataset, mapping recorded incidents by their country role (origin, transit, destination). The interactive view allows filtering by incident outcome, including confiscated, surrendered, alive, and died. The code uses D3 v7 to fetch and parse the CSV via `fetch` and `csvParse`, then draws a table of the raw data preview. The visualization is a webgl rendering that initially loads the dataset and displays its structured contents, relying on D3’s selection and update pattern to manage state.

Loading thumbnail…

Fork of Mouse Follower Simple Make Something Francesca Sajedi

A green circle and red rectangle respond to the mouse. As the cursor moves, the circle repositions to the cursor's coordinates while the rectangle's width and height scale to match those same x and y values. The visualization uses the D3.js select and append methods to create SVG elements, binding a mousemove event to update the shape attributes dynamically. The SVG canvas fills the entire browser window.

Loading thumbnail…

Fork of Hello Package.json Test1

This example demonstrates how a React application renders a static message using JSX, displaying “Hello” alongside a formatted `package.json` snippet. The code imports `d3`, `React`, and `ReactDOM` from `package.json`, with explicit `vizhub.libraries` mappings that resolve these packages to CDN globals like `window.d3` and `window.React`. ReactDOM’s `render` method mounts the component to a dynamically created `<div>`, while CSS styles the text at a large font size with centered alignment.