J

jblaskovich

@jblaskovich·35 public vizzes

Loading thumbnail…

Multiple Line plot

This visualization presents a multiple line plot tracking monthly PM2.5 particulate levels in London from 2010 through 2018, with each year rendered as a separate colored line. The chart uses D3 v5 to build SVG paths with a smoothed curve basis, displaying data from the Kings College London Air Quality Dataset. A color legend identifies each year, while the y-axis scale is derived from the 2011 data values. The visualization includes static axes and axis labels, with all nine yearly lines drawn simultaneously on a dark background.

Loading thumbnail…

Mountains on a Map

The visualization renders a world map where each city with a population over 50,000 is drawn as a small triangular "mountain" whose height corresponds linearly to population and whose color encodes the country. The map includes graticules, country boundaries, and a light sphere background. It uses D3’s `geoNaturalEarth1` projection, `geoPath`, and `geoGraticule`, with React managing the SVG rendering and data loading via `useCities` from a Simplemaps CSV. Color is assigned using `scaleOrdinal` with `hcl` hues.

Loading thumbnail…

Labeled US Map

This example displays a labeled map of the United States, including territories, with state names positioned using polylabel for optimal label placement. The map uses a custom Albers USA projection with territories, rendering polygons on a Canvas layer and labels in an SVG layer. Built with React and D3 v5, it fetches state boundaries from TopoJSON, draws them with d3.geoPath, and caches geometry data asynchronously.

Loading thumbnail…

Temperature in San Francisco line chart

This line chart displays a week of temperature readings in San Francisco, plotting temperature against time with a smooth green curve and red data points. The visualization uses D3 v5’s `scaleTime` and `scaleLinear` for axes, `line` with `curveBasis` for the smoothed path, and `axisBottom`/`axisLeft` for grid-lined ticks. Data is loaded from a CSV hosted on VizHub, with timestamps parsed as dates and temperatures as numbers. SVG rendering is used, with custom styling for axis labels, title, and grid lines.

Loading thumbnail…

Scatter Plot Convert to Line plot

This interactive visualization uses the D3.js library (v5) and displays monthly average air quality data for London from January 2010 to August 2018. Users can select different variables from dropdown menus to plot as the x and y axes. The chart transitions from a scatter plot, with circles colored by month using an inferno color scale, into a smooth line plot representing the data trend. The visualization also includes a clickable color legend to filter datapoints by month, highlighting the selected month's data while dimming others. The data is sourced from the Kings College London Air Quality Dataset.

Loading thumbnail…

usa map 1

This visualization displays a map of the United States rendered with county boundaries, colored with a blue sphere background and light green states. The map uses the Natural Earth projection and draws county paths as SVG elements. The code loads GeoJSON data from `data.json` and processes it with the `topojson` library's `feature` function, then projects and renders it using `d3.geoPath` with the `geoNaturalEarth1` projection from D3 v5.

Loading thumbnail…

Scatter Plot with Menus - 1

This interactive scatter plot displays automobile data from the UCI Machine Learning Repository Auto MPG dataset, allowing users to compare any two numerical attributes by selecting columns from dropdown menus. The visualization updates both axes and animates the red semi-transparent circles into position over two seconds using D3 v5 transitions. The code implements custom dropdown menu and scatter plot modules, leveraging D3’s scaleLinear, axisBottom, axisLeft, extent, and CSV file loading. The SVG rendering includes rotated axis labels and gridlines, with menus positioned above the chart for attribute selection.

Loading thumbnail…

Chloropleth Map with interactive filtering-1

A choropleth map displays global economic classifications, with a linked color legend for interactive filtering. Clicking a legend category dims non-matching countries and highlights those selected. The visualization uses d3.geoNaturalEarth1 and d3.geoPath for projection, d3.zoom for panning, and d3.scaleOrdinal with schemeSpectral for colors. Data comes from TopoJSON world-atlas and TSV metadata, rendered as SVG paths with hover effects.

Loading thumbnail…

Chloropleth Map-1

A choropleth map colors countries by their income group using an ordinal color scale with the d3-scaleChromatic scheme. It renders geographic boundaries with d3.geoPath and a natural Earth projection, while pan and zoom are enabled via d3.zoom. A custom SVG legend displays the color scale using circle marks and text labels. Data comes from the World Atlas TopoJSON and TSV files, loaded and joined using d3.json, d3.tsv, and topojson.feature.

