S

SarahKiyani

@SarahKiyani·32 public vizzes

Loading thumbnail…

ILINet Flu Surveillance Data Interactive Visualization

This interactive dashboard presents ILINet flu surveillance data across four coordinated views: a line chart tracking weekly trends by year, a choropleth map showing the geographical distribution across US states, a bar chart ranking the top states, and a detailed line chart for selected states. Built with React and D3.js v5, the visualization uses `d3.scaleOrdinal` for color encoding, `d3.geoPath` for map rendering with a Natural Earth projection, and `d3.curveCardinal` for smoothed trend lines. The data comes from the CDC FluView Interactive dataset, processed through TopoJSON for geographic boundaries.

Loading thumbnail…

Smoothed Daily Coronavirus Deaths by Country

A multi-country line chart shows smoothed daily coronavirus deaths over time, with each country rendered as a thin gray line. Hovering over any point via a Voronoi overlay highlights that country’s full trajectory in black and displays a tooltip with its cumulative death count and date. The chart uses a logarithmic y-axis and a time-based x-axis, with data from the Johns Hopkins CSSE COVID-19 dataset. Daily deaths are smoothed by repeated averaging via a custom blur function, and the visualization is built with React, D3 v5 scales and line generators, and SVG rendering.

Loading thumbnail…

Untitled

This interactive visualization links a scatter plot, a symbol map, and a time-series brush to explore worldwide COVID-19 aggregated case data. Users can brush a time range to filter the scatter plot and map, or hover over points to highlight matching elements across all views. The visualization uses D3 v3 with `d3.svg.brush`, `d3.geo.path` with an Albers USA projection, and `d3.tip` for tooltips. Data is loaded from local JSON and CSV files containing confirmed cases, recovered cases, deaths, and increase rate over time.

Loading thumbnail…

HTML Starter

This example demonstrates a multi-chart interactive dashboard for exploring vehicle traffic data from the Lekagul sensor dataset. It uses crossfilter to enable linked filtering between a time series chart, two bar charts, and a scatter plot, all rendered as SVG. The time series chart provides brush-based time range selection, while bar charts for car type and gate name respond to mouse hover events. The visualization is built with D3.js and leverages its modular chart functions including `d3.brushX`, `d3.axisBottom`, and `d3.scaleBand` to coordinate user interactions across all views.

Loading thumbnail…

HTML Starter

This example demonstrates a bar chart visualization of COVID-19 data, showing confirmed cases, recoveries, and deaths across multiple countries on a specific date. The chart uses the D3.js library, specifically `d3.scaleBand` for the x-axis and `d3.scaleLinear` for the y-axis, with SVG rendering for the bars. The data is loaded from a CSV file containing country-level pandemic statistics. The visualization includes axes with labels and interactive mouseover/mouseout events, though the actual data displayed focuses on the initial case counts from January 2020.

Loading thumbnail…

Circles on a Map

This visualization uses the D3.js framework to display the global population of each country as a circle on a natural Earth projection map; the circle's area corresponds to the country's 2018 population, using a square-root scale for size. The map supports pan and zoom interactions via `d3.zoom`, and hovering over a country reveals its population and region via a tooltip. Countries lacking data are highlighted in red, and the visualization includes a color legend and a size legend built with SVG, with data sourced from a COVID-19 dataset and a TopoJSON world atlas.

Loading thumbnail…

Choropleth Map

This choropleth map colors countries by their economy classification using an ordinal color scale derived from d3.scaleOrdinal and d3.schemeSpectral. It renders world geography with d3.geoPath and a Natural Earth projection, with zoom and pan via d3.zoom. A color legend built from d3.zoom and custom SVG circles and text displays the categorical levels. The data comes from a GitHub-hosted CSV joined to TopoJSON world atlas geometries using topojson.feature. Hovering highlights individual countries with a red fill.

Loading thumbnail…

Covid Cases Hover

