O

OsekovS

@OsekovS·20 public vizzes

Loading thumbnail…

Stylized Bar Chart

A stylized bar chart displays event counts over time, with bars rendered as alternating solid blocks and gaps. The visualization uses a React class component with mouse event handlers to enable rectangular region selection, drawing a semi-transparent overlay as users drag. Data comes from the provided `inData` array, which combines actual document counts with randomized values. The chart uses D3 v5 scales (`scaleBand`, `scaleLinear`) for positioning, while axes and marks are custom React components. Hovering over a bar highlights it in orange, and tooltips show formatted dates for each data point.

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example shows world population growth from 1950 to 2015 using a smooth area chart, with the area filled in steelblue and an orange stroke. Built with D3 v5, the visualization employs `scaleTime`, `scaleLinear`, `d3.area` with `curveBasis`, and `axisBottom`/`axisLeft` for axes, all rendered as SVG. CSS styles the path and text, while data comes from a CSV file parsed with `d3.csv`.

Loading thumbnail…

Stylized Bar Chart

A stylized bar chart visualizes time-series data, mapping document counts to vertical bars. The chart displays data points over a date range, with the y-axis auto-scaled to the data's extent. Built with React and D3 v5, it uses `scaleTime` and `scaleLinear` for positioning, rendering SVG rectangles as bars. The data comes from a local JavaScript array simulating a time series, with axes created from custom React components rather than D3 axis generators.

Loading thumbnail…

Untitled

This example displays a stacked area chart of monthly casualties in the Crimean War, broken down by cause (wounds, other, and disease) using the d3.layout.stack() API and SVG rectangles. The chart uses a category10 color scale and ordinal x-axis with a custom time format. Data is loaded from a TSV file and parsed via d3.time.format, while the axes are generated using d3.svg.axis(). The visualization highlights the dramatic spike in disease-related deaths during the winter of 1854–55.

Loading thumbnail…

Stylized Bar Chart

This example displays a time-series bar chart showing document counts over several days. The bars are styled with a teal fill, and hovering over each reveals a tooltip with the date, formatted via Moment.js. The visualization uses D3 scales (`scaleTime`, `scaleLinear`) to map dates and counts to SVG coordinates, with axes rendered by custom React components. The data is a static array generated in `data.js`, mocking time-series data using UTC timestamps.

Loading thumbnail…

Stylized Bar Chart

This example displays the 20 most populous countries in 2020 as a horizontal bar chart, sorted by population size. The visualization uses React to render SVG elements, with D3’s `scaleBand` for the categorical y-axis and `scaleLinear` for the quantitative x-axis. Custom axis components generate ticks and labels, while each bar includes a tooltip via the SVG `<title>` element. Data comes from the United Nations World Population Prospects 2019, loaded as CSV and formatted with D3’s `format` to abbreviate large numbers (e.g., billions).

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example visualizes temperature over time using a smooth line chart, with SVG shape styling handled through CSS classes for the line path and axes. The data, loaded from a CSV file via `d3.csv`, is parsed into JavaScript Date and numeric values. The visualization uses `d3.scaleTime` and `d3.scaleLinear` to map data to pixel coordinates, while `d3.line` with `curveBasis` generates the curved path. Axes are rendered with `d3.axisBottom` and `d3.axisLeft`, and grid lines are created by setting tick sizes to the chart’s inner dimensions.

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates an interactive scatter plot where users can dynamically select which data columns to display on the x- and y-axes using dropdown menus. It visualizes relationships between numeric attributes like horsepower, weight, and acceleration. The visualization uses D3 v5 with SVG rendering, employing `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` for scales and axes. Circles transition smoothly to new positions over one second using chained `transition` and `delay` methods when axes change, with data loaded from a CSV file containing automotive specifications.

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates two custom SVG legends rendered side by side: a color legend for ordinal categories and a size legend for quantitative values. The color legend uses `d3.scaleOrdinal` with distinct fruit categories, while the size legend employs `d3.scaleSqrt` to map numeric ticks to circle radii. Both legends are built using reusable functions that leverage D3’s data join pattern (`enter`, `merge`, `exit`) and are styled with CSS classes. The SVG output is rendered directly in the browser via D3 v5.

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example demonstrates a dynamic fruit bowl visualization where apples and lemons are drawn as SVG shapes and animated using D3 v5 transitions. The fruitBowl function renders a gray bowl as a rectangle, with each fruit positioned horizontally and colored via a d3.scaleOrdinal color scale with red for apples and yellow for lemons. User interaction includes mouseover and mouseout events that highlight the selected fruit with a green stroke. The animation sequence uses d3.transition to smoothly move, resize, and remove fruits over time, showcasing the merge, enter, and exit lifecycle methods for SVG groups.