Loading thumbnail…

color and size legends -1

This example demonstrates two distinct legends: one mapping categorical colors to fruits, and another mapping numerical values to circle sizes. The color legend uses `scaleOrdinal` with red, yellow, green, and orange for apples, lemons, limes, and oranges. The size legend uses `scaleSqrt` to scale circle radii from 0 to 50 for ticks between 1 and 10. Both legends render SVG text and circles, with the size legend's circles having a semi-transparent fill and stroke opacity. The code uses D3 v5 API calls like `selection.selectAll`, `attr`, and `.merge`.

Loading thumbnail…

World Countries Tree-1

A hierarchical tree visualization displays the world's countries organized by continent and subregion, using a tidy tree layout with horizontal links. The D3 v5 code loads hierarchical JSON data and applies the `d3.tree` layout, rendering the structure as an SVG with `linkHorizontal` paths and text labels. A zoom and pan feature is implemented via `d3.zoom`, allowing interactive navigation of the full country hierarchy.

Loading thumbnail…

Blank Canvas

An empty SVG canvas fills the browser window, displaying only a rounded rectangle that spans the full viewport. The example demonstrates the minimal setup required to render a blank visualization surface. The code uses D3 v5's `select` and `arc` imports to create an SVG container, then appends a `<rect>` element with its width and height set to the document body's client dimensions. The CSS fixes the body to prevent scrolling, ensuring the canvas remains static.

Loading thumbnail…

Cheap Tricks for Interaction-1

A world map rendered with SVG paths uses a Natural Earth projection and halts at sphere boundaries, with countries colored light green and highlighted red on hover. Tooltips display country names via a lookup table built from a TSV file’s ISO numeric codes, paired with TopoJSON geometry. The view supports zoom and pan through `d3.zoom`, applying transforms to a group element, while `d3.geoPath` generates paths and `d3.event` handles interaction updates.

Loading thumbnail…

Cars Scatter Plot: Horsepower vs. Weight

This scatter plot visualizes the relationship between horsepower and weight for cars from the UCI Machine Learning Repository's Auto MPG dataset. Each blue semi-transparent circle represents a car, positioned by its horsepower on the x-axis and weight on the y-axis, revealing a positive correlation between the two variables. The visualization uses D3 v5 APIs such as `csv`, `scaleLinear`, `axisBottom`, and `axisLeft` to load data, scale the axes, and render the SVG plot. Axis labels and a title are added, with gridlines provided via tick sizes, all styled through external CSS.

Loading thumbnail…

Lets make a map with D3.js

This example displays a world map with countries rendered in light green against a blue sphere. It uses D3.js to create SVG paths from GeoJSON data, projecting geographic coordinates with the Natural Earth projection. The map is generated from the `world-atlas` dataset, and the TopoJSON library converts the data into features for rendering. The visualization employs D3's `geoPath` and `geoNaturalEarth1` to produce the map, with a simple CSS styling for the country and sphere fills.

Loading thumbnail…

Bowl of Fruit - Hover to select 1

Five circles representing apples animate into a bowl, shrinking and disappearing when eaten. Hovering over a fruit selects it with a black outline. The React app uses a d3 data join with enter, update, and exit selections, transitioning radius and x-position via d3 transitions and a d3.scaleOrdinal color scale.

Loading thumbnail…

Bowl of Fruit - click to select 1

Five fruit circles animate into a bowl, each colored by type via a d3.scaleOrdinal, with an apple turning into a lemon halfway through. Clicking a fruit selects it, adding a black stroke to the chosen circle. The visualization shows enter, update, and exit selections with d3 transitions, scaling radius and repositioning circles over one second as fruits are removed or replaced.

Loading thumbnail…

Bowl of Fruit - General Update Pattern - singular elements

A bowl of fruit demonstrates the general update pattern for singular elements using d3 data joins. Apples and lemons are rendered as colored circles with labels, using ordinal scales for color and radius. The example shows enter, update, and exit selections through timed state changes: an apple is removed, a fruit changes type from apple to lemon, and another apple is filtered from the array. The code uses d3-selection's `.data()`, `.enter()`, `.merge()`, and `.exit()` methods to manage SVG groups and their circle and text children.

