Skip to main content
Log in
K

KamilPodsiadlo

@KamilPodsiadlo·15 public vizzes

Loading thumbnail…

Fork of Brush, Trendline, Legend, Linechart, Barchart

Two time series of EPA groundwater monitoring data display water levels at a deep and shallow observation well. A linked brush chart below the main line chart filters the date range, and the main chart’s x-axis updates accordingly. A dashed trendline with its regression equation appears in the brushed region, while a legend identifies the two colored lines. The visualization uses d3.scaleTime, d3.line, d3.brushX, d3.nest, and a least-squares regression helper to compute the trendline from filtered data.

Jan 13, 2022
Loading thumbnail…

Fork of Global Suicide Rates Linked Views with Fast Brushing

This interactive visualization presents global suicide rates through linked views: a world map with circles sized by suicide count and a brushing timeline histogram. Users brush the timeline to filter the map and highlight specific time ranges. Built with React and D3 v5, it uses `geoNaturalEarth1` and `geoPath` for map projection, `brushX` for timeline selection, and `scaleSqrt` for circle sizing. Data comes from CSV and world-atlas TopoJSON sources, rendered as SVG with transparent red circles.

Jan 12, 2022
Loading thumbnail…

Fork of Fork of 112 Multiple Views

This example shows an interactive visualization of emergency incident data across the Netherlands. A geographic bubble map displays incident locations, while a synchronized date histogram below allows users to brush over time ranges, filtering the map to show only incidents within the selected period. The map uses D3’s `geoMercator` and `geoPath` projections, while the histogram pulls from `d3.bin`, `scaleTime`, and `brushX`. React manages state, and the data comes from a CSV of incident records with geographic coordinates.

Jan 12, 2022
Loading thumbnail…

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

This map visualization renders the entire world using D3.js v5 and the TopoJSON library. It displays countries as light green filled paths with a blue sphere background, using the `geoNaturalEarth1` projection. Country boundaries come from the world-atlas dataset loaded via the `json` function, and the `geoPath` API generates the SVG paths that make up the map.

Jan 11, 2022
Loading thumbnail…

Fork of Choropleth Map with Interactive Filtering

This choropleth map visualizes global economic data, coloring each country according to its economy category. Clicking a color in the legend filters the map to highlight only countries in that category, dimming all others. The map uses d3.geoPath with a natural Earth projection, while d3.scaleOrdinal and d3.schemeSpectral drive the color encoding. Data loads via topojson from the world-atlas package, with d3.tsv supplying the economic classifications.

Jan 11, 2022
Loading thumbnail…

Fork of Reusable D3 Scatter Plot with Symbols

This visualization renders the Iris Dataset as an interactive scatter plot, mapping petal width and sepal length along the x and y axes. It distinguishes the three flower species through different symbol shapes (circles, crosses, and diamonds) rather than colors, using d3.scaleOrdinal and d3.symbol. Built with D3 v6, the reusable scatterPlot function chains configuration methods for data, value accessors, margins, and symbol size. The SVG output includes axis labels via d3.axisLeft and d3.axisBottom, with the plot sized to fill the browser window. Data is loaded asynchronously from a remote CSV using d3.csv.

Dec 8, 2021
Loading thumbnail…

Fork of MedData - TimeLine

This timeline chart displays patient medical data over time, specifically tracking diastolic pressure values. The line chart, drawn with SVG, includes an area fill and a brush interaction for zooming. The code uses d3.scaleTime and d3.scaleLinear to map data from the patient1.csv file, while d3.line and d3.area generate the visual elements. A tooltip, though its event handlers are incomplete, is positioned to show date, value, and measurement name on mouse events.

Dec 3, 2021
Loading thumbnail…

Fork of Vega-Lite API Template

A scatterplot of automobile data maps engine displacement to horsepower, with points colored by model year. The visualization uses the Vega-Lite API to declaratively encode the fields, while config.js customizes axis and label styling for readability. Data loads asynchronously from a CSV of auto-mpg records via d3.csv. Tooltips display car model names on hover, and the plot omits axis domains while using light gray tick marks against the dark text palette.

Nov 15, 2021
Loading thumbnail…

Fork of HTML Starter

This example shows a simple web page rendering the message "Hello HTML!" in large, centered text. It demonstrates a minimal setup using plain HTML and CSS, with the styling applied through a `message` class that sets a 13em font size and center alignment. A separate JavaScript file, `test.js`, includes a `console.log` call but does not affect the page content. The project is built with the React framework, as noted in its metadata, but the code itself uses no external libraries or data sources.

Nov 15, 2021
Loading thumbnail…

Fork of COVID-19 Deaths in US (NYT data) Reusable D3 Scatter Plot Framework

This visualization displays COVID-19 daily death averages across the United States as a scatter plot, with time on the x-axis and deaths on the y-axis. It uses a reusable D3 chart framework with `scaleTime`, `scaleLinear`, and `axisBottom` to render the timeline, while the data comes from the NY Times rolling averages CSV. The SVG rendering includes custom axis labels, a title, and source attribution, with a circular marker for each date point. The code demonstrates the reusable chart pattern with getter/setter accessors for width, height, data, and margin.

Jul 21, 2021
Loading thumbnail…

Fork of Stylized Scatter Plot

This scatter plot visualizes the Iris dataset, mapping petal length against sepal width with labeled axes and tooltips. Built with React and D3 v5, it renders as an SVG using scaleLinear scales for positioning. The code defines custom AxisBottom, AxisLeft, and Marks components, with d3.csv loading the data and d3.format handling tick label formatting. Points are drawn as circles with a fixed radius, styled with a teal fill against a clean, minimal chart layout.

Jul 21, 2021
Loading thumbnail…

Fork of CO2 Emissions Over Time

This stacked area chart visualizes global CO2 emissions from 1790 onward, segmented by fossil fuel sources including gas, liquids, solids, cement production, and gas flaring. The chart uses d3.stack, d3.area, and d3-scale-chromatic to render the SVG paths, with labels positioned via d3-area-label. Data comes from a CSV file loaded with d3.csv. The chart updates responsively on window resize and includes axes with tick lines and a rotated y-axis title.

Jul 21, 2021
Loading thumbnail…

Fork of Understanding the zoom on d3.js

A fork of Mike Bostock’s zoom example, this visualization displays monthly S&P 500 closing prices as a blue area chart. An initial animated transition zooms into the data range from 2003–2004, and users can continue panning and zooming interactively. The code uses d3.zoom with scaleExtent and translateExtent, d3.area with curveMonotoneX, and d3.axisBottom for the time axis, rendering everything as SVG.

Jul 21, 2021
Loading thumbnail…

Fork of Books with Pages

This chart displays the number of pages for eight classic novels as horizontal bars, with a green-to-yellow color scale encoding page counts. It uses d3.csv to load the data, d3.scaleLinear for the x-axis and color, and d3.scaleBand for the y-axis. The SVG rendering includes axis labels and a title, while CSS margins and overflow hidden remove scroll bars.

Jul 21, 2021
Loading thumbnail…

Fork of VizHub User Count Over Time - Kamil

This line chart tracks the cumulative number of VizHub users from its launch in August 2018 through mid-2021, with each data point marking total user counts at sampled dates. The SVG visualization uses D3 v4 APIs including `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.axisLeft` to render axes, while `d3.line` draws the growth trajectory and circles highlight individual observations. Annotations from the `d3-svg-annotation` library label key events such as a Medium post and the VizHub 2.0 Kickstarter, with connector lines pointing to specific data points. The chart’s gridlines and tick styling come from CSS overrides, and user counts derive from the included `users.csv` dataset.

Jun 29, 2021