S

s-janibekova

@s-janibekova·28 public vizzes

Loading thumbnail…

Choropleth Map

A choropleth map colors countries by their income group using a categorical ordinal color scale, with hover effects highlighting individual nations. Built with D3 v5, it renders geographic boundaries as SVG paths via `d3.geoPath` and `geoNaturalEarth1`, and loads world geometry from the world-atlas TopoJSON dataset. A custom color legend displays the categories, while zooming is enabled through `d3.zoom`. Data is processed asynchronously with Promises, merging TSV metadata with TopoJSON features.

Loading thumbnail…

Choropleth Map

A choropleth map colors countries by their income group using a categorical ordinal color scale, with hover effects highlighting individual nations. Built with D3 v5, it renders geographic boundaries as SVG paths via `d3.geoPath` and `geoNaturalEarth1`, and loads world geometry from the world-atlas TopoJSON dataset. A custom color legend displays the categories, while zooming is enabled through `d3.zoom`. Data is processed asynchronously with Promises, merging TSV metadata with TopoJSON features.

Loading thumbnail…

Choropleth Map

A choropleth map colors countries by their income group using a categorical ordinal color scale, with hover effects highlighting individual nations. Built with D3 v5, it renders geographic boundaries as SVG paths via `d3.geoPath` and `geoNaturalEarth1`, and loads world geometry from the world-atlas TopoJSON dataset. A custom color legend displays the categories, while zooming is enabled through `d3.zoom`. Data is processed asynchronously with Promises, merging TSV metadata with TopoJSON features.

Loading thumbnail…

Cheap Tricks for Interaction

This example shows an interactive world map colored by economic classification, with a categorical color legend. Users can pan and zoom the map using mouse or touch gestures, and hovering over a country highlights it and reveals its name and economic group via a tooltip. The visualization uses d3.geoNaturalEarth1 for projection, d3.geoPath for rendering GeoJSON features, and d3.zoom for interaction. d3.scaleOrdinal with schemeSpectral maps economic categories to colors, while the legend is custom-built from SVG elements.

Loading thumbnail…

Choropleth Map

A choropleth map colors countries by their income group using a categorical ordinal color scale, with hover effects highlighting individual nations. Built with D3 v5, it renders geographic boundaries as SVG paths via `d3.geoPath` and `geoNaturalEarth1`, and loads world geometry from the world-atlas TopoJSON dataset. A custom color legend displays the categories, while zooming is enabled through `d3.zoom`. Data is processed asynchronously with Promises, merging TSV metadata with TopoJSON features.

Loading thumbnail…

Bowl of Fruit - General Update Pattern Special Cases

This example demonstrates two reusable legend components, a color legend and a size legend, built on the general update pattern. The color legend maps fruit names to ordinal colors, while the size legend uses a square-root scale to represent numeric values through circle radii. Both legends handle enter, update, and exit selections via `selection.merge` and `selection.exit().remove()`. The code uses d3.scaleOrdinal, d3.scaleSqrt, and explicit SVG rendering with appended `circle` and `text` elements.

Loading thumbnail…

Bowl of Fruit - General Update Pattern Special Cases

The bowl of fruit demonstrates special cases of D3’s general update pattern, showing how enter, update, and exit selections handle data changes. Five apples are drawn as circles with text labels; then an apple is removed, another is swapped for a lemon, and a third is filtered out. The code uses `d3.selectAll`, `data`, `enter`, `merge`, and `exit` to manage SVG groups, with `scaleOrdinal` mapping fruit types to radii and colors. The animation runs via `setTimeout`, with each step re-rendering the bowl shape and fruit positions.

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates a hierarchical tree visualization of world regions and countries, arranged in a structured layout with labeled nodes. The visualization shows the geographic hierarchy from continents down to individual countries, with each text node sized according to its depth in the tree. The code uses D3.js v5 APIs including `tree()`, `hierarchy()`, `linkHorizontal()`, and `zoom()` to compute the layout, draw the connecting paths, and provide interactive zooming. Data comes from a local `data.json` file with region and country names, rendered as SVG elements with custom text shadow styling.

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates how to draw a face using D3.js. The visualization fills the browser viewport with a rounded rectangle, created by chaining `select` and `attr` methods on the SVG element. It uses the `d3.select` API to target the SVG container and appends a styled rectangle shape. The code calculates the drawing area dimensions from the document body’s client width and height. This serves as a minimal, geometric illustration of D3’s SVG rendering capabilities without any external data.

Loading thumbnail…

Let's make a map with D3.js!