Loading thumbnail…

animated transitions try

The example demonstrates animated transitions of fruit shapes in an SVG bowl, showing apples and lemons that appear, disappear, and change type over time. Using D3.js v5 with the `select`, `range`, and `scaleOrdinal` APIs, it employs data joins with enter, update, and exit selections. The `fruitBowl` module handles rendering, applying `transition().duration(1000)` to smoothly animate circle radii and colors as fruits are eaten or replaced.

Loading thumbnail…

Bowl of Fruit - General Update Pattern - nested elements

Three rows of fruit demonstrate the D3 general update pattern with nested SVG elements. Apples and lemons are drawn as circles colored by a d3.scaleOrdinal, and each fruit group contains a circle and a text label. The example uses d3.selectAll, enter, merge, and exit selections to handle data changes, with setTimeout calls removing apples or changing one apple into a lemon.

Loading thumbnail…

Bowl of Fruit - General Update Pattern2, object constancy

Circles representing apples and lemons transition smoothly within an SVG, demonstrating D3's general update pattern with object constancy. The visualization shows how data joins preserve element identity across updates, animating enter, update, and exit selections via `selection.merge()` and `transition().duration()`. Using React-compatible rendering, the example manipulates a fruit array with `setTimeout`, removing items or changing types, while D3 v5's `scaleOrdinal` maps fruit types to colors and radii. This highlights keyframe-less state changes through reusable D3 functions.

Loading thumbnail…

Bowl of Fruit - General Update Pattern2, animated transition

Five pieces of fruit sit in a bowl as colored circles, rendered with SVG and animated by D3 transitions. The example demonstrates the General Update Pattern by adding, removing, and modifying elements over time. Apples appear in red, lemons in yellow, with radius differences encoded via a d3.scaleOrdinal color scale and a separate radius scale. Using the d3 selection API with `.enter()`, `.merge()`, and `.exit()`, the code applies 1000ms transitions to animate radius changes, and `.remove()` deletes exiting circles. The React-framework wrapper calls the `fruitBowl` function on each state change.

Loading thumbnail…

Bowl of Fruit - General Update Pattern2, merge

This example demonstrates the D3 general update pattern using the merge() method to combine enter and update selections. It shows a bowl of fruit represented as circles that change as apples are eaten or replaced with lemons. The code uses d3.scaleOrdinal for color and radius mapping, d3.selectAll().data() for data joins, and the .enter()/.merge()/.exit() API to handle dynamic state changes. The visualization is rendered as SVG within a React framework using d3.v5.

Loading thumbnail…

Bowl of Fruit - General Update Pattern1

This example demonstrates the D3 general update pattern by showing a row of five apples that transition over time: one apple is removed, and another apple changes into a lemon. It renders SVG circles using d3.selectAll and a data join, with scaleOrdinal for color and radius. The update, enter, and exit selections are handled explicitly, with exit().remove() deleting the removed circle. Data is managed in a plain JavaScript array, and a render function reapplies attributes, simulating a component-based approach with D3 v5.

Loading thumbnail…

World Population Area Chart

This area chart shows world population over time, using a filled path to emphasize the growth trend from a zero baseline. The visualization is rendered as an SVG using D3 v5, with a time-scaled x-axis and linear y-axis formatted in billions. Data is loaded from a CSV file via `d3.csv`, and the area shape is generated with the `d3.area` API using `curveBasis` for smoothing. Axis ticks and labels are styled with `d3.axisBottom` and `d3.axisLeft`.

Loading thumbnail…

Temperature in San Francisco | Area Chart

This area chart displays one week of temperature data in degrees Celsius for San Francisco, sourced from Data Canvas - Sense Your City. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, and `area` generator with a `curveBasis` interpolation to draw a smooth filled path. Axes are rendered with `axisBottom` and `axisLeft`, including gridlines and rotated labels, while the chart title communicates the time frame. The SVG output includes a maroon fill for the area, with styling applied via external CSS.

Loading thumbnail…

Temperature in San Francisco | Line Chart