A bar chart displays worldwide confirmed COVID-19 cases over time, with a tooltip revealing the exact date and case count when hovering over each bar. The visualization uses an SVG rendering with a black-to-orange hover effect, scaling the y-axis linearly and the x-axis with a band scale. It employs d3.v5, the d3.tip library for interactive tooltips, and loads data from a CSV file containing daily global case totals. Axis labels include "Date" and "Number of Confirmed Cases," styled with IBM Plex fonts.

Loading thumbnail…

COVID-19 Stages

A choropleth map of U.S. counties shows COVID-19 progression stages—from contained to outbreak—across dates in late March and early April 2020. A dropdown menu lets viewers switch between daily snapshots, recoloring each county based on its stage. The visualization uses Mapbox GL JS for the interactive map, with county boundaries and stage data loaded as a GeoJSON source. D3’s `d3.csv` and `d3-dsv` parse the underlying dataset, while feature-state styling dynamically updates fill colors and hover effects on the vector tiles.

Loading thumbnail…

Covid-19 Outbreak Status

This interactive map visualizes the global progression of COVID-19 across countries, using color-coded stages for confirmed cases, recoveries, deaths, and unaffected regions. The visualization presents geo-spatial data with a date selector to explore temporal changes. Built with D3.js, it uses `d3.geoPath` and `d3.geoNaturalEarth1` for map projection, alongside the `d3.dsv` parser to load country data from a CSV file, and `d3.zoom` for interactive panning and zooming. The map is rendered as SVG using TopoJSON world geometry.

Loading thumbnail…

Let's make a map with D3.js!

This interactive map visualizes COVID-19 case data by country, with a control panel that categorizes confirmed cases, recoveries, and deaths into distinct stages. The visualization uses D3.js v5 and TopoJSON to render a world map from Natural Earth data, employing `d3.geoPath` with a natural Earth projection and SVG paths. Users can zoom and pan the map via `d3.zoom`. A drop-down menu allows switching between different dates, and the data appears to come from a CSV dataset tracking the pandemic’s progression through early 2020.

Loading thumbnail…

Covid Cases Hover

This visualization displays daily COVID-19 case counts from NYC Health Data as vertical black bars over time. A black tooltip with orange text appears on hover, showing the specific date and number of cases for each bar. The chart uses d3.csv to load the data, d3.scaleBand and d3.scaleLinear for the axes, and the d3-tip library for tooltip functionality. SVG rectangles render the bars, which turn orange on mouseover.

Loading thumbnail…

Covid Cases Hover

A bar chart shows daily COVID-19 case counts in New York City from late February to late May 2020. Hovering over a bar reveals a tooltip with the exact date and case number. The visualization uses D3 v5 with `scaleBand` and `scaleLinear` for axes, and the `d3-tip` library for interactive tooltips. Data comes from NYC Health data and is loaded via `d3.csv`. Bars turn orange on hover.

Loading thumbnail…

Migrant Deaths Linked Views with Brushing

This interactive visualization combines a bubble map and a date histogram to explore migrant deaths. Users can brush over the histogram to filter the map, which updates circles sized by the total dead and missing. The map uses a natural Earth projection via `d3.geoPath`, while the histogram employs `d3.brushX` and `d3.bin` for time binning. Data comes from a COVID-19 CSV dataset, rendered in SVG with React and D3 v5.

Loading thumbnail…

Migrant Deaths Linked Views with Brushing

This visualization presents migrant deaths and missing persons with two linked views: a world map with scaled circles for total deaths and a brushing-enabled time histogram. Users brush over the monthly histogram to filter the map’s circles to show only incidents within that date range. The map uses `geoNaturalEarth1` projection with `geoPath` and `geoGraticule`, while the histogram aggregates data with `d3.histogram` and `brushX`. Circle radii are set with `scaleSqrt`, and React’s `useMemo` optimizes rendering. Data comes from a CSV of reported incidents.

Loading thumbnail…

Bar Chart