This example shows an interactive world map rendered with D3.js, displaying country boundaries colored light green that turn red on hover. The visualization uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to draw geographic features, with zoom support through `d3.zoom`. It loads world-atlas TopoJSON data and a companion TSV file to map country names, appending tooltips with each country’s name. The map is drawn as SVG paths, including a dark blue sphere background.

Loading thumbnail…

Bowl of Fruit - Click to Select

Five apples sit in a row, each drawn as a circle. Clicking one apple selects it, highlighting it with a thick black stroke. The selection state is managed by React's `useState` hook, while D3's `scaleOrdinal` maps fruit types to fill colors and radii. The `FruitBowl` component renders SVG circles with event handlers that update the selected fruit.

Loading thumbnail…

Bowl -Interaction

A bowl of fruit shows five apples that users can click to select, with the selected fruit highlighted. Over time, the simulation removes apples, replaces one with a lemon, and filters out another, demonstrating dynamic updates to a data array. Built with D3 v5 and rendered as SVG, the code uses `select`, `range`, and a custom `fruitBowl` module to manage the visualization, with `setTimeout` driving the state changes.

Loading thumbnail…

Apple project

This example demonstrates dynamic updates to a D3.js visualization using data joins. A row of five red apples is initially rendered as SVG circles, then the data array is modified over time: one fruit is removed, one apple changes to a lemon (gray and smaller), and another apple is deleted. The code uses `selection.data()`, `.enter()`, `.merge()`, and `.exit()` to handle these changes, with `scaleOrdinal` mapping fruit types to colors and radii. The visualization is rendered as SVG and driven by `setTimeout` callbacks.

Loading thumbnail…

Let's make a face with D3.js!

A D3.js example demonstrates DOM manipulation by rendering a row of five apples as red circles in an SVG, then animating their removal and a color change over time. Using `d3.select`, `d3.range`, and `d3.scaleOrdinal`, the code maps fruit types to fill colors and radii. A `render` function binds data to circles via `selection.selectAll` and `data`, handling enter, update, and exit selections. A `setTimeout` removes an apple after one second, and another changes one to a lemon after 2.5 seconds, showcasing dynamic updates with D3 v5.

Loading thumbnail…

Temperature in San Francisco Line Chart

This line chart displays one week of temperature data in San Francisco, sourced from Data Canvas - Sense Your City, with time on the x-axis and degrees Celsius on the y-axis. The visualization uses a filled area chart with a basis curve to smooth the temperature readings, rendered as an SVG. Built with D3 v5, it applies scaleTime and scaleLinear for axis scaling, axisBottom and axisLeft for tick marks, and the area generator with curveBasis to create the shaded region. Circular data points are styled via CSS, while grid lines and axis labels are positioned using explicit margins.

Loading thumbnail…

Line chart of temperaure for one week

This line chart visualizes temperature measurements for one week, with each data point represented as a semi-transparent red circle connected by a maroon line path. The chart uses D3 v5’s `scaleTime` and `scaleLinear` to map timestamps and temperature values to SVG coordinates, with `axisBottom` and `axisLeft` rendering labeled axes. Data comes from a CSV file of San Francisco temperatures, parsed in JavaScript to convert timestamps and numeric values before rendering via D3’s `line` generator and appended SVG elements.

Loading thumbnail…

Cars

This scatterplot visualizes the relationship between horsepower and weight for a dataset of cars, with each circle representing a vehicle. The axes use linear scales, and the chart includes axis labels for horsepower and weight. The visualization is built with D3.js, using the `scaleLinear`, `axisLeft`, and `axisBottom` APIs to construct the scales and axes. Data is loaded as CSV from a remote URL, and the SVG circles are rendered with a semi-transparent steelblue fill. The code also formats tick labels using D3's `format` function.

Loading thumbnail…

Cars

This scatterplot displays the relationship between horsepower and weight for a dataset of cars, with each point representing an individual vehicle. The visualization uses D3’s `scaleLinear` and `extent` functions to map the data to pixel coordinates, with axes generated using `axisBottom` and `axisLeft`. Circles are appended to an SVG element with a semi-transparent steelblue fill, while axis labels and a title are added as text elements. The data is loaded from a CSV file via D3’s `csv` method and rendered with a margin-based layout.

Loading thumbnail…

Making a bar chart

This chart visualizes the top 10 most populous countries using a custom bar chart built with D3.js. Each country is represented by a filled circle, with its horizontal position and radius encoding population size. The vertical axis lists country names, and the horizontal axis displays population counts in billions. The chart uses `scaleLinear` and `scalePoint` for scales, along with `axisLeft` and `axisBottom` for axes, with data loaded from a CSV file and rendered as SVG.