This line chart visualizes one week of temperature data in San Francisco, sourced from Data Canvas - Sense Your City. The SVG renders a smooth curve using d3.line with curveBasis, mapping timestamps to a time scale and temperatures to a linear scale. Axis labels and tick marks are generated via d3.axisBottom and d3.axisLeft, while the CSV is loaded and parsed with d3.csv.

Loading thumbnail…

Temperature in San Francisco | Scatter Plot

This scatter plot displays one week of temperature readings in degrees Celsius for San Francisco, plotting each timestamp against its corresponding temperature value. The visualization uses D3 v5’s `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to map time and temperature data extracted from a CSV file, with circles rendered in SVG. Axis labels and a descriptive title are added via D3 selections, while grid lines are generated from the axes’ tick sizes. The data originates from the Data Canvas - Sense Your City project, with the chart rendered in a 960×500 SVG canvas.

Loading thumbnail…

Scatter Plot

This scatter plot displays the population of the top 10 most populous countries, using blue circles positioned along a linear x-axis for population values and a point-based y-axis for country names. The visualization uses D3 v5 with `scaleLinear`, `scalePoint`, `axisBottom`, and `axisLeft` to construct the axes and render SVG circles. Data is loaded from a CSV file and multiplied by 1000 to convert to full population counts. Grid lines are drawn via tick sizes, while axis labels and a title are added as SVG text elements.

Loading thumbnail…

Customizing Axes

This example shows a horizontal bar chart of the top 10 most populous countries, using a linear scale for population and a band scale for country names. The y-axis labels are enlarged, while the x-axis applies a custom tick formatter that converts values into abbreviated units (e.g., "1.42B"). The chart uses `d3.csv` to load data, `d3.scaleLinear`, `d3.scaleBand`, `d3.axisLeft`, and `d3.axisBottom` with SVG rendering. The axis domain lines are removed, and tick marks extend across the plot area.

Loading thumbnail…

Making a Bar Chart

A horizontal bar chart ranks ten countries by population, using a blue rect per nation with axis labels for country names and population values. The visualization loads population data from a CSV file, converts the numbers to absolute values, and renders SVG bars using D3 v5. It employs `d3.csv`, `scaleLinear`, `scaleBand`, `axisLeft`, and `axisBottom` to position and scale the marks, with margins applied to an SVG container sized 960 by 500 pixels.

Loading thumbnail…

Lets make a face with D3.js

This example draws a simple cartoon face with a yellow circular head, two eyes, animated eyebrows, and a curved mouth. The face is centered in an SVG canvas, and the eyebrows move up and down repeatedly using chained `transition` calls. The code uses D3 v5 selections to build the shapes, including `arc()` for the mouth path, and relies on SVG primitives like `circle` and `rect` for rendering.

Loading thumbnail…

Shapes with SVG and CSS

This example displays a grid of basic SVG shapes—circles and rectangles—arranged in rows, with a line and polyline across the bottom. It demonstrates raw SVG markup using elements like `circle`, `rect`, `g`, `line`, and `path`, styled through a linked CSS stylesheet. The first row uses default fill, the second applies inline fill colors, and the third groups shapes with a shared `fill`, `stroke`, and `stroke-width` via a transform. The final group applies CSS classes to set stroke styling on the line and path, showing how SVG and CSS interact for visual formatting.

Loading thumbnail…

HTML Cars Report

This example displays a plain HTML page titled “Cars Report” listing three used vehicles with their prices, where the first item—a 2012 Nissan Leaf—appears highlighted in red. It uses no JavaScript libraries or data-visualization APIs; instead, it relies solely on static HTML markup and a linked CSS stylesheet (`styles.css`) to style the content. The page sets a monospace font at 3em for the body and applies a `.highlighted` class to emphasize the Nissan Leaf, demonstrating a minimal text-based report without any interactive features.

Loading thumbnail…

Cars Report

This example demonstrates how to generate a text-based report of cars priced under a threshold, displaying each car’s year, make, model, and price in a large HTML `<pre>` element. It uses JavaScript objects, arrays, and modules to structure the data pipeline, with `JSON.parse` handling an inline data source and a Promise-based `setTimeout` to simulate an asynchronous fetch. React is listed as the framework, while `getCars()`, `generateReport()`, and `formatCar()` compose the core logic.