This bar chart visualizes the daily confirmed COVID-19 cases across eight countries from January to May 2020. The current configuration displays the US case count on the x-axis and dates on the y-axis, with each bar’s length representing the cumulative total. The code uses D3 v5 APIs including `csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to load data from a CSV file and render the SVG, with configurable axis labels and grid lines.

Loading thumbnail…

Line Chart with Multiple Lines

This line chart displays one week of temperature data in degrees Celsius for cities around the world, sourced from Data Canvas - Sense Your City. Multiple colored lines, one per city, show temperature trends over time, with a color legend identifying each city. The visualization uses d3.csv to load data, d3.scaleTime and d3.scaleLinear for axes, d3.line with curveBasis for path generation, and d3.nest to group data by city. The SVG rendering includes gridlines, axis labels, and a title.

Loading thumbnail…

Untitled

This visualization is an interactive, stacked bar chart that compares total sales by Segment across Sub-Categories of products, filtered by Region via a dropdown menu. It also includes a checkbox to toggle the sort order of the bars. The chart is implemented in React, using the D3 v5 library, and renders as an SVG with animated transitions (`.transition()`) when the filter or sort changes. The data is loaded from a CSV file containing order details, and the chart uses D3's `scaleBand`, `scaleLinear`, and `scaleOrdinal` for axes and color encoding, along with `enter`, `exit`, and `merge` operations to update the bars and labels.

Loading thumbnail…

Untitled

This stacked bar chart shows the number of delivery transactions for U.S. states, broken down by product category from a Superstore dataset. Users can select a region and toggle sorting to reorder bars by transaction totals. The visualization uses d3.csv to load data, d3.stack for layer composition, and d3.scaleBand/d3.scaleLinear for axes. Animated transitions via d3.transition update bar positions and heights when filters change, with SVG rectangles and text labels rendered dynamically.

Loading thumbnail…

Religions of Largest 20 Countries

This stacked bar chart visualizes the estimated 2010 religious breakdown of the 20 most populous countries, using data from the Pew Research Global Religious Landscape. Each bar represents a country, segmented by religion, with hover interactions on bars for tooltips and on the legend to highlight specific religious groups. The visualization is built with D3.js, utilizing `d3.layout.stack` for layering, `d3.svg.axis` for scales, and `d3-tip` for tooltips, rendered as an animated SVG.

Loading thumbnail…

Sales Comparision by Segment per sub-category

This visualization compares sales by customer segment across sub-categories using stacked horizontal bars, with segments distinguished by color. The bars are rendered as SVG rectangles, and hovering over a segment highlights it while dimming others. The code uses D3.js v3, including `d3.nest` and `d3.layout.stack` for aggregation and stacking, `d3.svg.axis` for scales, and `d3-tip` for tooltips. Data comes from a CSV file with sales records.

Loading thumbnail…

Untitled

This D3.js example depicts a simple orange face with a blue outline, black eyes, and a single path-based mouth, centered within a 960 by 500 SVG canvas. The visualization uses the D3 `select` and `arc` APIs, drawing the face as a large circle and the mouth as an annular sector defined by inner and outer radii and start/end angles. The eyes are positioned relative to the canvas center using fixed spacing offsets, and the rendering is output as an SVG file.

Loading thumbnail…

Visualization 1 (Stacked Bars)

A stacked bar chart compares total sales across product sub-categories, segmented by customer segment (Consumer, Corporate, Home Office). The chart uses D3.js with the `d3.nest`, `d3.layout.stack`, and `d3.legend.color` APIs to compute the stacked layout and render an interactive legend. Data is loaded from a CSV file (`data(sorted & grouped).csv`). Hover tooltips and a semi-transparent overlay highlight individual segments.

Loading thumbnail…

Untitled

This interactive stacked bar chart displays the sales distribution across cities for a selected customer segment, using data from a CSV file of store transactions. A dropdown menu filters by segment, while a checkbox toggles city sorting by total sales value. Built with D3 v5 and React, the visualization uses `d3.stack`, `d3.scaleBand`, and `d3.scaleLinear` to render the bars, with smooth transitions animated via `transition().duration()`. SVG elements and axes update dynamically in response to user selections.

Loading thumbnail…

d3.js learning

This stacked bar chart visualizes two sample data rows from a CSV-like structure, transposed into layers for RowID, OrderID, OrderDate, ShipDate, and ShipMode. Built with d3.v3 and rendered as SVG, it uses the d3.layout.stack() algorithm to compose the bars, d3.scale.ordinal() and d3.scale.linear() for axes, and d3.svg.axis() for ticks. Interactive tooltips appear on mouseover via d3.mouse(), while a legend maps colors to each field.

Loading thumbnail…

Untitled

A stacked bar chart displays the distribution of sales across three product categories—Furniture, Office Supplies, and Technology—for each city in a Superstore dataset. Users select a customer segment from a dropdown menu and can toggle sorting by total sales or city order via a checkbox. Built with React and D3 v5, the visualization uses `d3.csv` to load data, `d3.stack()` to generate layered bars, and `d3.scaleBand` with `d3.scaleLinear` for axes. Smooth transitions animate changes with `transition.duration`, while labels show the total quantity per city.

Loading thumbnail…

Untitled

A stacked bar chart displays the distribution of sales across three product categories—Furniture, Office Supplies, and Technology—for each city in a Superstore dataset. Users select a customer segment from a dropdown menu and can toggle sorting by total sales or city order via a checkbox. Built with React and D3 v5, the visualization uses `d3.csv` to load data, `d3.stack()` to generate layered bars, and `d3.scaleBand` with `d3.scaleLinear` for axes. Smooth transitions animate changes with `transition.duration`, while labels show the total quantity per city.

Loading thumbnail…

Untitled

A dropdown menu selects a region, and a stacked bar chart animates to show the distribution of Furniture, Office Supplies, and Technology sales across cities. Each bar is segmented by category, with city names on the x-axis and total sales scaled on the y-axis. A checkbox toggles the sorting of bars by city name or by the derived segment total. The chart uses d3.csv to load the Superstore data, d3.stack for layering, d3.scaleBand and d3.scaleLinear for scales, and d3.transition to animate updates. SVG rendering with React centers the visualization.

Loading thumbnail…

Bar chart with D3.js

This bar chart visualizes the "Most loved programming languages in 2018," using data from Stack Overflow. It displays the percentage of developers who love each language, with bars colored per language. The chart uses D3.js v5 to render SVG elements, including axes, gridlines, and a title. Interactive features, triggered by mouse events, highlight a selected bar and display percentage differences from the hovered language, and a dashed line indicates the selected value.

Loading thumbnail…

Visualization 1 (Stacked Bars)

This stacked bar chart compares sales across product sub-categories, segmented by customer segment (Consumer, Corporate, Home Office). It displays aggregated sales totals for each sub-category, with each segment represented by a differently colored stack. The visualization uses D3.js version 3 with `d3.layout.stack` to create the stacked layers, `d3.scale.ordinal` and `d3.scale.linear` for axes, and `d3.legend` for a color legend. Animated hover effects and tooltips via `d3-tip` highlight individual segment contributions. Data comes from a CSV file, rendered as an SVG with rotated x-axis labels.

Loading thumbnail…

Lets make a face with d3.js

This example uses d3.js to construct a simple face directly in an SVG canvas. It begins with a red background applied via `d3.select` and the `style` method, setting the stage for the face’s features. The code relies on the D3 v5 library to manipulate SVG elements, though the face itself is not yet drawn—the project is halfway to completion, as noted in the README. The static SVG coordinates (960 by 500) provide the frame for future interactive or animated elements.

Loading thumbnail…

Untitled

This D3.js example depicts a simple orange face with a blue outline, black eyes, and a single path-based mouth, centered within a 960 by 500 SVG canvas. The visualization uses the D3 `select` and `arc` APIs, drawing the face as a large circle and the mouth as an annular sector defined by inner and outer radii and start/end angles. The eyes are positioned relative to the canvas center using fixed spacing offsets, and the rendering is output as an SVG file.