Loading thumbnail…

Making a bar chart

This example displays a horizontal bar chart of population counts for the ten most populous countries, using data from a CSV file. The chart encodes population as bar width and country names along the vertical axis, with axes generated using `d3.axisLeft` and `d3.axisBottom`. It employs `d3.csv` for data loading, `d3.scaleLinear` and `d3.scaleBand` for scaling, and appends SVG `rect` elements to render the bars. The source data is loaded from `data.csv`.

Loading thumbnail…

ILINet Flu Surveillance Data Interactive Visualization

This interactive visualization explores ILINet flu surveillance data from the CDC, using multiple coordinated views: a line chart tracking yearly trends, a bar chart ranking states, a scatter plot, and a choropleth map. Users can switch metrics and attributes via dropdown menus. Built with React and D3 v5, it employs scales like `scaleLinear`, `scaleBand`, and `scaleOrdinal`, along with `geoAlbersUsa` and `geoPath` for the map, and aggregates data using custom Redux-style reducers.

Loading thumbnail…

Worldwide Suicide Map with Two Menu and Tooltips

This interactive world map visualizes suicide data from the World Health Organization, plotting circles at each country's coordinates. Users can select a specific year or view the most recent available data through dropdown menus, and a second menu highlights a chosen country in red. The visualization uses d3.geoPath with a d3.geoNaturalEarth1 projection to render land masses and graticules, while d3.scaleSqrt scales circle radii. Tooltips display the country name, year, and suicide count. The React application loads CSV suicide statistics and TopoJSON world atlas boundaries.

Loading thumbnail…

Logan Airport Weather vs Delay

A linked visualization explores daily weather conditions and flight delays at Logan Airport in 2016. A scatter plot maps wind speed against date, with circle size encoding departure delay and color indicating precipitation. A radial ring chart displays the same delay data as arcs, colored red for adverse weather or blue for normal conditions, with month labels positioned along the ring. Hovering over a scatter plot point highlights the corresponding arc in the ring chart, using D3 v5 with SVG rendering and data from a CSV file.

Loading thumbnail…

ILINet Flu Surveillance Data Interactive Visualization

This interactive visualization presents ILINet flu surveillance data in a four-panel dashboard, showing seasonal patterns across years, geographic distribution on a US choropleth map, top states by metric, and state-level trends over time. The D3-based React application uses `scaleBand`, `scaleLinear`, and `scaleOrdinal` for bar and line charts, `geoAlbersUsa` with `geoPath` for mapping, and `scaleSequential` with `interpolateYlOrRd` for choropleth coloring. Data comes from the CDC FluView Interactive dataset loaded via CSV, with interactive selection and hovering across all panels.

Loading thumbnail…

BarChart

This example shows a horizontal bar chart of country populations, with bars ordered alphabetically by country name. It uses D3 v5’s `scaleBand` for the y-axis categories, `scaleLinear` for the x-axis population values, and `axisLeft`/`axisBottom` to render axes. Population figures from the CSV are multiplied by 1000 to reflect actual counts. The SVG is drawn via `select`, with rectangles appended through `selectAll('rect').data().enter()`.

Loading thumbnail…

Responding to Resize

This example demonstrates a chart that responds to browser resizing by redrawing its content to match the new window dimensions. It uses a fixed-position div and extracts its client width and height to set the SVG size. The visualization draws two green, semi-transparent lines forming an X across the plot area, with stroke width set to 100. The redraw function is triggered on the window’s resize event. The code relies on d3.select to append an SVG and d3’s selection methods (`selectAll`, `enter`, `merge`, and `attr`) to update line coordinates.

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example uses SVG and CSS to draw a smiling face, with a yellow circle for the head, black strokes, and two smaller circles for eyes. The mouth is created as a path using the d3.arc generator with a half-circle arc. D3 v5 selection and arc APIs are used to append and style SVG elements, while CSS sets the body margin and hides overflow on the page. The example demonstrates basic shape creation, attribute manipulation, and a custom arc path in a 960×500 viewport.

Loading thumbnail…

Hello VizHub

This example displays the text "Hello VizHub!" centered on a dark blue background using a large Ubuntu font. The page renders a single static message, demonstrating how D3.js version 5 can select a DOM element and set its text content. The code imports the `select` function from d3 and a local `message` string from an ES6 module, then applies it to the `#message` div. The styling comes from an external CSS file with linked Google Fonts.