Loading thumbnail…

Shapes and Colors with SVG and CSS

A world map rendered with SVG paths, where countries are filled with a light green color and the ocean appears blue. Hovering over any country instantly changes its fill to red, while a natural Earth projection and zoom interaction let viewers pan and scale the map. Built with D3 v5, the example uses `d3.geoNaturalEarth1`, `d3.geoPath`, and `d3.zoom` to project and manipulate the geometry, with country names loaded from a TSV file and shapes from TopoJSON data.

Loading thumbnail…

Shapes and Colors with SVG and CSS

An SVG face centered on a 960×500 canvas uses D3 v5’s selection and arc APIs to build its features. Green and greenyellow circles form the head and eyes, while two rectangles animate as eyebrows via chained `transition().duration(2000)` calls, moving up and down over four seconds. A mouth path is generated with the `arc` function, using inner and outer radii with a half-turn angular sweep. The example demonstrates common SVG shapes and CSS styling within D3’s declarative, animation-capable rendering.

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example shows a horizontal bar chart of population data for ten countries, using SVG rectangles rendered with D3 v5. The visualization scales bar lengths with `d3.scaleLinear` and spaces categories using `d3.scaleBand`, while `d3.axisBottom` and `d3.axisLeft` provide labeled axes. CSS styles the bars in pink, and the code reads from a CSV file, formats tick labels with `d3.format`, and logs clicked elements to the console.

Loading thumbnail…

Shapes and Colors with SVG and CSS

A dynamic fruit bowl visualization demonstrates SVG shape updates and color transitions using D3's data join pattern. Apples and lemons appear as circles with distinct fill colors and radius values, driven by ordinal scales for both color and size. The code uses `selection.enter`, `.merge`, and `.exit` methods with `transition().duration()` to animate circles entering, updating, and leaving as fruits are added, removed, or changed. JavaScript `setTimeout` calls trigger sequential data mutations, showing how D3 v5 handles animated updates to SVG elements.

Loading thumbnail…

Stylized Line Chart

A stylized line chart displays temperature readings over the course of a week from the San Francisco dataset. The visualization uses a smooth, natural curve to connect data points, styled with a distinct teal color and no visible points. Built with React and D3 v5, the chart employs `d3.scaleTime`, `d3.scaleLinear`, and `d3.line` with `curveNatural` to render the path in SVG. Custom-axis components generate labeled ticks, and the final output is rendered through ReactDOM.

Loading thumbnail…

Temperature in San Francisco Line Chart

A line chart displays one week of temperature data in San Francisco, with time on the x-axis and degrees Celsius on the y-axis. The data comes from Data Canvas – Sense Your City. The visualization uses d3.csv to load the data, then applies d3.scaleTime and d3.scaleLinear for the axes, with axisBottom and axisLeft generating the tick marks. A d3.line path with curveBasis connects the points smoothly, styled with a maroon stroke in an SVG canvas.

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example shows a horizontal bar chart of country populations using SVG shapes styled with CSS. The bars are drawn as `rect` elements with a pink fill, and the chart includes axes rendered via D3’s `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft`. Population values from a CSV file are loaded with `csv()` and scaled against the chart’s width, while `selectAll` and data joins append the rectangles. The code relies on D3 v5 and SVG, with CSS controlling font size and rectangle color.

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example shows a horizontal bar chart of country populations using SVG shapes styled with CSS. The bars are drawn as `rect` elements with a pink fill, and the chart includes axes rendered via D3’s `scaleLinear`, `scaleBand`, `axisBottom`, and `axisLeft`. Population values from a CSV file are loaded with `csv()` and scaled against the chart’s width, while `selectAll` and data joins append the rectangles. The code relies on D3 v5 and SVG, with CSS controlling font size and rectangle color.

Loading thumbnail…

Let's make a face with D3.js!

A smiling yellow face with black outlined eyes and a curved mouth animates its eyebrows up and down. The example demonstrates fundamental DOM manipulation in D3.js by appending SVG shapes to a central group, with a path drawn via the `arc` function for the mouth. The code uses chained `transition().duration()` calls to move the eyebrows between two vertical positions, creating a looping animation. All elements are rendered as SVG within an HTML5 canvas, using D3 v5.

Loading thumbnail…

Let's make a face with D3.js!

A smiling yellow face with black outlined eyes and a curved mouth animates its eyebrows up and down. The example demonstrates fundamental DOM manipulation in D3.js by appending SVG shapes to a central group, with a path drawn via the `arc` function for the mouth. The code uses chained `transition().duration()` calls to move the eyebrows between two vertical positions, creating a looping animation. All elements are rendered as SVG within an HTML5 canvas, using D3 v5.