Skip to main content
Log in
P

Pulkit Rohilla

@RohillaPulkit·14 public vizzes

Loading thumbnail…

Scatter Plot

A scatter plot displays population figures for the five most populous countries, with circles positioned along a linear scale for population size and a point scale for country names. The chart includes labeled axes, gridlines, and a title, with data loaded from a CSV file using `d3.csv`. The visualization is rendered as an SVG using D3 v5, utilizing `scaleLinear`, `scalePoint`, `axisLeft`, `axisBottom`, and `selectAll` to bind data to circle elements.

Oct 1, 2019
Loading thumbnail…

Temperature In SanFrancisco : AreaChart

This area chart visualizes a week of temperature data in San Francisco, using an SVG rendered with D3 v5. The chart displays temperature over time with a smooth curve, filled area, labeled axes, and a title. The code uses D3 scales (`scaleTime`, `scaleLinear`), axes (`axisBottom`, `axisLeft`), and the `area` generator with `curveBasis` to create the path. Data is loaded from a CSV file via `csv` and parsed before rendering.

Sep 30, 2019
Loading thumbnail…

Network Graph

A network graph displays 49 nodes organized around five central hubs, with connecting links forming a clustered hierarchy. The visualization uses D3 v5’s `d3.forceSimulation` with charge, link, and collision forces to position nodes, which are rendered dynamically on a Canvas via `getContext('2d')`. Node colors and radii are assigned programmatically, and drag interaction is enabled through D3’s drag behavior. Data comes from a local CSV file, and the underlying simulation and rendering are orchestrated by a custom `relation` class.

Sep 28, 2019
Loading thumbnail…

Make a bar chart

This example displays a horizontal bar chart comparing the populations of five countries, using data from a local CSV file. It reads the data with `d3.csv`, scales the population values by 1000, and renders SVG rectangles with `d3.scaleLinear` for the x-axis and `d3.scaleBand` for the y-axis. Axes are generated using `d3.axisLeft` and `d3.axisBottom`. The chart is styled with CSS, and the bars are colored steelblue.

Sep 28, 2019
Loading thumbnail…

World Population : AreaChart

This interactive force-directed network diagram visualizes weighted connections between firms, with edges filtered to show only those with a weight of 5 or greater. Users can double-click nodes or edges to delete them, triggering smooth opacity transitions that animate the network’s reorganization. The implementation uses `d3.layout.force` for physics simulation, SVG for rendering, and mouseover/mouseout handlers to temporarily highlight nodes and edges. Data loads from the `firm.csv` file, and circle radii adjust in real time based on node weight during each tick update.

Sep 28, 2019
Loading thumbnail…

Temperature In SanFrancisco : LineChart

This line chart visualizes temperature readings over a week in San Francisco, using time on the x-axis and temperature on the y-axis. The data is loaded from a CSV file and parsed into date and numeric values. The visualization is built with D3 v5, using `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, and a `line` generator with a `curveBasis` curve. SVG is rendered with gridlines and labeled axes, while a styled path connects the data points in steelblue.

Sep 27, 2019
Loading thumbnail…

Temperature In SanFrancisco

This visualization displays a week of temperature measurements in San Francisco as a scatterplot, with time on the x-axis and temperature on the y-axis. The chart includes labeled axes, grid lines, and a title, with semi-transparent blue circles marking each data point. Built with D3 v5, it uses `scaleTime`, `scaleLinear`, `axisBottom`, and `axisLeft` to construct the scales and axes, while loading CSV data from a remote URL. The rendering is done via SVG, with margins, tick styling, and axis labels defined in the accompanying CSS.

Sep 27, 2019
Loading thumbnail…

Cars Plot

This scatterplot visualizes the relationship between horsepower and weight for a dataset of cars, with each car represented as a semi-transparent circle. The chart includes labeled axes, grid lines, and a title comparing the two variables. Built with D3 v5, the code uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to construct the scales and axes, while loading data via `csv` from an external file. The SVG rendering applies custom styling from `styles.css` for circles and text elements.

Sep 27, 2019
Loading thumbnail…

Make a bar chart

This bar chart displays the population of the top five countries from a CSV file, using horizontal bars scaled linearly to population values. The chart renders in SVG and employs d3.csv, d3.scaleBand, d3.scaleLinear, d3.axisLeft, and d3.axisBottom. The y-axis labels show country names, while the x-axis uses tick formatting to abbreviate numbers (e.g., "1.42B"). Axis lines and domain paths are removed, and custom text elements label the chart and axis.

Sep 26, 2019
Loading thumbnail…

Make a bar chart

A horizontal bar chart displays the population of five countries, using steel-blue rectangles to encode values from a CSV file. The visualization uses D3 v5’s `scaleLinear` for the x-axis, `scaleBand` for the categorical y-axis, and `axisLeft` and `axisBottom` to render ticks. Data is loaded via `csv`, with population numbers converted from thousands, and the SVG is appended to a 960x500 viewport.

Sep 26, 2019
Loading thumbnail…

Let's make a face with D3.js

This example creates a stylized face using D3.js, drawing a yellow head, eyes, eyebrows, and a mouth with SVG shapes. The eyebrows animate by transitioning their vertical position over time. The code uses D3 v5 APIs including `select`, `arc`, and `.transition()` to build and animate the visualization, with the mouth path defined by an arc function.

Sep 26, 2019
Loading thumbnail…

Let's make a face with D3.js

This example creates a stylized face using D3.js, drawing a yellow head, eyes, eyebrows, and a mouth with SVG shapes. The eyebrows animate by transitioning their vertical position over time. The code uses D3 v5 APIs including `select`, `arc`, and `.transition()` to build and animate the visualization, with the mouth path defined by an arc function.

Sep 24, 2019
Loading thumbnail…

HTML Cars Report

This example displays a simple HTML cars report listing three used vehicles with their model years and prices. It shows a static, unstyled data summary with one highlighted entry—the 2012 Nissan Leaf—rendered in red to draw attention. The implementation uses plain HTML for content structure, a linked CSS stylesheet for presentation, and imports the Ubuntu font from Google Fonts while applying a monospace fallback. The report is purely presentational with no interactive or data-binding features.

Sep 24, 2019
Loading thumbnail…

Cars Report

This example demonstrates a data-reporting workflow that filters a hardcoded dataset of five cars by price and displays the results as formatted text lines. It shows how D3.js v5 can be used for simple DOM manipulation rather than complex charting, with the `d3.select` method updating a message div. The report generation relies on the custom `formatCar` and `generateReport` utility functions, which use array filtering and mapping, while the data is delivered asynchronously via a Promise in `getCars` after a simulated two-second delay. The presentation uses the Ubuntu font against a dark navy background.

Sep 24, 2019